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
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
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:
- Abre esta demostración de presentación de diapositivas en una pestaña nueva.
- Presiona
Control+Shift+J
(oCommand+Option+J
en Mac) para abrir DevTools. - Haga clic en la pestaña Red.
- En la lista desplegable Restricción, selecciona 3G rápido.
- Inhabilita la casilla de verificación Inhabilitar caché.
- Vuelve a cargar la página.
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.
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.
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.
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:
- Iniciar renderización sigue siendo el mismo.
- El índice de velocidad mejoró ligeramente (273 ms, ya que las imágenes llegan más rápido y no ocupan una gran parte del área de píxeles).
- Last Painted Hero mejoró significativamente, en 1.2 segundos.
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.