En esta guía te voy a explicar cómo usar imágenes WebP en WordPress.
Una tecnología que hará tu web mucho más rápida y una técnica imprescindible para optimizar imágenes en WordPress.
¡Vamos!
¿Qué es WebP?
WebP es un nuevo formato de imágenes mucho más ligero que el resto:
- 26% más ligeras que PNG.
- 25% al 34% más ligeras que JPEG.
Lo bueno de WebP es que también admite transparencias, compresión con o sin pérdida, metadatos, imágenes animadas (¿Adiós GIF?) y más.
Así que es un gran sustituto del resto de formatos, aunque tenemos el problema de la compatibilidad.
WebP es compatible con las nuevas versiones de los navegadores Google Chrome, Firefox, Edge y Opera, pero no con otros.
Por eso para poder usarlas hay que hacerlo bien, para mostrar otras imágenes para los que no son compatibles.
Cómo usar imágenes WebP en WordPress
Hay varias formas de usar imágenes WebP en WordPress.
Convertir las que tienes subidas, hacerlo mediante un CDN y otras.
Imágenes WebP con Imagify
La mejor y más sencilla manera de usar imágenes WebP es con Imagify, para mi el mejor plugin para optimizar imágenes en WordPress.
Básicamente porque convertirá automáticamente todas tus imágenes en WebP y las usará si el navegador desde el que se navega es compatible.
¿Sencillo verdad?
Después en Ajustes – Imagify:
-
- Ve al apartado optimización.
- Activa la casilla Crear versiones WebP de las imágenes: Creará de todas las que subas. Ojo, si tienes imágenes sin esta versión, debajo saldrá un botón para crear las que no estén.
Si te da un error de que hay imágenes sin backup y no se crean, copia las imágenes de uploads dentro de la carpeta backup, pero sin sobreescribir las que hay, porque son las originales y ya te dejará hacerlo.
- Activa la casilla Usar las etiquetas <picture> tags (preferiblemente): Esto sustituirá las imágenes del tema en los navegadores compatibles.
- Ojo con Si utilizas una CDN, especifica la URL: Si usas un CDN con WP Rocket, no tienes que hacer nada. Pero si usas un CDN con otro plugin, aquí debes poner la URL del CDN para que funcionen.
- Vacía la caché del plugin, hosting y CDN.
Imágenes WebP con CDN
También puedes activar imágenes WebP con el CDN que uses, pero personalmente no te lo recomiendo por varios motivos:
- Es de pago: Tanto con Cloudflare, como con BunnyCDN, deberás pagar para usarlo.
- No es nativo: La idea es tener una versión WebP en nuestro servidor. Sí, consume más espacio, pero es más seguro.
- No dependes de otro servicio: Podrás cambiar de CDN a otro, teniendo o no esta tecnología.
Como puedes ver, todo son ventajas.
Imágenes no compatibles con WebP
No es que haya imágenes no compatibles con WebP, es que hay imágenes que no se sustituirán por estas versiones.
Serán todas aquellas cargadas mediante CSS o JS como por ejemplo imágenes de fondo, sliders, CTAs, etc.
Podrías cambiar a mano estas imágenes por su versión WebP, pero no se verían en los navegadores no compatibles con este formato.
Otro problema de estas imágenes, es que no se les puede aplicar Lazy Load, así que doble problema que por ahora no tiene solución.
Por eso recomiendo usar el mínimo de imágenes de fondo, sliders, etc.
Cómo comprobar si WebP funciona
Una vez configurado, toca comprobar si WebP funciona y vas a ver lo sencillo que es.
Es tan sencillo como analizar tu web con SpeedWP, puesto que este usa Chrome para los análisis y ver en el gráfico de carga, que las imágenes se han sustituido.
Otra opción es ver el código fuente en el navegador con CTRL + U y buscar .webp.
Este código cargará la imagen WebP si el navegador es compatible y la normal si no lo es.
Por cierto, los tamaños de imágenes son porque mi tema Astra carga un tamaño de imagen, según el tamaño de pantalla, lo que acelera mucho más la web.
Conclusión
¿Has visto lo sencillo que es usar imágenes WebP en WordPress?
