Precargar imágenes responsivas

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Puedes precargar imágenes responsivas, lo que puede permitir 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

Navegadores compatibles

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

Supongamos que estás navegando 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 de tus datos móviles porque tu pantalla no puede hacer nada con toda esa resolución adicional. Lo ideal sería que el navegador recuperara una versión de la imagen que sea un poco un poco más ancha que el tamaño de tu 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 imagen 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 para 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 carga previa

Navegadores compatibles

  • Chrome: 50
  • Borde: ≤79.
  • Firefox: 85.
  • Safari: 11.1.

Origen

La precarga te permite informar al navegador sobre recursos críticos que deseas cargar lo antes posible, antes de que se descubran en HTML. Esto es especialmente útil para los recursos que no se pueden detectar fácilmente, como las fuentes incluidas en los diseños de página, 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. Úsalas junto con <link rel="preload">, con la sintaxis srcset y sizes utilizadas en el elemento <img>.

Por ejemplo, si deseas precargar 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 al <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

Los siguientes son algunos casos de uso para la carga previa de imágenes responsivas.

Cómo precargar imágenes responsivas insertadas de forma dinámica

Imagina que cargas imágenes hero de forma dinámica como parte de una presentación de diapositivas y conoces la primera imagen que se mostrará. En ese caso, es probable que desees mostrar esa imagen lo antes posible y no esperar a que la secuencia de comandos 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 Restricción, selecciona 3G rápido.
  5. Inhabilita la casilla de verificación Inhabilitar caché.
  6. Vuelve a cargar la página.
Panel Network de Chrome DevTools que muestra una cascada con un recurso JPEG que solo comienza a descargarse después de ejecutar JavaScript.
Sin la carga previa, las imágenes comienzan a cargarse después de que el navegador termina de ejecutar la secuencia de comandos. Para la primera imagen, esa demora no es necesaria.

El uso de preload aquí permite que la imagen comience a cargarse con anticipación, de modo que esté lista para mostrarse cuando el navegador lo necesite.

Panel Network de Chrome DevTools que muestra una cascada con un recurso JPEG que se descarga en paralelo a algunos elementos JavaScript.
La carga previa de la primera imagen permite que comience a cargarse al mismo tiempo que la secuencia de comandos.

Para ver la diferencia que hace la carga previa, inspecciona la misma galería de imágenes cargada de forma dinámica, pero con la primera imagen cargada previamente siguiendo los pasos del primer ejemplo.

Cómo precargar 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 del 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 responsiva.

Panel Network de Chrome DevTools que muestra una cascada con un recurso JPEG que solo comienza a descargarse después de algunos CSS.
En este ejemplo, la descarga de imágenes no comienza hasta que el CSS esté completamente descargado, lo que provoca un retraso innecesario en la visualización de la imagen.

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

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

Si omites el atributo href, te aseguras de que los navegadores que no admiten imagesrcset en el elemento <link>, pero sí admiten image-set en CSS, descarguen la fuente correcta. Sin embargo, no se beneficiarán de la carga previa en este caso.

Puedes inspeccionar cómo se comporta el ejemplo anterior con una imagen de fondo responsiva precargada en la demo de carga previa de fondo responsivo.

Panel Network de Chrome DevTools que muestra una cascada con un recurso JPEG que se descarga en paralelo con algunos 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 carga previa de imágenes responsivas

En teoría, la carga previa de las imágenes responsivas puede acelerarlas, pero ¿qué hace en la práctica?

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

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

Comparación de tiras de película de WebPageTest que muestra que las imágenes precargadas se muestran alrededor de 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 "dirección de arte".

Aún hay varios problemas técnicos que resolver para la carga previa 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 la imagen del elemento <picture> revisa los atributos media de los elementos <source> en orden, encuentra el primero que coincida y usa el recurso adjunto.

Debido a que la carga previa responsiva no tiene noción de "orden" o "primera coincidencia", deberás traducir los puntos de inflexión a algo como 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 con el primer type, de modo que puedas proporcionar diferentes formatos de imagen para que el navegador pueda elegir el primer formato de imagen compatible. Este caso de uso no es compatible con la carga previa.

En el caso de los sitios que usan la coincidencia de tipos, te recomendamos que evites la carga previa y, en su lugar, que el escáner de carga previa recupere las imágenes de los elementos <picture> y <source>. De cualquier manera, esta es una práctica recomendada, en especial cuando se usa Prioridad de recuperación para ayudar a priorizar la imagen adecuada.

Efectos en el procesamiento de imagen con contenido más grande (LCP)

Debido a que las imágenes pueden ser candidatos para el procesamiento de imagen con contenido más grande (LCP), precargándolas puedes mejorar el LCP de tu sitio web.

Independientemente de si la imagen que se carga previamente es responsiva, las cargas previas funcionan mejor cuando el recurso de imagen no se puede descubrir en la carga útil de marcado inicial. También obtendrás más mejoras en el LCP en los sitios que renderizan el lenguaje de marcado del cliente que en los que envían lenguaje de marcado completo desde el servidor.