feb. 15, 2024

Por Alberto Méndez

El nuevo formato de imagen, WebP

Historia y evolución del formato

El formato WebP fue creado por Google con el objetivo de acelerar los tiempos de carga en internet al reducir significativamente el tamaño de las fotos y gráficos en línea sin sacrificar la calidad. Desarrollado inicialmente en 2010 por On2 Technologies, una empresa adquirida por Google, WebP representa un avance significativo sobre formatos antiguos como JPEG, PNG, y GIF gracias a su capacidad para ofrecer imágenes de alta calidad en tamaños de archivo mucho menores.

Combina características de compresión con y sin pérdida, y ha evolucionado con el tiempo para adaptarse a las tendencias digitales emergentes, agregando soporte para animación y transparencia en 2011. Este formato utiliza la tecnología de codificación intra-frame del formato de video VP8 y se almacena en un contenedor basado en el Resource Interchange File Format (RIFF), lo que lo hace extremadamente eficiente tanto en términos de calidad de imagen como de tamaño de archivo. Por ejemplo, las imágenes WebP con compresión sin pérdida son hasta un 26% más pequeñas que las PNG equivalentes, y las imágenes WebP con compresión con pérdida pueden ser hasta un 34% más pequeñas que las JPEG comparables a un índice de calidad SSIM similar.

Además, el formato WebP es ampliamente compatible con la mayoría de los navegadores web modernos, incluidos Chrome, Safari, Opera, Microsoft Edge y Firefox, lo que facilita su integración en diversas plataformas sin problemas de compatibilidad. Sin embargo, es importante tener en cuenta que algunas versiones antiguas de navegadores y Internet Explorer pueden no admitir WebP.

Una de las ventajas clave de WebP es su flexibilidad, ya que admite tanto la compresión con pérdida como sin pérdida en una sola imagen, ofreciendo así una alternativa superior a los formatos GIF para imágenes animadas, proporcionando colores de 24 bits con transparencia y la posibilidad de combinar cuadros con compresión con y sin pérdida en la misma animación.

Entre los beneficios destacados de usar imágenes WebP en la construcción de sitios web se incluyen:

• Rendimiento mejorado: Las imágenes WebP son más ligeras que los formatos JPEG y PNG, lo que permite que las páginas con imágenes WebP se carguen más rápido.
• Ahorro de ancho de banda: Libera ancho de banda y permite a los sitios web ofrecer una experiencia de medios más rica.
• Optimización del SEO: Google recomienda explícitamente el uso de formatos de imagen modernos como WebP como parte de sus recomendaciones de Core Web Vitals.
• Calidad de imagen superior: Con WebP, no es necesario sacrificar la calidad de la imagen por una carga más rápida.
• Soporte para características de imagen adicionales: A diferencia de algunos otros formatos, WebP tiene soporte para transparencia y animación.

Las desventajas del formato WebP incluyen limitaciones en cuanto a soporte de navegadores y posibles compromisos en la calidad de la imagen en ciertas circunstancias. Esto significa que se puede requerir trabajo adicional para proporcionar imágenes alternativas en formatos más tradicionales para garantizar la compatibilidad en todos los navegadores. Además, aunque WebP permite una compresión de imágenes muy eficiente, en algunos casos, la compresión puede llevar a una pérdida de calidad de la imagen, especialmente cuando se utilizan configuraciones de compresión agresivas.

Cómo convertir imágenes a WebP

En línea

Existen varias herramientas en línea que te permiten convertir imágenes a WebP de forma gratuita y sin necesidad de instalar software adicional. Aquí algunos ejemplos:

• CloudConvert:

  • Visita CloudConvert.
  • Selecciona el tipo de archivo de origen y elige WebP como formato de destino.
  • Sube tu imagen y haz clic en “Convertir” para iniciar el proceso.

• EZGIF:

  • Accede a EZGIF.
  • Selecciona la pestaña de “WebP”.
  • Después elige el formato de la imagen de origen.
  • Sube la imagen para convertir.

En tu equipo

Hay que tener en cuenta que muchos de estos servicios guardan las imágenes en sus servidores por lo que puede ser un problema si la imagen a convertir es sensible o privada, como es común con algunos recursos de determinados proyectos. Por lo que es recomendable utilizar la herramienta de conversión de imágenes WebP de Google, que es gratuita y podemos utilizar directamente en nuestro equipo sin necesidad de recurrir a servicios de terceros.

Se trata de una herramienta de línea de comandos llamada cwebp, disponible para Linux, Windows y macOS, puedes obtenerla en su página de descargas o instalarlo de los repositorios oficiales si estamos en Ubuntu con sudo apt install webp. Utilizarla es tan sencillo como abrir una terminal y ejecutar el siguiente comando:

  cwebp -q 80 imagen.jpg -o imagen.webp
  

Donde -q es el nivel de calidad de la imagen, que va de 0 a 100 aunque puede omitirse para usar el valor por defecto (75), imagen.jpg es el nombre de la imagen que queremos convertir y imagen.webp es el nombre del archivo de salida. También puede usarse la opción -lossless para convertir la imagen sin pérdida de calidad. Otra de las herramientas útiles que vienen en el paquete es la que nos permite convertir GIF a WebP, gif2webp, que se utiliza de forma similar.

  gif2webp -q 80 imagen.gif -o imagen.webp
  

Cómo usar imágenes WebP en tu sitio web

La forma más directa de usar imágenes WebP en tu sitio web es mediante la etiqueta , similar a como lo harías con cualquier otro formato de imagen. Sin embargo, es importante tener en cuenta el soporte del navegador. Aquí te muestro cómo:

    <img src="imagen.webp" alt="Descripción de la imagen">
    

Este método es sencillo y directo, pero no ofrece una solución de respaldo para navegadores que no soportan WebP.

Usando la etiqueta picture para compatibilidad

Aunque WebP está ampliamente soportado en la actualidad por gran cantidad de navegadores, es práctica recomendable incluir un modo de fallback para aquellos que no lo soporten. Esto se puede hacer con la etiqueta picture de HTML, que permite incluir varias fuentes de imagen y el navegador elegirá la que mejor se adapte a sus capacidades. Por ejemplo, para incluir una imagen WebP y una JPEG como fallback:

  <picture>
      <source srcset="imagen.webp" type="image/webp">
      <source srcset="imagen.jpg" type="image/jpeg">
      <img src="imagen.jpg" alt="Descripción de la imagen">
  </picture>
    

En este ejemplo, si el navegador soporta WebP, cargará imagen.webp, sino, lo intentará con la siguiente fuente, imagen.jpg. Si ninguna fuente es compatible, se mostrará el contenido de la etiqueta como respaldo.

Conclusión

El formato WebP es una excelente opción para optimizar el rendimiento de tu sitio web, reducir el uso de ancho de banda y mejorar la experiencia del usuario. Aunque no todos los navegadores soportan WebP, puedes utilizar la etiqueta para asegurarte de que tu sitio web sea compatible con todos los navegadores. Además, la conversión de imágenes a WebP es sencilla y gratuita, por lo que no hay razón para no aprovechar sus ventajas. Empieza a utilizar el formato de imágenes para la web del futuro hoy mismo y ¡Happy Coding!