Webp es un formato de imagen de código abierto y licencia libre BSD. Está siendo desarrollado y potenciado por Google tras la compra de On2 Technologies. Promete ser una navaja suiza en cuanto a imagen se refiere, permitiendo compresión con pérdida, sin pérdida, transparencias e incluso animaciones.

Hace tiempo escribí sobre los formatos de imagen más utilizados en la web. Se me quedó traspapelado el tema de los formatos alternativos. Unos más nuevos que otros, suponen ciertas mejoras, pero su uso es marginal y el soporte que ofrecen los navegadores limitado.

En una página web generalmente no hay una única imagen, por lo que una pequeña reducción en cada una de las imágenes que contiene puede convertirse en un importante ahorro de datos y un incremento del rendimiento.

WebP es bastante joven pero viene pisando fuerte y cada día son más los navegadores que le dan la importancia que tiene.

Soporte de webp en navegadores

Las versiones más recientes de los navegadores más usados soportan este formato, lo que, en el momento de escribir estas líneas, lo acerca al 79% de los usuarios. Además, Safari parece estar haciendo pruebas para añadir soporte nativo próximamente. Puedes manteterte al tanto del soporte en caniuse.com.

Será bueno disponer de un plan b, con el fin de no dejar sin imagen a aquellos usuarios de navegadores que no soportan este formato. Para ello, puedes encontrar algunas buenas referencias si quieres empezar a usar webp sin abandonar a ninguno de tus usuarios. A continuación te dejo un par de ellos.

WepP with fallback

How can I detect browser support for webp

Comparación con otros formatos de imagen

Webp parece conseguir (aún no lo he probado lo suficiente como para asegurarlo) ficheros más pequeños para una calidad de imagen semejante en comparación con los otros formatos muy extendidos en web: PNG, JPG y GIF. O dicho de otro modo, consigue mejor calidad para el mismo tamaño de fichero.

¿En todos los casos? No. Aunque esto es algo que ocurre igualmente con cualquier otro formato. Un caso puede ser porque partas de una imagen al 80% de calidad y la guardes al 90%, el fichero será el equivalente a una calidad del 90%, pero visualmente, la calidad será el 90% del 80% de origen; no puedes recuperar la información de imagen perdida o distorsionada en una compresión anterior.

webp vs jpg

Ya en 2013, Andrew Munsell comparó jpg con webp y los resultados codificando imágenes grandes con varios niveles de calidad son bastante claros. En comparación con imágenes JPG, webp consigue reducciones de tamaño importantes.

webp vs png

Comparado con el formato PNG, comparte la posibilidad de la compresión sin pérdida y la capa de transparencia.

En el mismo blog, Andrew también hace la comparación codificando imágenes en PNG y webp y el resultado vuelve a ser aplastante.

webp vs gif

En este caso, a falta de realizar mis propios experimentos, lo que he encontrado es menos claro en según qué casos. Desde importantes diferencias de tamaño que le dan ventaja sobre gif en https://corydowdy.com/blog/apng-vs-webp-vs-gif, hasta, en http://littlesvr.ca/apng/gif_apng_webp.html, en el que webp no parece que sea tan eficiente.

Impresión de imágenes webp

Por sus características webp no es un buen formato si lo necesitas para impresión. Emplea dos espacios de color RGBA o Y’CrCb, siempre con submuestreo 4:2:0 (YUV420); para los modos de compresión sin pérdida y con pérdida respectivamente. Estos espacios de color son buenos para la representación en pantallas (RGB) o para la optimización del tamaño del fichero (YUV) pero no para acabados en impresión profesional.

Y hasta aquí por hoy. Este tema da para rato así que seguiré investigándolo: cómo trabajar con WebP, cómo usarlo con WordPress… Un abrazo.