Puedes precargar imágenes responsivas, lo que permite que estas se carguen considerablemente más rápido si ayudas al navegador a identificar la imagen correcta de una srcset antes de procesar la etiqueta img.
Descripción general de las imágenes responsivas
Navegadores compatibles
- 73
- 79
- 78
- 17.2
Supongamos que estás navegando en 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 ha desperdiciado muchos datos móviles porque la pantalla no puede hacer nada con tanta resolución extra. Lo ideal sería que el navegador recupere una versión de la imagen que sea 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 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, 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
La precarga te permite informar al navegador sobre los recursos críticos que quieres cargar lo antes posible, antes de que se descubran en HTML. Esto resulta particularmente útil para recursos que no son fáciles de detectar, 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. Úsalas junto con <link rel="preload">, con las sintaxis srcset y sizes que se usan en el elemento <img>.
Por ejemplo, si quieres 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 hacerlo, 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
A continuación, se incluyen algunos casos de uso para la precarga de imágenes responsivas.
Precarga imágenes responsivas inyectadas de forma dinámica
Imagina que cargas imágenes de héroe de forma dinámica como parte de una presentación de diapositivas y sabes qué imagen se mostrará primero. En ese caso, es probable que quieras 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+Jen Mac) para abrir las Herramientas para desarrolladores. - Haga clic en la pestaña Red.
- En la lista desplegable Regulación, selecciona 3G rápida.
- Inhabilita la casilla de verificación Inhabilitar caché.
- Vuelve a cargar la página.
Si usas preload aquí, la imagen comienza a cargarse antes de tiempo, de modo que pueda estar lista para mostrarse cuando el navegador deba mostrarla.
Para ver la diferencia que genera la precarga, inspecciona la misma galería de imágenes cargada de forma dinámica, pero con la primera imagen precargada. Para ello, sigue los pasos del primer ejemplo.
Precargar imágenes de fondo con image-set
Si tienes diferentes imágenes de fondo para distintas densidades de pantalla, puedes especificarlas en tu CSS con la sintaxis image-set. Luego, el navegador puede elegir cuál mostrar en función de la 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 todos los CSS en el <head> de la página.
Puedes revisar este problema en un sitio web de ejemplo con una imagen de fondo responsiva.
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">
Omitir el atributo href te permite asegurarte de que los navegadores que no admiten imagesrcset en el elemento <link>, pero que sí admiten image-set en CSS, descarguen la fuente correcta. 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 responsiva precargada en la demostración de precarga en segundo plano responsiva.
Efectos prácticos de la precarga de imágenes responsivas
En teoría, la precarga de imágenes responsivas puede acelerarlas, pero ¿qué hace en la práctica?
Creé dos copias de una tienda de AWP 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 las imágenes con JavaScript, es probable que se beneficie de la precarga de las que aparecen en el viewport inicial.
Eso produjo los siguientes resultados para la precarga y la precarga de imágenes:
- Iniciar el procesamiento no cambió.
- El Índice de velocidad mejoró ligeramente (273 ms, a medida que las imágenes llegan más rápido no ocupan una gran parte del área de píxeles).
- Last Painted Hero mejoró significativamente en 1.2 segundos.
Precarga y <picture>
En el grupo de trabajo de rendimiento web, se analiza cómo agregar una precarga equivalente para srcset y sizes, pero no para el elemento <picture>, que maneja el caso de uso de "dirección con portada".
Aún hay una serie de problemas técnicos por resolver para la precarga de <picture>, pero, mientras tanto, hay 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 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 coincidencias en el primer type para que puedas proporcionar diferentes formatos de imagen, de modo que el navegador pueda elegir el primer formato de imagen compatible. Este caso de uso no es compatible con la carga previa.
Para los sitios que usan la coincidencia de tipos, se recomienda evitar la carga previa y, en su lugar, hacer que el análisis de precarga recoja las imágenes de los elementos <picture> y <source>. De todos modos, esta es una práctica recomendada, en especial cuando se usan Sugerencias de prioridad para obtener ayuda para 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 de procesamiento de imagen con contenido más grande (LCP), precargarlas puede mejorar el LCP de tu sitio web.
Independientemente de si la imagen que estás precargando es responsiva, las precargas funcionan mejor cuando el recurso de imagen no es detectable en la carga útil de lenguaje de marcado inicial. También obtendrás más mejoras en el LCP en los sitios que procesan el lenguaje de marcado del cliente que en los que envían lenguaje de marcado completo desde el servidor.