Imágenes WebP: Qué son, Ventajas y Herramientas — Koomori
Koomori - Agencia SEO en Madrid
Imágenes WebP: Qué son, Ventajas y Herramientas

Imágenes WebP: Qué son, Ventajas y Herramientas

Formatos de imágenes de próxima generación: WebP, comparativa con AVIF, JPEG 2000 y JPEG XR, cómo usarlos en Web y herramientas para convertir las imágenes.

 

Qué son los formatos de imágenes de próxima generación

Tras la incursión de los Core Web Vitals, el peso o el tiempo de carga de las webs ha cobrado una especial relevancia. Más allá de tener una web “user-frendly”, Google está empezando a castigar (bajándoles de puesto) a aquellas webs con malas puntuaciones en estas métricas.

Si has entrado en Pagespeed Insights y te ha saltado el aviso o consejo “publica imágenes con formatos de próxima generación”, habrás visto que te da 3 opciones: JPEG 2000, JPEG XR y WebP, o 2 opciones: WebP o AVIF, por tener un sistema de compresión de imagen mucho mayor que el de JPG o PNG, lo que hace que las imágenes pesen mucho menos y reduzca en X segundos el tiempo de carga de la página.

 

Comparativa JPEG 2000, JPEG XR, AVIF y WebP

¿Cómo saber cuál elegir? Esto es más o menos fácil (relativamente), ya que son tus usuarios lo que te lo tienen que decir.

Estos formatos, al ser “nuevos” (igual ya tienen 20 años pero hay veces que las cosas van despacio), pueden dar incompatibilidades con los diferentes navegadores, por lo que es importante saber con qué navegador ven tus usuarios tu web antes de decidirse.

Así, el formato JPEG 2000 sólo es compatible con el navegador Safari, el JPEG XR es admitido en Internet Explorer y Edge, y WebP es compatible con todos los navegadores modernos, con excepciones de los ya obsoletos Internet Explorer y Blackberry Browser. Hasta hace poco WebP no era soportado por los navegadores Safari, pero eso ya está solucionado, ya que este mismo año 2021 con la última actualización de macOS Big Sur, Safari ha admitido este formato. El nuevo formato AVIF actualmente solo es compatible con Google Chrome para escritorio y Android, el navegador nativo de Android y Opera.

En cuanto al tamaño de las imágenes, tanto JPEG 2000 como JPEG XR tienen unas capacidades de compresión bastante menores que WebP y AVIF. El formato WebP logra una reducción del tamaño del archivo del 25% al ​​34% en comparación con los archivos JPEG de calidad similar, y en el modo de compresión sin pérdida, logra una reducción del 26% en el tamaño del archivo en comparación con el nivel máximo de compresión de PNG. AVIF gana en este ámbito con mucha diferencia, se pueden conseguir reducciones del peso de la imagen de hasta el 50% frente a JPG sin perder calidad.

 

El formato WebP en detalle

En el año 2010, Google crea WebP, un formato gráfico en forma de contenedor que soporta una compresión muy alta con pérdida o sin pérdida. Este formato soporta tanto imágenes a color estáticas, sustituyendo así al JPEG o JPG, como imágenes con transparencia, como el PNG, o incluso imágenes en movimiento, comiéndose así al GIF.

Aunque su gran ventaja es la capacidad de compresión que tiene, ya que puede generar archivos mucho más pequeños que cualquiera de los otros formatos, incluso sin tener pérdida de calidad.

Además, desde julio de 2021, con la actualización 5.8 “Tatum”, WordPress ha empezado a soportar los formatos de imagen en WebP, aunque sigue sin soportar nativamente los SVGs, por lo que podemos copiar el siguiente código en functions.php de nuestro tema hijo para asegurarnos que funcionen todos los formatos nuevos (WebP, SVG y AVIF):


     /* Añadir otros formatos de imagen */
     function koomori_img_new( $mime_types ) {
          $mime_types['avif'] = 'image/avif';
          $mime_types['webp'] = 'image/webp';
          $mime_types['svg'] = 'image/svg+xml';
          return $mime_types;
     }
     add_filter( 'upload_mimes', 'koomori_img_new', 1, 1 );

 

Google está en proceso de desarrollar el formato WebP 2, con el objetivo de optimizar más las imágenes intentando igualar a la compresión de AVIF, pero aún está en fase experimental y, como Google advierte, “el formato WebP 2 es inestable y lo puedes usar bajo tu propia responsabilidad”. Puedes leer más acerca de este proyecto aquí.

En cuanto a su comparativa con AVIF, está claro que éste es un mejor formato al crear imágenes menos pesadas, pero por su incompatibilidad con muchos navegadores y por no tener opción de vista previa, recomendamos no utilizarlo nunca solo, al menos hasta que no se extienda su uso y empiece a ser un estándar.

Para asegurarnos de que nuestras imágenes se ven siempre bien y tienen el menor peso posible, sólo tenemos que decirle al HTML la jerarquía que queremos tener, 1º que nos saque la imagen en AVIF, 2º si ésta no se ve que enseñe la WebP, y 3º si esta última no se viera (en navegadores no actualizados, por ejemplo), que saque la imagen original en JPG, PNG si tiene transparencias o GIF si tiene movimiento. Con el siguiente código podemos hacer esto fácilmente, sustituyendo las rutas por las de tus imágenes.


     <picture>
         <source srcset="/img/imagen.avif" type="image/avif" />
         <source srcset="/img/imagen.webp" type="image/webp" />
         <img src="/imgs/imagen.jpg" alt="Koomori super fast" />
     </picture>

 

¿Webp es la tumba del GIF, JPG y PNG?

Aunque WebP se está convirtiendo en un estándar en webs, no consideramos que los formatos clásicos estén obsoletos, ya que de momento es la única forma de trabajar con las imágenes en el diseño o en la fotografía y que sean aceptadas por todas las herramientas y visualizadores.

De hecho, el único formato clásico que en ocasiones aventaja al WebP es el PNG-8, cuando tenemos imágenes con muy pocos colores. El PNG-8 es un formato en el que usamos 8 bits por píxel de color indexado, esto quiere decir que tendremos una paleta de 256 colores escogidos entre los más de 16 millones disponibles para representar la imagen. Si cuando exportamos el archivo recortamos aún más esta paleta, podemos conseguir un peso menor respecto a la versión en WebP, que siempre trabaja como mínimo con 24 bits. AVIF también trabaja como mínimo con 24bits, pero consigue una compresión mucho mayor que los PNG-8.

 

WebP, AVIF y SVG

WebP y AVIF son formatos para imágenes en píxeles, al contrario que SVG, que es un formato vectorial, por lo que no es afectada la imagen por el tamaño de ésta al no tener píxeles. Para este tipo de imágenes en vectores, como los Logotipos, SVG normalmente ganará al resto con un menor peso y mayor calidad, aunque al ser el único que se guarda en modo texto debemos tener en cuenta que también es el único formato de imagen al que se le debe aplicar la compresión Brotli q11 o Gzip a nivel de servidor.

 

Herramientas para usar y convertir WebP y AVIF

Adobe Photoshop es el rey de edición de fotografía, eso lo tenemos todos claro. Pero en el ámbito web, está excesivamente atrasado con respecto a otros programas como Gimp, que te permiten exportaciones en formatos nuevos, o con herramientas en línea como Pixlr, que te deja hacer ediciones básicas de imágenes suficientes para diseño web y exportarlas en WebP controlando la calidad, o como la herramienta de Google Squoosh, que te permite convertir las imágenes a Webp, Webp 2 y AVIF, controlando todos los aspectos de visualización y calidad y viendo su comparativa con la imagen original.

 

Conclusiones

WebP es el mejor formato de imagen para diseño web en 2021, por su gran capacidad de compresión de imágenes, visualización previa y calidad, además de su soporte en los navegadores y CMS modernos, aunque debemos estar atentos al formato AVIF y su evolución, ya que puede que se coma al WebP en unos años.

Si estás teniendo problemas para mejorar el tiempo de carga de tu web, tenemos servicios de SEO especializados en WPO o Web Performance Optimization (optimización del tiempo de carga). Podemos ayudarte.

Escrito con por:

Mayte Moreno
Mayte Moreno - Digital Design Manager en Koomori.com

Especialista en Imagen Corporativa Digital y Diseño Web. Apasionada del diseño desde shiquitita. Todo lo que toco lo hago más bonito. Me encantan los animales, la naturaleza y las IPAs.