Tabla de contenidos
By Marine Larmier - Última actualización el
¿Te preguntas cómo usar WebP en WordPress y cómo convertir las imágenes que ya tienes en la biblioteca de WordPress? ¡Has llegado al lugar indicado!
Si analizas el rendimiento de tu web con PageSpeed Insights, puede que veas la recomendación «Publica imágenes con formatos de próxima generación» para mejorarlo. Google te está diciendo que te olvides de JPEG y PNG y que centres tus esfuerzos de optimización de imágenes en formatos de imagen como WebP.
Esta guía explica cómo resolver esta advertencia y todo lo que necesitas saber sobre WebP en WordPress. También encontrarás una lista de las mejores herramientas para convertir casi cualquier formato a WebP.
¿Qué es el formato de imagen WebP?
Creado por Google, WebP es un formato de próxima generación para la web. Ofrece una compresión de imágenes superior, tanto sin pérdida como con pérdida, a la vez que conserva su calidad. En comparación con los tradicionales JPEG o PNG, este moderno formato WebP te permite crear archivos aún más pequeños, lo que se traduce en una página que carga más rápido.
WebP vs. PNG vs. JPEG
Si dudas entre los tres formatos y te importa el rendimiento, elige WebP para servir imágenes optimizadas en WordPress. Ahora vas a entender por qué.
JPEG vs. WebP
Ambos formatos de archivo comprimen las imágenes para que sea más fácil compartirlas en la web, y conservan su calidad. Se parecen bastante, así que ¿por qué elegir WebP?
Un archivo WebP suele ser mucho más pequeño que un JPEG tradicional. Según Google, una imagen WebP con compresión con pérdida podría ser entre un 25 % y un 34 % más pequeña que un archivo JPEG comparable.
Fíjate en la figura de abajo: WebP (en rojo) consigue una compresión mejor que JPEG.
Comprobemos esta afirmación con nuestra imagen JPEG de 3,7 MB. Tras convertirla a WebP, la imagen mantuvo la misma calidad, pero el tamaño del archivo bajó a 1,3 MB.
PNG vs. WebP
Los PNG se usan sobre todo para gráficos web sin fondo, como logotipos e ilustraciones, más que para fotos de alta calidad. Suelen ocupar más espacio de almacenamiento que los demás formatos. Las imágenes WebP sin pérdida son, de media, un 26 % más pequeñas que los PNG.
Hagamos otra prueba rápida y convirtamos una imagen PNG a WebP. Nuestro archivo original pesaba 432 KB y, con una simple conversión a WebP, se redujo a 244 KB.
JPEG vs. PNG vs. WebP
Para resumir, si quieres mejorar la puntuación de rendimiento de Lighthouse de tu sitio WordPress, opta por WebP. Así se comparan los tres formatos entre sí:
¿Qué navegadores son compatibles con WebP?
En 2023, todos los principales navegadores admiten WebP. Por ejemplo, Google Chrome, Safari, Firefox, Edge, el navegador Opera y otras herramientas admiten este formato moderno de forma nativa.
Mostrar imágenes WebP con un fallback para navegadores antiguos
Las imágenes son clave para garantizar una experiencia de usuario excelente, así que deberían mostrarse a todos los visitantes, incluso a los que usan versiones antiguas del navegador. Si quieres ir sobre seguro, deberías activar un fallback a otros formatos tradicionales, como PNG o JPEG.
Cómo añadir un fallback a las imágenes WebP
- Puedes añadir la etiqueta <picture> a tu imagen para implementar el fallback si tu visitante usa una versión antigua. Los navegadores compatibles con WebP mostrarán «dog.webp», mientras que las versiones antiguas de los navegadores que no admiten WebP recurrirán al elemento «dog.jpg».
- Usar un plugin de WordPress como Imagify, que te permite convertir tus imágenes a WebP y usar las etiquetas <picture> para activar el fallback en las imágenes WebP.
Cómo crear y usar imágenes WebP en WordPress
Desde WordPress 5.8, el formato WebP es totalmente compatible con WordPress. Solo tienes que subir tus imágenes a tu biblioteca de medios e incluirlas en tu contenido.
Los 4 mejores plugins para crear una imagen WebP
Ya no hace falta instalar una extensión de terceros para subir imágenes WebP a WordPress, pero necesitarás un plugin para convertir tus imágenes actuales a WebP. Estos son 4 plugins de WordPress para WebP con los que puedes convertir imágenes a WebP:
- Imagify: un plugin de compresión de imágenes fácil de usar que ofrece conversión a WebP. Es gratuito para unas 200 imágenes al mes.
- WebP Converter for Media: convierte archivos en los formatos estándar JPEG, PNG y GIF al formato WebP.
- WebP Express: añade una línea de código para servir imágenes WebP a los usuarios.
- ShortPixel Image Optimizer: otro plugin de optimización de imágenes que convierte JPEG, PNG o GIF a WebP y AVIF.
Cómo crear una imagen WebP en WordPress
La forma más sencilla de crear una imagen WebP en WordPress es usar un plugin como Imagify. Todas tus imágenes se pueden convertir a WebP con un solo clic, junto con la compresión masiva.
- Sube tus archivos JPEG, PNG, PDF o GIF a tu biblioteca de medios de WordPress
- Desde tu escritorio de WordPress, ve a Ajustes > Imagify > pestaña Optimización
- Marca las siguientes casillas: «Create WebP versions of images» y «Display images in WebP format on the site»
Extra: si no usas WordPress, también puedes recurrir a programas de diseño como Photoshop, Lightroom o Sketch y exportar tus archivos directamente a WebP:
Da un impulso extra a la optimización de imágenes
Además de la compresión de imágenes y la conversión a WebP, la carga diferida (lazy loading) es otra forma de servir imágenes optimizadas a tus visitantes y de mejorar la velocidad de carga de tu página. Usar un script como Lazy Load significa que el navegador solo carga las imágenes de la parte superior de la página (las que están en el viewport del usuario).
Además, en su informe de rendimiento, PageSpeed Insights recomienda «Pospón la carga de imágenes que no aparecen en pantalla», es decir, aplicar la carga diferida:
Cómo aplicar la carga diferida a tus imágenes WebP
La forma más sencilla de aplicar el script de carga diferida a tus imágenes WebP es usar un plugin de WordPress como WP Rocket. Para implementar la carga diferida, sigue estos dos sencillos pasos directamente desde la administración de WordPress:
- Ve a Ajustes > WP Rocket > pestaña LazyLoad
- Marca las casillas que quieras entre imágenes, imágenes de fondo en CSS e iframes y vídeos.
🏆 ¡WP Rocket es el primer plugin que ofrece la carga diferida de imágenes de fondo en CSS con un solo clic!
Por último, PageSpeed Insights puede detectar si WP Rocket está instalado en tu sitio WordPress y, en su caso, te recomienda activar la función LazyLoad:
🚀 ¿Quieres mejorar el rendimiento general de tu web? WP Rocket también es uno de los mejores plugins de caché para WordPress, que optimiza tu base de datos y tu código, y mejora tus Core Web Vitals en pocos clics.
Preguntas frecuentes sobre WebP en WordPress
¿Qué es el formato WebP?
El formato WebP es un formato de imagen de próxima generación para la web creado por Google. Ofrece una compresión de imágenes superior, tanto sin pérdida como con pérdida, a la vez que conserva su calidad. En comparación con los tradicionales JPEG o PNG, permite crear archivos aún más pequeños, lo que se traduce en páginas que cargan más rápido.
¿Qué es mejor, WebP o JPG?
Si te importa el rendimiento, WebP es mejor opción que JPG, porque un archivo WebP suele ser mucho más pequeño que un JPEG tradicional. Según Google, una imagen WebP con compresión con pérdida podría ser entre un 25 % y un 34 % más pequeña que un archivo JPEG comparable. En nuestra prueba, una imagen JPEG de 3,7 MB bajó a 1,3 MB tras convertirla a WebP, con la misma calidad.
¿Qué diferencia hay entre WebP y PNG?
Las imágenes WebP sin pérdida son, de media, un 26 % más pequeñas que los PNG. Los PNG se usan sobre todo para gráficos web sin fondo, como logotipos e ilustraciones, y suelen ocupar más espacio de almacenamiento que los demás formatos. En nuestra prueba, un archivo PNG de 432 KB se redujo a 244 KB con una simple conversión a WebP.
¿Cómo convertir imágenes a WebP en WordPress?
Para convertir tus imágenes actuales a WebP en WordPress, necesitarás un plugin como Imagify, WebP Converter for Media, WebP Express o ShortPixel Image Optimizer. Con Imagify, sube tus archivos JPEG, PNG, PDF o GIF a tu biblioteca de medios, ve a Ajustes > Imagify > pestaña Optimización y marca las casillas «Create WebP versions of images» y «Display images in WebP format on the site». Desde WordPress 5.8 ya no hace falta ninguna extensión de terceros para subir imágenes WebP; el plugin solo es necesario para convertir las que ya tienes.
¿Qué navegadores admiten WebP?
En 2023, todos los principales navegadores admiten WebP. Google Chrome, Safari, Firefox, Edge y Opera, entre otros, lo admiten de forma nativa. Para los visitantes con versiones antiguas del navegador, puedes activar un fallback a PNG o JPEG con la etiqueta <picture> o con un plugin como Imagify.
Conclusión
Servir tus imágenes en formato WebP en WordPress es una forma sencilla de impulsar el rendimiento. Este formato de próxima generación ayuda a mejorar tus Core Web Vitals al servir a tus visitantes archivos de imagen más pequeños, ¡sin que la calidad se resienta!
WordPress y los principales navegadores ya admiten WebP, así que no tienes que preocuparte por la compatibilidad. Con una herramienta como Imagify o WebP Converter for Media, convertir tus imágenes a WebP directamente desde el escritorio de WordPress es más fácil que nunca.
Si te animas a ir un paso más allá para mejorar el rendimiento de tu web y optimizar aún más tus imágenes (con la carga diferida, por ejemplo), prueba WP Rocket. Aplica el 80 % de las mejores prácticas de rendimiento nada más activarlo y no requiere conocimientos técnicos. Además, cuenta con una garantía de devolución del dinero de 14 días, así que no corres ningún riesgo, ¡salvo el de ver cómo tu web carga más rápido!
