Krypton Solid

Usando el formato de imagen WebP hoy – Smashing Magazine

Usando el formato de imagen WebP hoy – Smashing Magazine

Dicen que una imagen vale más que mil palabras. ¡Pero en línea, una imagen puede valer mil kilobytes o más! HTTP Archive muestra que las imágenes representan el 64% del tamaño total de una página web de media. Dado esto, la optimización de la imagen es clave, especialmente considerando que muchos usuarios abandonarán una solicitud si no se carga en unos pocos segundos. El problema con la optimización de imágenes es que queremos mantener los tamaños de archivo pequeños sin sacrificar la calidad. Los intentos anteriores de crear tipos de archivos que optimicen las imágenes mejor que los formatos estándar JPEG, PNG y GIF no han tenido éxito.

Dicen que una imagen vale más que mil palabras. ¡Pero en línea, una imagen puede valer mil kilobytes o más! HTTP Archive muestra que las imágenes representan el 64% del tamaño total de una página web de media. Dado esto, la optimización de la imagen es clave, especialmente considerando que muchos usuarios abandonarán una solicitud si no se carga en unos pocos segundos.

El problema con la optimización de imágenes es que queremos mantener los tamaños de archivo pequeños sin sacrificar la calidad. Los intentos anteriores de crear tipos de archivos que optimicen las imágenes mejor que los formatos estándar JPEG, PNG y GIF no han tenido éxito.

Otras lecturas en SmashingMag:

Ingrese WebP

WebP es un formato de imagen que se creó en 2010 y actualmente está siendo desarrollado por Google. Este formato ofrece una compresión sin pérdida y con pérdida de imágenes. Varios grandes nombres están haciendo campaña para WebP, sobre todo Google, Facebook y eBay.

En nuestra empresa, siempre experimentamos con técnicas que mejoran el rendimiento del sitio web. Entonces, realizamos algunas pruebas A / B para comprender el impacto de WebP en la calidad de la imagen y la mejor manera de implementarlo en los proyectos de nuestros clientes.

Una de las principales razones por las que comenzamos a implementar WebP es la tamaño de archivo más pequeño. Según Google:

  • Los archivos de imagen sin pérdida de WebP son un 26% más pequeños que los PNG.
  • Los archivos de imágenes con pérdida de WebP son entre un 25% y un 34% más pequeños que las imágenes JPEG con un índice de similitud estructural equivalente (SSIM).
  • WebP admite transparencia sin pérdidas (también conocida como canal alfa), con solo un 22% más de bytes.

Nuestras pruebas han descubierto los pros y los contras del formato de imagen WebP:

Pros Contras
Tamaño de archivo más pequeño Soporte de navegador débil
Algoritmo de compresión mejorado El artefacto tiene apariencia plástica
Gradaciones de color más suaves Interfaz de exportación deficiente
Máscara de canal alfa

Calidad de la imagen

WebP utiliza un nuevo algoritmo de compresión, por lo que los artefactos (es decir, distorsión o degradación) se ven diferentes a otros tipos de archivos. WebP hace un buen trabajo al mantener los bordes nítidos en una foto, pero, por supuesto, pierde detalles y textura, como es de esperar en un archivo con pérdida. Mientras que un archivo JPEG comparable exhibe artefactos de nerviosismo en áreas sólidas, WebP cuenta con gradaciones suaves hasta la configuración de calidad más baja. Una desventaja de esto es que los rostros humanos pueden adoptar una apariencia plástica o posterizada en entornos bajos.

Diferencia de calidad entre JPEG y WebP
Diferencia de calidad entre JPEG y WebP. (Ver versión grande)
Diferencia en la calidad ampliada entre JPEG y WebP
Diferencia en la calidad ampliada entre JPEG y WebP. (Ver versión grande)

Tenemos algunas otras cosas que considerar con el formato de imagen WebP. La configuración de compresión no coincide uno a uno con JPEG. No espere que un JPEG de 50% de calidad coincida con un WebP de 50% de calidad. La calidad cae considerablemente en la escala de WebP, así que comience con una calidad alta y vaya bajando.

Otra ventaja que cambia el juego es la capacidad de agregar una máscara de canal alfa, muy parecido a un PNG. Sin embargo, a diferencia de su contraparte sin pérdidas, a menudo puede reducir una imagen WebP utilizable a alrededor de una décima parte del tamaño de su equivalente PNG. Este es un uso realmente destacado para WebP, que permite una gran cantidad de opciones y características que de otro modo llevarían un sitio web a un rastreo con tamaños de archivo difíciles de manejar. Un ejemplo del mundo real vio un PNG de 880 KB (24 bits con canal alfa) comprimido hasta 41 KB, un ahorro del 95%. Si bien esta no es la norma, ilustra las posibilidades.

webp Diferencia en la calidad de la textura
Diferencia en la calidad de la textura. (Ver versión grande)

Para reducir aún más el tamaño del archivo, podríamos omitir los metadatos desmarcando «Guardar metadatos» en el cuadro de diálogo «Guardar» en un editor de imágenes. Para ahorrar aún más en compresión, podríamos seleccionar «canal alfa con pérdida». Los ajustes de calidad para el canal alfa reflejan los de la imagen. Por ejemplo, una imagen de 50% de calidad tendrá un canal alfa con pérdida de 50% de calidad. En nuestras pruebas, esperábamos artefactos alrededor del borde enmascarado, pero también hubo cambios de compresión notables en toda la imagen. Ciertamente, lo consideramos una opción para reducir aún más el tamaño de los archivos, pero monitorearíamos de cerca la calidad de la imagen al hacerlo. Además, esté atento a las bandas no deseadas en los canales alfa con fundidos graduados.

Diferencia en la calidad del canal alfa
Diferencia en la calidad del canal alfa. (Ver versión grande)

Estábamos muy emocionados de descubrir que hay una Complemento de Photoshop para el soporte WebP. Esto facilita marcar la configuración de calidad para las imágenes WebP. La interfaz del complemento deja algo que desear: Adobe no la ha adoptado por completo. En la actualidad, no puede obtener una vista previa de una imagen para evaluar la configuración de calidad, lo cual es una desventaja.

Complemento de Photoshop para WebP
Complemento de Photoshop WebP.

Como solución alternativa, el navegador Chrome de Google permite una comparación rápida de archivos. Acceder al cuadro de diálogo «Guardar» también es un poco incómodo en Photoshop. Para ahorrar tiempo, hemos configurado un atajo de teclado y, por lo tanto, evitar visitas repetidas al menú desplegable «Guardar como». A pesar de estas advertencias, todavía vale la pena.

Con ahorros significativos en el tamaño del archivo, buena calidad y canal alfa, WebP parece un verdadero competidor entre los formatos de imagen. Si bien los resultados de las pruebas fueron prometedores, curiosamente no hubo un ganador claro entre los formatos. WebP a menudo ejecutaba anillos alrededor de los otros formatos, pero JPEG y PNG de 8 bits todavía ocasionalmente superan a WebP en tamaño o calidad, o ambos. Asegúrese de realizar muchas pruebas por su cuenta antes de implementar WebP, ya que podría no ser ideal para sus necesidades.

Implementación

Una vez que determinamos que WebP sería una herramienta eficiente para usar en nuestro proceso, recurrimos a nuestros desarrolladores para probar la implementación. WebP es compatible de forma nativa en Chrome, Opera, Opera Mini, el navegador de Android y Chrome para Android. Firefox, Internet Explorer y Safari no tienen soporte nativo, aunque Firefox tiene bastante historia con WebP. Afortunadamente, existen algunas soluciones para la falta de compatibilidad con el navegador.

A través de nuestra investigación, encontramos tres opciones viables para admitir el formato WebP. Queríamos asegurarnos de utilizar la mejor opción para el tamaño de la página, teniendo en cuenta que el índice de velocidad es una métrica clave y teniendo en cuenta los polyfills de JavaScript necesarios.

Nosotros corrimos cuatro pruebas para considerar en qué dirección ir. La primera prueba usó un JPEG normal como control, y las otras tres pruebas implementaron las opciones que se enumeran a continuación. Usamos una imagen JPEG y una imagen WebP de calidad similar (269KB para JPEG y 52KB para WebP). La Los resultados de las cuatro pruebas están disponibles en PDF..

En la segunda prueba, incluimos WebPJS, un polyfill de 67 KB desarrollado por Dominik Homberger. Proporciona compatibilidad con WebP para todos los navegadores principales, incluso en IE6 y versiones posteriores. El polyfill es útil porque no requiere que cambie la sintaxis del <img> elemento en el código existente – simplemente cambie .jpeg o .png a .webpy el polyfill hará el trabajo por usted.

Nuestro siguiente enfoque fue utilizar Picturefill, un polyfill que permite el uso de <picture>, incluso cuando <picture> no es compatible de forma nativa. Esto permite a los desarrolladores utilizar <source> para WebP si el navegador admite el formato, y recurrir a JPEG, PNG u otro tipo de imagen si WebP no es compatible. (Obviamente el <picture> El elemento también tiene otros poderes asombrosos).

La cuarta prueba usó código en el .htaccess archivo en el servidor para implementar WebP. Esta opción fue ideado por Vincent Orback. Usando este enfoque, el .htaccess El código busca una versión WebP de cada imagen en la página. Si el navegador es compatible con WebP y hay una imagen WebP disponible, utiliza la imagen WebP, en lugar de JPEG o PNG. Esto es útil y ahorra un tiempo considerable porque no es necesario cambiar la sintaxis del <img> elemento en el código o cambiar la extensión de las imágenes a .webp.

Después de revisar los datos, determinamos que el Relleno de polietileno WebP (de la prueba dos) es el la solución más ligera que funciona en todos los navegadores, pero no quedamos muy impresionados con la métrica del índice de velocidad resultante al usar este método. El polyfill de WebP pareció cargar imágenes visualmente peor que la prueba de control JPEG y las otras implementaciones, excepto en iOS.

También notamos que en los dispositivos iOS, los tamaños de archivo eran 100 KB más grandes que en otros dispositivos. En nuestras pruebas, notamos que en iOS5.1 y en IE8 y 9, la imagen de WebP se descarga tres veces. Si bien las dos solicitudes adicionales no son ideales, aún es menor que el equivalente en JPEG. No hemos probado esto en las versiones actualizadas de iOS, por lo que es posible que se haya resuelto. Inicialmente, nos inclinamos a utilizar esta implementación debido a la mejor compatibilidad con el navegador.

Mirando hacia el futuro

Nuestro equipo ha decidido implementar el método utilizado en la prueba tres, utilizando el <picture> para servir una imagen WebP para navegadores que la admitan y ofrecer un archivo JPEG o PNG cuando WebP no es compatible. Creemos que esta es la mejor ruta para la mejora progresiva y aún permite una imagen alternativa. Originalmente optamos por la implementación del polyfill de WebP, pero encontramos que el resultado no era el ideal.

WebP no eliminará JPEG o PNG de la imagen, pero es una herramienta excelente para agregar a su arsenal. ¡Prepárese para darle la bienvenida a WebP y prepárese para hacer algunas de sus propias pruebas y comparaciones con cada nuevo proyecto!

Deja un comentario