Precargar imágenes responsivas

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Puedes precargar imágenes responsivas, lo que puede hacer que tus imágenes se carguen mucho más rápido, ya que ayuda al navegador a identificar la imagen correcta de un srcset antes de renderizar la etiqueta img.

Descripción general de las imágenes responsivas

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

Supongamos que navegas por la Web en una pantalla de 300 píxeles de ancho y la página solicita una imagen de 1, 500 píxeles de ancho. Esa página desperdició muchos datos móviles porque tu pantalla no puede hacer nada con toda esa resolución adicional. Idealmente, el navegador recuperaría una versión de la imagen que es solo un poco más ancha que el tamaño de la pantalla, por ejemplo, 325 píxeles. Esto garantiza una imagen de alta resolución sin desperdiciar datos y permite que la imagen se cargue más rápido.

Las imágenes responsivas permiten que los navegadores recuperen diferentes recursos de imágenes para diferentes dispositivos. Si no usas una CDN de imágenes, guarda varias dimensiones para cada imagen y especifícalas en el atributo srcset. El valor w le indica al navegador el ancho de cada versión, de modo que pueda elegir la versión adecuada para cualquier dispositivo:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Descripción general de la precarga

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

La precarga te permite informar al navegador sobre recursos críticos que deseas cargar lo antes posible, antes de que se descubran en el HTML. Esto es especialmente útil para los recursos que no se pueden descubrir fácilmente, como las fuentes incluidas en las hojas de estilo, las imágenes de fondo o los recursos cargados desde una secuencia de comandos.

<link rel="preload" as="image" href="important.png">

imagesrcset y imagesizes

El elemento <link> usa los atributos imagesrcset y imagesizes para precargar imágenes responsivas. Úsalos junto con <link rel="preload">, con la sintaxis srcset y sizes que se usa en el elemento <img>.

Por ejemplo, si quieres cargar previamente una imagen responsiva especificada con lo siguiente:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

Para ello, agrega lo siguiente a <head> de tu HTML:

<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">

Esto inicia una solicitud con la misma lógica de selección de recursos que usan srcset y sizes.

Casos de uso

A continuación, se incluyen algunos casos de uso para la carga previa de imágenes responsivas.

Precarga imágenes responsivas insertadas de forma dinámica

Imagina que cargas de forma dinámica imágenes de héroe como parte de una presentación de diapositivas y sabes qué imagen se mostrará primero. En ese caso, probablemente quieras mostrar esa imagen lo antes posible y no esperar a que el script de la presentación de diapositivas la cargue.

Puedes inspeccionar este problema en un sitio web con una galería de imágenes cargada de forma dinámica:

  1. Abre esta demostración de presentación de diapositivas en una pestaña nueva.
  2. Presiona Control+Shift+J (o Command+Option+J en Mac) para abrir DevTools.
  3. Haga clic en la pestaña Red.
  4. En la lista desplegable Throttling, selecciona Fast 3G.
  5. Inhabilita la casilla de verificación Inhabilitar la caché.
  6. Vuelve a cargar la página.
El panel de red de Chrome DevTools muestra una cascada con un recurso JPEG que comienza a descargarse solo después de un poco de JavaScript.
Sin la carga previa, las imágenes comienzan a cargarse después de que el navegador termina de ejecutar la secuencia de comandos. En el caso de la primera imagen, esa demora es innecesaria.

Usar preload aquí permite que la imagen comience a cargarse con anticipación, de modo que pueda estar lista para mostrarse cuando el navegador necesite hacerlo.

El panel de red de las Herramientas para desarrolladores de Chrome muestra una cascada con un recurso JPEG que se descarga en paralelo con algo de JavaScript.
La precarga de la primera imagen permite que comience a cargarse al mismo tiempo que la secuencia de comandos.

Para ver la diferencia que genera la precarga, inspecciona la misma galería de imágenes cargadas de forma dinámica, pero con la primera imagen precargada. Para ello, sigue los pasos del primer ejemplo.

Precarga imágenes de fondo con image-set

Si tienes diferentes imágenes de fondo para diferentes densidades de pantalla, puedes especificarlas en tu CSS con la sintaxis image-set. Luego, el navegador puede elegir cuál mostrar según el DPR de la pantalla.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

El problema con las imágenes de fondo de CSS es que el navegador las descubre solo después de descargar y procesar todo el CSS en el <head> de la página.

Puedes inspeccionar este problema en un sitio web de ejemplo con una imagen de fondo adaptable.

El panel de red de las Herramientas para desarrolladores de Chrome muestra una cascada con un recurso JPEG que comienza a descargarse solo después de algo de CSS.
En este ejemplo, la descarga de la imagen no comienza hasta que se descarga por completo el CSS, lo que provoca un retraso innecesario en la visualización de la imagen.

La precarga de imágenes responsivas te permite cargar esas imágenes más rápido.

<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">

Si omites el atributo href, puedes asegurarte de que los navegadores que no admiten imagesrcset en el elemento <link>, pero sí admiten image-set en CSS, descarguen el código fuente correcto. Sin embargo, en este caso, no se beneficiarán de la precarga.

Puedes inspeccionar cómo se comporta el ejemplo anterior con una imagen de fondo adaptable precargada en la demostración de precarga de fondo adaptable.

El panel de red de las Herramientas para desarrolladores de Chrome muestra una cascada con un recurso JPEG que se descarga en paralelo con algo de CSS.
Aquí, la imagen y el CSS comienzan a descargarse al mismo tiempo, lo que permite que la imagen se cargue más rápido.

Efectos prácticos de la precarga de imágenes responsivas

En teoría, precargar tus imágenes responsivas puede acelerarlas, pero ¿qué sucede en la práctica?

Para responder esa pregunta, creé dos copias de una tienda PWA de demostración: una que no precarga imágenes y otra que precarga algunas de ellas. Dado que el sitio carga las imágenes de forma diferida con JavaScript, es probable que se beneficie de la precarga de las que aparecen en la ventana gráfica inicial.

Esto produjo los siguientes resultados para sin precarga y para precarga de imágenes:

Comparación de la tira de diapositivas de WebPageTest que muestra que las imágenes precargadas se muestran aproximadamente 1.5 segundos más rápido.
Las imágenes llegan mucho más rápido cuando se precargan, lo que mejora en gran medida la experiencia del usuario.

Precarga y <picture>

El Grupo de trabajo de rendimiento web está analizando la posibilidad de agregar un equivalente de precarga para srcset y sizes, pero no para el elemento <picture>, que controla el caso de uso de la "dirección de arte".

Aún hay varios problemas técnicos que resolver para la precarga de <picture>, pero, mientras tanto, existen soluciones alternativas:

<picture>
    <source srcset="small_cat.jpg" media="(max-width: 400px)">
    <source srcset="medium_cat.jpg" media="(max-width: 800px)">
    <img src="large_cat.jpg">
</picture>

La lógica de selección de la fuente de imagen del elemento <picture> revisa los atributos media de los elementos <source> en orden, encuentra el primero que coincide y usa el recurso adjunto.

Dado que la precarga adaptable no tiene una noción de "orden" o "primera coincidencia", deberás traducir los puntos de interrupción en algo similar a lo siguiente:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">

Precarga y type

El elemento <picture> también admite la coincidencia en el primer type para permitirte proporcionar diferentes formatos de imagen, de modo que el navegador pueda elegir el primer formato de imagen que admita. Este caso de uso no es compatible con la carga previa.

En el caso de los sitios que usan la coincidencia de tipos, recomendamos evitar la carga previa y, en su lugar, hacer que el analizador de carga previa tome las imágenes de los elementos <picture> y <source>. De todos modos, esta es una práctica recomendada, en especial cuando se usa Fetch Priority para ayudar a priorizar la imagen adecuada.

Efectos en el Largest Contentful Paint (LCP)

Dado que las imágenes pueden ser candidatas para el Largest Contentful Paint (LCP), precargarlas puede mejorar el LCP de tu sitio web.

Independientemente de si la imagen que precargas es adaptable, las precargas funcionan mejor cuando el recurso de imagen no se puede detectar en la carga útil de marcado inicial. También obtendrás una mayor mejora del LCP en los sitios que renderizan el lenguaje de marcado en el cliente que en los sitios que envían el lenguaje de marcado completo desde el servidor.