Servir Imágenes WEBP en WordPress

En el pasado he escrito sobre como optimizar imagenes en WordPress y esto se puede hacer de dos maneras.

  • La primera es optimizar las imágenes antes de subirlas a la librería de WordPress y ahorrarte el uso de un plugin.
  • Lo segundo es por medio de plugins que permitan la optimización de las fotos que estan en tu librería.

Además de esas formas de optimización, la opcioń de servir imágenes WEBP es otra de las mejoras que puedes realizar.

Según el blog de Kinsta, una imagen representa alrededor del 50% del peso de una página por lo que toda mejora en este tema contribuye al mejor rendimiento de esta.

¿Qué es una Imagen WEBP?

WebP es un formato de imagen (al igual que png y jpg), desarrollado por Google.

Las imágenes en formato WebP (.webp) son generalmente mucho más livianas, lo que hace que los sitios web sean más rápidos y que usen menos ancho de banda.

Una imagen webp pesa entre un 25% a 35% menos que las imágenes en formato jpg y png.

¿Problemas con las Imágenes WEBP?

El problema con la implementación de las imágenes WEBP es que algunos navegadores y dispositivos no sirven imágenes webp.

Estos son los navegadores que usan esa tecnologia.

  • Chrome
  • Firefox
  • Edge
  • Opera

Safari es uno de los navegadores que no ha dado ese paso en la versión móvil y la de escritorio.

Por ese motivo la imagen debe ser despegada en formato png o jpg para unos y webp para otros.

¿Cómo Servir Imágenes WEBP?

Hay varias formas de servir imágenes webp, las maneras más fáciles de hacer esto sin jugar con líneas de código es por medio de un plugin.

Veamos algunos de estos:

#1 Imagify

Imagify es un plugin para wordpress desarrollado por el mismo equipo que esta detrás de WP Rocket, uno de los mejores plugins de cache para wordpress.

Cada vez que optimizas una imagen de tu librería, una versioń de la imagen en formato webp es creada y es desplegada en los navegadores y dispositivos que tienen esta opcioń.

#2 EWWW Image Optimizer

Sobre el soporte de imágenes en formato WEBP, Ewww Image optimizer dice lo siguiente:

Las imágenes se comprimen automáticamente, se escalan para adaptarse al tamaño de la página y del dispositivo, se cargan lentamente y se convierten al formato WebP de próxima generación.

Plugins – EWWW Image Optimizer

#3 Simple WebP

Un plugin muy sencillo que permite servir imágenes en formato webp es Simple WEBP por Jill Royer,

Al parecer el plugin no es compatible con la versión 7.4 de PHP por lo que no he podido probarlo con uno de mis sitios.

#4 SG Optimizer

El plugin para optimizar wordpress que solo puede ser usado con SiteGround tiene la opción de servir imágenes en formato WEBP.

#5 Optimole

Optimole es un plugin que exclusivamente fue creado para optimizar tus imágenes. El plugin requiere que crees una cuenta gratuita desde el escritorio de WordPress para recibir una clave API.

La versión gratuita tiene una cuota de 5 mil vistas por mes.

Optimole sirve las imágenes desde sus servidores por lo que este no hace modificaciones a las imágenes de tu sitio.

Los planes de Optimole no son tan económicos, son más caro el servicio de hosting que uso.

#6 WEBP Express

WebP Express es un plugin creado por Bjørn Rosell. WebP es un plugin gratuito que te permite servir imágenes WEBP en tu sitio.

Cuando instalas el plugin, debes de configurar el plugin e iniciar el proceso de conversión.

Yo no hice mayores modificaciones a la configuración del plugin además de guardar la configuración, la conversión de las imágenes.

El proceso de conversión muestra la disminución de pasar de un formato como jpg o png a WEBP

¿Debería usar Imágenes WEBP?

Creo que la ansiedad de muchos en cuanto a aplicar consejos se debe a pensar que la solución del vecino debe tambien ser mi solución.

Yo uso una web sencilla y mi web sin anuncio se coloca entre 98 y 100 en los tests de velocidad en GTMetrix y Google Page Insights.

Si yo quisiera implementar WEBP no sería porque crea que tengo un pésimo hosting o un pésimo tema si no con el fin de reducir el impacto que tienen los anuncios en la velocidad de una manera indirecta.

Una opinión maś profesional, la encontré en el blog de WPJohnny. En una de sus entradas, él explica que la implementación de imágenes en el formato WEBP implica:

  • Crear versiones WebP implica que crear versiones WebP de las versiones existentes por lo que tendrías dos juegos de imágenes por lo que vas a tener el doble de imágenes.
  • Las imágenes ya optimizadas no tienen un impacto negativo en tu sitio por lo que no esperes que todos tus problemas se soluciones por reducir el peso de una imagen. Yo he tenido un resultado de 100 con imágenes optimizadas en mis publicaciones por lo que creo Johnny tiene la razón.
  • Johnny tambien menciona que los blogs que usan muchas imágenes son quienes deberían preocuparse por la implementación de este formato de nueva generación

Este es un resultado de GTMetrix en una web que tiene estas mismas características:

Conclusiones

Todas los sitios web no son iguales por lo que si un sitio necesita desesperadamente de algo, eso no significa que el tuyo lo necesite.

Eventualmente el formato webp estará disponible y creo que ese será el momento indicado para dar el salto a ese formato de la nueva generación.