Las imágenes han sido una parte clave de la web durante décadas.Comunican ideas al instante, pero también son mucho más pesados que el texto para cargar. Esto significa que es esencial cargarlos y mostrarlos correctamente, si desea dar a sus usuarios una primera impresión fantástica.
Nuestros cerebros interpretan las imágenes mucho más rápido que el texto, por lo que las imágenes de alta calidad impulsan las conversiones y la participación del usuario. Solo piense en las páginas de destino y las fotos de productos, los paneles de características y las áreas destacadas. Para que sean efectivas, todas estas imágenes deben organizarse cuidadosamente para que aparezcan rápidamente en la pantalla, pero resulta que cargar imágenes de manera eficiente a escala no es un proyecto para una tarde tranquila.
La optimización de imágenes , el comportamiento de carga y la representación en el navegador requieren la comprensión de los formatos de imagen y las técnicas de compresión de imágenes, la decodificación de imágenes y la representación del navegador, las CDN de imágenes y la carga de medios adaptativos, sin mencionar el almacenamiento en caché y la precarga efectivos.
Este artículo de Addy Osmani sobre imágenes responsive es muy interesante (está en inglés). Escribe sobre cómo las imágenes impactan en el rendimiento y cómo eso se relaciona con Core Web Vitals de Google, pero va paso a paso, desde una imgetiqueta humilde, hasta el HTML bastante complejo con el que termina el artículo.
Un buen recordatorio de Addy es que para las imágenes de héroes a menudo podemos ahorrar un poco de tiempo si precargamos nuestras imágenes en el archivo <head>, así:
<head>
<link rel="preload" as="image" href="donut.jpg">
</head> Pero también puede aplazar la decodificación de esta imagen, que no tenía ni idea de que los navegadores pudieran hacer:
Los navegadores necesitan decodificar las imágenes que descargan para convertirlas en píxeles en su pantalla. Sin embargo, la forma en que los navegadores manejan las imágenes diferidas puede variar. En el momento de escribir este artículo, Chrome y Safari presentan imágenes y texto juntos, de forma sincronizada, si es posible. Esto parece correcto visualmente, pero las imágenes deben decodificarse, lo que puede significar que el texto no se muestra hasta que se realiza este trabajo. El atributo de decodificación activado
le permite indicar una preferencia entre la decodificación de imágenes síncrona y asíncrona.
¿Conoces el decodingatributo de las imágenes? Puedes combinarlo con el loadingatributo.
¡Asi que! ¿Qué significa esto? Bueno, puedes escribir algo como esto...
<img decoding="async" loading="lazy" src="donut.jpg" >
…lo que da permiso al navegador para mostrar contenido antes de que la imagen haya terminado el proceso de carga y decodificación. Ese es un truco bastante bueno, si me preguntas.
El decoding="async"atributo le dirá al navegador que está bien que la decodificación de la imagen se realice en un momento posterior para que el navegador pueda continuar mostrando contenido incluso si las imágenes no están completamente cargadas.
Hay 3 valores aceptados para el decodingatributo:
- Sinc: (forzar la decodificación síncrona) el renderizado continuará solo después de que la imagen esté lista; preferido para una "experiencia completa".Decodifica la imagen sincrónicamente para una presentación atómica con otro contenido.
- Async:(forzar una decodificación de la imagen de forma asíncrona para reducir la demora en la presentación de otro contenido) continúe con la representación y tan pronto como se complete la decodificación de la imagen, el navegador actualizará la presentación; preferido para el rendimiento.
- Auto: Modo predeterminado, que indica que no hay preferencia por el modo de decodificación. El navegador decide (~ sin preferencia) - el valor predeterminado lo que es mejor para el usuario. Permitirá que el navegador haga lo que determine que es el mejor enfoque.
La propiedad html decoding de la interfaz representa una pista dada al navegador sobre cómo debe decodificar la imagen.
El decodingatributo se puede usar en cualquier navegador principal, por supuesto, excepto en IE.
PD: también podemos usar la carga diferida para mejorar el rendimiento de la imagen.
En términos prácticos, cuando el decodingatributo se establece en async, el navegador puede paralelizar el proceso de decodificación de imágenes, lo que podría mejorar significativamente la representación de la página, ya que puede ser una operación costosa, especialmente con imágenes grandes.
async elimina la decodificación de imágenes del hilo principal y, por lo tanto, puede ahorrar algo de CPU. Hasta donde yo sé, es seguro de usar incluso con navegadores que aún no lo admiten.
En realidad, async no es el valor predeterminado probablemente debido a algunos problemas heredados de borde, pero no veo por qué no lo usaría en la mayoría de los casos.
Dado nuestro conocimiento existente de que las páginas generalmente siempre pueden mostrarse con texto y diseño antes de que aparezcan las imágenes (y por lo tanto tienen prioridad H-2 baja), acá la información sobre qué y cómo se comportan los navegadores de manera predeterminada:
https://html.spec.whatwg.org/multipage/images.html#decodificación-de-imágenes
[..] La decodificación [..] de los datos multimedia de una imagen en un formato de mapa de bits [..] puede ser lenta en relación con otros procesos involucrados en la presentación de contenido. [..]
Se dice que la decodificación de imágenes es síncrona si impide la presentación de otro contenido hasta que finalice. Por lo general, esto tiene el efecto de presentar atómicamente la imagen y cualquier otro contenido al mismo tiempo. Sin embargo, esta presentación se retrasa por la cantidad de tiempo que lleva realizar la decodificación.
Se dice que la decodificación de imágenes es asíncrona si no impide la presentación de otro contenido. Esto tiene el efecto de presentar contenido sin imagen más rápido. Sin embargo, el contenido de la imagen no aparece en la pantalla hasta que finaliza la decodificación. Una vez finalizada la decodificación, la pantalla se actualiza con la imagen.
Tanto en el modo de decodificación síncrono como en el asíncrono, el contenido final se presenta en la pantalla después de que haya transcurrido la misma cantidad de tiempo . La principal diferencia es si el agente de usuario presenta contenido sin imagen antes de presentar el contenido final.
La decodingpropiedad le permite controlar si el navegador puede o no intentar paralelizar la carga de su imagen. Si hacerlo causa problemas, puede especificar sync que se deshabilite la carga asíncrona. Esto puede ser útil cuando se aplica a elementos, pero puede ser aún más útil cuando se usa para objetos de imagen fuera de pantalla. <img>
Bibliografía: