WebP es un formato de imagen alternativo para compresión sin pérdida y con pérdida. El formato de imagen fue desarrollado por Google y On2 para abordar el uso creciente de imágenes en sitios web, que se había convertido en un cuello de botella para los tiempos de carga.
WebP es un formato para imágenes estáticas no animadas, basado en la base técnica de VP8 del formato de video WebM, con VP9 ya a la vista. Sin embargo, la compatibilidad de VP9 en la edición de video aún no está ampliamente extendida. Al usar la línea de comandos, WebM con VP9 se puede usar sin restricciones, como descubrimos en varias aplicaciones en 2018. Queda por ver hasta qué punto los beneficios de VP9 influirán en el desarrollo posterior del formato de imagen WebP.
Configuración del servidor web
Para mostrar imágenes WebP, el servidor web debe estar configurado adecuadamente, idealmente con una opción de respaldo. Si una imagen está disponible en formato WebP, se cargará como el formato de imagen preferido por el navegador con la configuración adecuada. Si no hay una versión WebP disponible, se mostrará la imagen JPG o PNG en su lugar.
Para sitios web con pocas imágenes, las imágenes adicionales en formato WebP pueden generarse localmente y luego cargarse por FTP. Sin embargo, para tiendas en línea con miles de imágenes, que probablemente también están organizadas en carpetas, esto no es práctico. En este caso, se puede crear un script de shell para generar imágenes existentes localmente o directamente en el servidor.
Para un mejor control de los resultados, se recomienda ejecutar primero el script de shell localmente en una serie de imágenes.
Compatibilidad del navegador
Hasta finales de 2018, Mozilla no ofreció soporte para Firefox porque WebP, en opinión de los desarrolladores de Mozilla, no ofrecía ventajas sobre JPG, mientras que Opera y Chrome ya eran compatibles con WebP desde hacía años.
Desde enero de 2019, Mozilla Firefox versión 65 o superior es compatible con el formato de imagen WebP.
Qué navegadores son compatibles con WebP
Para evitar la falta de compatibilidad en navegadores no compatibles, es recomendable configurar una opción de respaldo a un formato de imagen alternativo. Si se usa un navegador no compatible, el navegador cargará la imagen adicional en un formato compatible como JPG o PNG. Es fácil comprobar si el navegador cargó el formato deseado.
Las pruebas deben demostrar si WebP ofrece realmente una alternativa genuina frente a JPG o PNG.
Imagen de prueba sintética en escala de grises con patrón de gradiente lineal
Incluso con la calidad más alta, se notan diferencias entre PNG y WebP. WebP tiene un tamaño de archivo más pequeño, pero ya muestra una ligera pixelación, lo que entra en conflicto con la denominación “compresión sin pérdida” (al 100%).
Compresión con pérdida de WebP - Comparación del tamaño del archivo
Para minimizar el tamaño de la imagen lo más posible, la imagen de prueba se comprime con WebP con pérdida. Mientras que las miniaturas más pequeñas parecen casi idénticas a simple vista, con la imagen más grande se nota una pixelación clara.
El resultado para este motivo es impresionante tanto en calidad como en tamaño de archivo. Es evidente que, al igual que JPG, hay un ahorro exponencial de datos con la resolución creciente. Cuanto más grande es la imagen, más efectivo es el algoritmo. Aunque la relación de ahorro de WebP en la prueba es ligeramente peor que la de JPG, debe tenerse en cuenta que el tamaño de archivo absoluto de las imágenes WebP es solo una fracción.
Cuanto más complejo es la imagen y cuantas más estructuras finas y gradientes de color tiene, peor es el resultado visual con configuraciones de calidad más bajas.
Dependiendo del motivo, la calidad visual de WebP puede, en algunos casos, ser incluso peor que la de JPG con el mismo tamaño de archivo.
Detalles con WebP
WebP tiene dificultades con imágenes altamente detalladas. Ya sean poros de la piel, un bosque de invierno o la representación del viento que golpea la superficie del agua, estas plantean altas exigencias al códec y rápidamente exponen los límites de WebP. Mientras que solo algunos detalles pueden faltar en la miniatura (por ejemplo, piel más suave) y generalmente solo son notables al observar de cerca, las diferencias se vuelven mucho más obvias en la vista completa.
En la prueba con pérdida, WebP se comporta bien. En particular, para tamaños de miniaturas, el resultado es convincente. El tamaño del archivo puede reducirse drásticamente. Sin embargo, en la vista completa, los artefactos de compresión y las diferencias en los detalles se vuelven rápidamente visibles.
Para mostrar imágenes realmente nítidas, WebP no es ideal para imágenes de alta resolución a este nivel de calidad.
Si las expectativas se pueden cumplir con configuraciones de calidad más altas, siempre debe evaluarse caso por caso. En algunos casos, las configuraciones de calidad deben establecerse tan altas que el tamaño de archivo WebP supera al de JPG.
Imagen de prueba real para verificar la fidelidad del color
Con una imagen de prueba mediocre tomada con un teléfono inteligente bajo condiciones de luz difíciles y que tiene un alto contenido de gris, WebP rápidamente se ve sobrepasado.
Con el mismo tamaño de archivo, la imagen en formato WebP muestra un tinte rojo notable. Con configuraciones de calidad más bajas, además del aumento esperado de artefactos de compresión, aparecen errores de color notables. El tinte rojo se intensifica a lo largo de toda la imagen. Algunas áreas también muestran un tinte verde que se hace más notorio con configuraciones de calidad más bajas. Tales ejemplos muestran por qué las imágenes existentes en PNG o JPG no deben convertirse automáticamente a través de procesos por lotes o plugins (por ejemplo, para WordPress).
Conclusión
WebP es un formato de imagen poderoso que puede ofrecer ventajas significativas en manos de usuarios experimentados, pero debe considerarse como un complemento y no como un reemplazo de PNG o JPG.