Cómo usar JPEG 2000 (JP2) para imágenes más rápidas en iPhone y Safari.Las imágenes ralentizan el rendimiento de carga de páginas de muchos sitios web. Las herramientas de auditoría como las de Google pueden decirle rápidamente cuántos segundos puede ahorrar optimizando sus imágenes. Cuando realiza entregas en computadoras de escritorio o dispositivos Android con el navegador Chrome, una solución rápida es convertir sus imágenes a WebP. Esto puede ahorrar hasta un 80% en la carga de su imagen.
Acelerar a los usuarios de Apple Safari
Pero, ¿qué pasa con los iPhones o iPads de Apple o cualquier computadora portátil con navegador Safari? Para muchas empresas u organizaciones, los dispositivos Apple pueden representar más del 50% de su tráfico. Desafortunadamente, Apple Safari no es compatible con WebP. Sin embargo, se admite un formato de archivo de imagen poco conocido pero potente llamado JPEG 2000 (imagen mimetype / jp2) desde Safari 5 e iOS 5 con algunas excepciones. El truco es identificar a los usuarios de Safari y servir rápidamente las imágenes en formato JPEG2000.
¿Qué es JPEG 2000?
JPEG2000 es un estándar de imagen creado en el año 2000. El Joint Photographic Experts Group (JPEG) pretendía que el nuevo formato se hiciera cargo del estándar JPEG aún más antiguo creado en 1992. Hasta la fecha, su adopción es limitada.
El estándar realmente se ha popularizado en industrias donde el archivo digital es importante. JPEG2000 es el formato preferido para almacenar imágenes satelitales, rayos X, imágenes arquitectónicas, arte, etc., gracias a su mayor profundidad de bits, compresión sin pérdidas y compresión flexible.
En el espacio web, el navegador Apple Safari es compatible con JPEG2000. Su efectividad en la optimización de la imagen es impresionante. Si observa millones de imágenes originales diferentes, si una cambia el tamaño, comprime y usa el formato de archivo JPEG 2000, puede ahorrar un promedio del 59% de la carga útil del archivo.
Cómo servir a los usuarios de Apple Safari con imágenes receptivas
Las técnicas de imagen receptiva se pueden utilizar para optimizar las imágenes para los usuarios de Safari. Si bien hay formas de identificar Safari, los desarrolladores deberán convertir de manera proactiva las imágenes al formato JPEG 2000. Esto aumenta la complejidad del flujo de trabajo, particularmente para sitios con muchas imágenes que se actualizan continuamente.
Las imágenes receptivas, tal como se definen en el Grupo de trabajo del W3C, son marcas que permiten al navegador solicitar diferentes URL de imágenes en respuesta a diferentes condiciones ambientales. Por ejemplo, una pantalla de escritorio presenta condiciones ambientales muy diferentes a las de un teléfono inteligente o tableta. Un navegador debe poder responder a estas condiciones y mostrar dinámicamente una imagen óptima.
Estas condiciones ambientales generalmente se expresan al navegador a través de las funciones de medios CSS. Algunas características comunes de los medios son la relación de píxeles del dispositivo (DPR) y el ancho máximo de la pantalla.
Para lograr sus objetivos, el grupo de trabajo introdujo varios nuevos elementos y atributos de marcado HTML para ayudar con las imágenes receptivas. Estos incluyen agregar los tamaños y atributos al elemento . El grupo de trabajo también agregó un nuevo elemento
Para JPEG 2000, puede usar el elemento de imagen para implementar el cambio de formato de archivo de imagen. El navegador evaluará las fuentes y sus tipos en orden secuencial. Por ejemplo, si Safari encuentra un tipo de próxima generación que admite (por ejemplo, jp2), seleccionará ese srcset. De lo contrario, se establecerá de manera predeterminada en la imagen especificada en el img src. En este ejemplo, es un png.
<picture> <source srcset="logo.webp" type="image/webp"> <source srcset="logo.jp2" type="image/jp2"> <img src="logo.png" alt="logo"> </picture>
Además de este nuevo código, el desarrollador detrás de escena necesitará generar, almacenar y administrar las variantes de próxima generación de la imagen original. Y a medida que comienza a agregar funcionalidad de dirección de arte, resolución y tamaño de imagen a las imágenes receptivas, la complejidad del código comienza a crecer exponencialmente.
Leer también:
This post is also available in:
Español
