Puedes precargar imágenes responsivas, lo que permite que se carguen tus imágenes
mucho más rápido, ya que ayuda al navegador a identificar la imagen correcta
a partir de un elemento srcset
antes de renderizar la etiqueta img
.
Descripción general de las imágenes responsivas
Navegadores compatibles
Imagina que navegas por la Web en una pantalla de 300 píxeles de ancho y que la página solicita una imagen de 1500 píxeles de ancho. Esa página ha desperdiciado gran parte de tu dispositivo móvil datos, porque la pantalla no puede hacer nada con toda esa resolución adicional. Idealmente, el navegador recuperaría una versión de la imagen que sea solo poco más ancho que el de la pantalla (por ejemplo, 325 píxeles). Esto garantiza un de alta resolución sin desperdiciar datos y permite que la imagen se cargue más rápido.
Imágenes responsivas
permiten que los navegadores recuperen diferentes recursos de imagen para distintos dispositivos. Si no
Use una CDN de imagen y guarde varias dimensiones para cada una.
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 recursos críticos que deseas cargar lo antes posible, antes de descubierto en HTML. Esto es especialmente útil para los recursos que no son detectable, por ejemplo, las fuentes incluidas en las hojas de estilo, las imágenes de fondo o 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 hacer lo siguiente:
precargar imágenes responsivas. Úsalas junto con ellas.
<link rel="preload">
, con las sintaxis srcset
y sizes
que se usan en
<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 hacerlo, agrega lo siguiente a tu <head>
de 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 precarga de imágenes responsivas.
Precarga las imágenes responsivas inyectadas de forma dinámica
Imagina que cargas hero images como parte de una presentación de diapositivas saber qué imagen se mostrará primero. En ese caso, probablemente quieras mostrar esa imagen lo antes posible y no esperar a que el guion cargarlo.
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 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.
![El panel Network de Chrome DevTools muestra una cascada con un recurso JPEG que recién comienza a descargarse después de JavaScript.](https://web.dev/static/articles/preload-responsive-images/image/screenshot-chrome-devtoo-cb8c539cfc089.png?authuser=1&hl=es-419)
Si usas preload
aquí, la imagen comenzará a cargarse antes de tiempo para que se pueda
lista para mostrarse cuando el navegador deba mostrarla.
![Panel Network de Chrome DevTools que muestra una cascada con un recurso JPEG que se descarga en paralelo a JavaScript.](https://web.dev/static/articles/preload-responsive-images/image/screenshot-chrome-devtoo-cecd20c3666af.png?authuser=1&hl=es-419)
Para ver la diferencia que representa la precarga, inspecciona la misma imagen cargada de forma dinámica pero con la primera imagen precargada siguiendo los pasos del primer ejemplo.
Precargar imágenes de fondo con image-set
Si tienes distintas imágenes de fondo para distintas densidades de pantalla, puedes
especifícalos en tu CSS con la sintaxis image-set
. A continuación, el navegador
elige cuál mostrar en función de la calidad
DPR.
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 detecta
solo después de que haya descargado y procesado todos los CSS en el <head>
de la página.
Puedes inspeccionar este problema en un ejemplo de sitio web con una imagen de fondo responsiva.
![El panel Network de las Herramientas para desarrolladores de Chrome muestra una cascada con un recurso JPEG que recién comienza a descargarse después de usar CSS.](https://web.dev/static/articles/preload-responsive-images/image/screenshot-chrome-devtoo-f25333cf0e854.png?authuser=1&hl=es-419)
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
Se admiten imagesrcset
en el elemento <link>
, pero se admiten image-set
en
Descargar CSS de la fuente correcta Sin embargo, no se beneficiarán de la precarga en
este caso.
Puedes inspeccionar cómo se comporta el ejemplo anterior con un código imagen de fondo en la demostración de precarga de fondo responsivo.
![Panel Network de Chrome DevTools que muestra una cascada con un recurso JPEG que se descarga en parrallel a algún CSS.](https://web.dev/static/articles/preload-responsive-images/image/screenshot-chrome-devtoo-6e4a42d42a6ff.png?authuser=1&hl=es-419)
Efectos prácticos de la precarga de imágenes responsivas
En teoría, cargar las imágenes responsivas puede acelerarlas, pero ¿qué hace hacer en la práctica?
Para responder que creé dos copias de una tienda de AWP de demostración: una que no precarga imágenes, y uno que precarga algunos de ellos. Debido a que el sitio carga imágenes de forma diferida con JavaScript, es probable que se beneficie de precargando los que aparecen en el viewport inicial.
Eso produjo los siguientes resultados para sin precarga y para la precarga de imágenes:
- Iniciar procesamiento se mantuvieron iguales.
- Índice de velocidad mejoró ligeramente (273 ms, ya que las imágenes llegan más rápido y no ocupan mucho espacio del área de píxeles).
- Last Painted Hero mejoró significativamente en 1.2 segundos.
![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.](https://web.dev/static/articles/preload-responsive-images/image/screenshot-webpagetest-f-8e3402c523246.png?authuser=1&hl=es-419)
Precargar y <picture>
El Grupo de trabajo sobre el rendimiento web está analizando la adición de un equivalente de precarga para
srcset
y sizes
, pero no <picture>
que controla la "dirección artística"
para tu caso de uso específico.
Aún hay una serie de problemas técnicos que resolver para la precarga de <picture>
.
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 el media
atributos de los elementos <source>
en orden, encuentra el primero que
coincide y usa el recurso adjunto.
Porque la precarga responsiva no tiene la noción de "pedido". o "primera coincidencia", debes traducir los puntos de interrupción en 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)">
Precargar y type
El elemento <picture>
también admite coincidencias en el primer type
, de modo que puedas hacer lo siguiente:
Proporcionar diferentes formatos de imagen para que el navegador pueda elegir el primer formato de imagen
que admite. Este caso de uso no es compatible con la precarga.
Para los sitios que usan la coincidencia de tipos, recomendamos evitar la precarga y, en su lugar,
el escáner de precarga recoge las imágenes de la
En su lugar, se muestran los elementos <picture>
y <source>
. De todos modos, esta es una práctica recomendada
especialmente cuando se usa la Prioridad de recuperación para obtener ayuda
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), y precargarlos puede mejorar el LCP de tu sitio web.
Independientemente de si la imagen precargada es responsiva, la precarga funciona o no Se recomienda cuando el recurso de imagen no es detectable en la carga útil inicial del lenguaje de marcado. Además, obtendrás más mejoras en el LCP en sitios que renderizan lenguaje de marcado en el cliente que en los sitios que envían lenguaje de marcado completo desde el servidor.