Las imágenes de sitios web están atrayendo mucha discusión, y con buena razón: según el HTTP Archive, el 61 por ciento del peso de la página de un sitio web en una computadora de escritorio son imágenes, y ese porcentaje se eleva al 65 por ciento en dispositivos móviles. Y para colmo, el número de bytes de imagen ha crecido en más del 30 por ciento en la página web promedio año tras año a medida que las imágenes se hacen más y más grandes.
No se ha avanzado mucho en el soporte de formatos de imagen desde que los formatos estándar JPEG, GIF y PNG se lanzaron al mercado hace más de 15 años. La razón es simple: admitir nuevos formatos de imagen en diferentes tipos de navegador es difícil. Sin embargo, dos nuevos formatos de imagen han entrado en escena en los últimos años y recientemente han comenzado a ganar tracción como una forma de optimizar las imágenes: WebP (presentado por Google) y JPEG XR (respaldado por Microsoft).
WebP vs JPEG XR
Ambos se basan en importantes avances tecnológicos de los últimos 15 años y cada uno tiene sus fortalezas únicas. Cada formato admite compresión sin pérdida y con pérdida y transparencia total, y JPEG XR admite la representación progresiva de imágenes. Los sitios web que utilizan estos nuevos formatos están viendo resultados significativos, a menudo ahorrando entre el 25 y el 50 por ciento de los bytes en comparación con un JPEG de calidad similar.
El mayor inconveniente para ambos, y la principal adopción reciente es un poco lenta, es el soporte del navegador: WebP, por ejemplo, solo es compatible con Chrome, Opera y algunos dispositivos Android más nuevos. JPEG XR es totalmente compatible con IE 10+, con soporte limitado en IE 9. Ninguno de los dos tiene soporte para Firefox y Safari. Para muchos usuarios que no utilizan estos navegadores, las imágenes de un sitio web parecen rotas.
Facebook es compatible con WebP
La única gran prueba pública de estos nuevos formatos llegó con la implementación de WebP por parte de Facebook la primavera pasada. Facebook pudo entregar imágenes a los usuarios con navegadores compatibles con WebP, pero surgieron problemas cuando los usuarios intentaron actuar en las fotos guardándolas, editándolas o volviéndolas a compartir. Un usuario frustrado preguntó «¿Cómo desactivo este monstruo?»
Consejos para la implementación del formato de imagen
Los sitios web pueden beneficiarse significativamente de estas nuevas tecnologías de optimización de imágenes, pero deben tener algunas cosas en mente cuando van en esta dirección:
- Comprenda cómo las personas van a usar las imágenes del sitio web. En el caso de Facebook, el usuario claramente no fue tomado en consideración porque descargar, guardar, editar y compartir fotos son actividades realizadas por un porcentaje significativo de la audiencia de Facebook.
- La normalización de la calidad importa. Las diferencias en la configuración de calidad deben tenerse en cuenta cuando se utilizan varios formatos con pérdida. La elección de configuraciones de calidad que producen una degradación de calidad percibida similar se puede lograr utilizando un algoritmo como SSIM (similitud estructural).
- Utilice WebP y JPEG XR solo en los casos en que haya soporte para navegadores. Sin cruce en el soporte del navegador, podría tener sentido que los sitios web que buscan moverse en esta dirección admitan ambos para obtener la máxima cobertura.
Hay muchas ventajas en el uso de estos nuevos formatos de optimización de imágenes, y cuando se tienen en cuenta los puntos anteriores, los sitios web verán un rendimiento significativamente mejorado y ahorros de bytes. Un mayor soporte de navegador, especialmente de Firefox y Safari, endulzará aún más la olla.
