Imágenes WebP: cómo ahorrar valiosos kilobytes

WebP es un formato de imagen desarrollado por Google en 2010. Fue diseñado como un reemplazo para los formatos JPEG, PNG e incluso GIF animado.

El uso del formato WebP puede mejorar significativamente el rendimiento de tu sitio web sin sacrificar la calidad de las imágenes. Por eso recomendamos a todos nuestros clientes que adopten WebP como una apuesta segura.

El formato WebP admite prácticamente todo lo que deseamos de las imágenes en la web:

• Compresión con pérdida (como JPG) y sin pérdida (como PNG).
• Transparencia y semitransparencia (canal alfa como en PNG).
• Animaciones similares a los GIF.

WebP es tan exitoso en la optimización del tamaño de los datos porque utiliza la tecnología VP8 de los códecs de video. El resultado es una compresión mucho más eficiente que en formatos más antiguos como JPG, PNG o GIF.

WebP puede proporcionarte una reducción tan notable en el tamaño de los datos de las imágenes. Fuente: reporte Técnico en monitoring PLUS.

¿Por qué usar WebP?#

El uso de imágenes en formato WebP mejora la velocidad de las páginas web:

• Carga más rápida
  Las imágenes WebP son generalmente 25-34 % más pequeñas en tamaño de datos que JPEG o PNG. Esto mejora la velocidad de carga y, por ende, la métrica LCP.
• Ahorro de ancho de banda
  Especialmente apreciado por los usuarios móviles con conexiones más lentas.
• Compatibilidad
  WebP es compatible con todos los navegadores principales, incluyendo Safari (a partir de la versión 14). No se necesitan soluciones alternativas.

Compatibilidad del formato WebP según el sitio CanIUse. Internet Explorer ya está obsoleto, afortunadamente.

¿Cómo implementar WebP en tu sitio web?#

La solución ideal es automatizar el proceso e integrar imágenes correctamente comprimidas en la web. Existen varias formas de insertar imágenes en formato WebP en tu sitio:

• Conversiones automáticas a WebP
  Utiliza herramientas como cwebp, ImageMagick y bibliotecas similares para generar imágenes en tu propio servidor. Después de subir una imagen a través de la administración o importarla, se comprime al formato y calidad adecuados. La compresión también puede realizarse bajo demanda. La imagen se crea con la primera solicitud del navegador, aunque esto será más lento.
• Activa el soporte de formato WebP en la nube
  La mayoría de las soluciones en la nube actuales, como Cloudflare, admiten la conversión al formato WebP. Muchas también manejan el formato más reciente AVIF, aunque aún no tiene un soporte tan amplio. La ventaja es que no necesitas preocuparte por el espacio en tu servidor y la nube selecciona el formato más óptimo por ti.
• Conversión manual a WebP
  Para sitios web estáticos más pequeños, comprime imágenes en formato WebP manualmente, utilizando herramientas como Squoosh o simplemente con Photoshop.

Nuestra experiencia: ¿cómo configurar la calidad?#

Configurar los parámetros de calidad de compresión puede ser un desafío, por eso compartimos nuestra experiencia en asesoría de velocidad web.

La configuración de los parámetros de compresión puede variar según el uso de las imágenes en el sitio. Veamos algunos ejemplos:

• En miniaturas de productos en listas de categorías en tiendas online, suele ser suficiente una calidad del 70-80 %.
• Si vendes cámaras y deseas mostrar la verdadera calidad de las fotos, es recomendable configurar la calidad en formato WebP al 85-90 %.

Siempre recomendamos dedicar tiempo a configurar la compresión. Es necesario realizar al menos dos pasos:

• Pruebas
  Toma varias fotos típicas de tu sitio. Experimenta con herramientas como TinyPNG o Squoosh y observa la relación entre calidad y tamaño del archivo.
• Elección del grado óptimo de calidad
  Se recomienda una calidad del 70 - 90 % para compresión con pérdida. Las imágenes sin pérdida son adecuadas para gráficos con bordes definidos (anteriormente utilizados como PNG) o fotografías detalladas.

Un consejo final: Siempre monitoriza el tamaño de los datos de las imágenes. Nuestra experiencia dice que incluso cambiar una sola imagen, como en la página de inicio de un sitio web, puede causar fluctuaciones poco agradables en la velocidad del sitio:

Detección oportuna de un problema causado por la inserción de una imagen de 4 MB en la página de inicio del sitio web. Fuente: reporte Técnico en monitoring PLUS.

Aquí encontrarás más consejos para la optimización de imágenes en la web. Si ya usas WebP y deseas llevar la optimización un paso más allá, consulta el artículo sobre el formato AVIF, que ofrece una compresión aún mejor.