Se usó la API de Cloud Translation para traducir esta página.

Precargar imágenes responsivas

Barry Pollard

Yoav Weiss

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

Navegadores compatibles

Origen

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 (o Command+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. — Sin la precarga, 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.

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. — La precarga de la primera imagen permite que esta comience a cargarse al mismo tiempo que la secuencia de comandos.

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. — En este ejemplo, la descarga de la imagen 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 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. — 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, 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. — Las imágenes llegan mucho más rápido cuando se precargan, lo que mejora considerablemente la experiencia del usuario.

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.