Precargar imágenes responsivas

Barry Pollard

Yoav Weiss

Fecha de publicación: 30 de septiembre de 2019; última actualización: 10 de julio de 2026

Precaución: Una o más demostraciones de esta página ya no funcionan, ya que Glitch finalizó el hosting.

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

Browser Support

• 73
• 79
• 78
• 17.2

Source

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, ya que 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 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 distintos 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 carga previa

Browser Support

• 50
• 79
• 85
• 11.1

Source

La precarga te permite indicarle al navegador cuáles son los recursos fundamentales que quieres cargar lo antes posible, antes de que se descubran en HTML. Esto es especialmente útil para los recursos que no se pueden descubrir con facilidad, 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" fetchpriority="high">

Importante: Se supone que las imágenes precargadas tienen prioridad alta, por lo que deben incluir el atributo fetchpriority="high". De lo contrario, la precarga obtendrá la prioridad predeterminada para el atributo as. En el caso de las imágenes, este valor es low de forma predeterminada para que el navegador pueda priorizar el contenido que bloquea la renderización por sobre las imágenes. Consulta Optimiza la carga de recursos con la API de Fetch Priority para obtener más detalles.

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 que se usa 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 ello, agrega lo siguiente al elemento <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" fetchpriority="high">

Esto inicia una solicitud con la misma lógica de selección de recursos que usan srcset y sizes.

Advertencia: Es posible que las imágenes responsivas no sean compatibles con las precargas de encabezados HTTP, ya que el viewport solo se define cuando se crea el documento. Esto también significa que no se pueden usar para la carga previa anticipada en 103 Early Hints.

Algunos navegadores, como Chrome, procesan las precargas con esos atributos una vez que se define el documento y después de procesar el primer fragmento de HTML. Esto se propuso al estándar HTML. Sin embargo, esto puede ser riesgoso si el viewport se redefine más adelante en el documento (por ejemplo, un elemento <meta name="viewport"> tardío), ya que es posible que ya se hayan comenzado a cargar las imágenes responsivas incorrectas.

Para evitar problemas, se recomienda usar elementos <link rel="preload" href="..."> para las imágenes responsivas en lugar de encabezados de respuesta HTTP Link: <...>; rel="preload".

Casos de uso

A continuación, se muestran algunos casos de uso para precargar imágenes responsivas.

Carga previamente imágenes responsivas insertadas de forma dinámica

Imagina que cargas de forma dinámica imágenes hero 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 que se carga 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 las Herramientas para desarrolladores.
3. Haga clic en la pestaña Red.
4. En la lista desplegable Limitación, selecciona 3G rápida.
5. Inhabilita la casilla de verificación Inhabilitar la memoria caché.
6. Vuelve a cargar la página.

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.

Usar preload aquí permite que la imagen comience a cargarse con anticipación, de modo que pueda estar lista para mostrarse cuando el navegador necesite mostrarla.

La carga previa de la primera imagen permite que se empiece a cargar 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.

Nota: Otra forma de evitar demoras en la carga de imágenes es usar un carrusel basado en lenguaje de marcado y hacer que el precargador del navegador recoja los recursos necesarios. Sin embargo, este enfoque no siempre es práctico, por ejemplo, si reutilizas un componente existente que no se basa en lenguaje de marcado.

Carga previamente 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 según el DPR de la pantalla.

background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);

Nota: Esta sintaxis ignora la necesidad de esta función de prefijos de proveedores en navegadores basados en Chromium y WebKit. Si planeas usar esta función, considera usar Autoprefixer (disponible como herramienta en línea) para abordar eso automáticamente.

El problema con las imágenes de fondo de 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.

En este ejemplo, la descarga de la imagen no comienza hasta que se descarga por completo el CSS, lo que provoca un retraso innecesario en la visualización de la imagen.

La carga previa 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" fetchpriority="high">

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, en este caso, no se beneficiarán de la carga previa.

Puedes inspeccionar cómo se comporta el ejemplo anterior con una imagen de fondo responsiva precargada en la demostración de precarga de fondo responsivo.

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, precargar tus imágenes responsivas puede acelerarlas, pero ¿qué hace en la práctica?

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

Esto produjo los siguientes resultados para sin precarga y para precarga de imagen:

• El inicio de la renderización se mantuvo igual.
• El Índice de velocidad mejoró un poco (273 ms, ya que las imágenes llegan más rápido y no ocupan una gran parte del área de píxeles).
• El último elemento principal renderizado mejoró significativamente, en 1.2 segundos.

Las imágenes llegan mucho más rápido cuando se cargan previamente, 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 imagen del elemento <picture> revisa los atributos media de los elementos <source> en orden, encuentra el primero que coincide y usa el recurso adjunto.

Debido a que la precarga responsiva no tiene noción de "orden" ni de "primera coincidencia", deberás traducir los puntos de interrupción a algo como lo siguiente:

<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)" fetchpriority="high">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)" fetchpriority="high">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high">

Precarga y type

El elemento <picture> también admite la coincidencia en el primer type, lo que te permite proporcionar diferentes formatos de imagen para que el navegador pueda elegir el primer formato de imagen que admita.

Este caso de uso solo se admite parcialmente con la precarga: los navegadores solo deben descargar precargas para los tipos admitidos. Por lo tanto, puedes usar esto para evitar que los navegadores precarguen tipos de MIME no compatibles incluyendo lo siguiente en la precarga:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

Sin embargo, a diferencia de <picture>, no se detendrá en el primer tipo compatible. Por lo tanto, si se incluyen varias precargas para varios tipos, se precargarán todas las imágenes:

No hagas esto: No cargues previamente varios tipos:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">
<link rel="preload" href="image.jpg" type="image/jpg" as="image" fetchpriority="high">

En su lugar, haz lo siguiente: precarga el tipo preferido:

<link rel="preload" href="image.avif" type="image/avif" as="image" fetchpriority="high">

La carga previa del formato más reciente (AVIF en este caso) actúa como una mejora progresiva, en la que los navegadores que admiten ese tipo se beneficiarán y otros navegadores no se beneficiarán de la carga previa.

En el caso de los sitios en los que la imagen se puede detectar rápidamente en el código HTML, recomendamos evitar la precarga y, en su lugar, hacer que el analizador de precarga tome las imágenes de los elementos <picture> y <source>. De todos modos, esta es una práctica recomendada, en especial cuando se usa la prioridad de recuperación para ayudar a priorizar la imagen adecuada, ya que permite que se precargue la imagen exacta según la compatibilidad del navegador. También elimina el riesgo de que una precarga quede desactualizada del lenguaje de marcado principal cuando cambian las imágenes o las páginas.

Efectos en el Largest Contentful Paint (LCP)

Debido a que las imágenes pueden ser candidatas para el Largest Contentful Paint (LCP), precargarlas puede mejorar el LCP de tu sitio web.

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