---
title: "Preload Responsive Images with imagesrcset and imagesizes"
description: "A plain preload link fetches the wrong file for a responsive image. Add imagesrcset and imagesizes to link rel=preload so the browser picks the same image."
canonical: "https://www.trevorlasn.com/blog/preloading-responsive-images"
author: "Trevor I. Lasn"
published: "2024-11-28"
last-updated: "2024-11-28"
topics: ["Web performance", "HTML"]
---
# Preload Responsive Images with imagesrcset and imagesizes
A plain preload link fetches the wrong file for a responsive image. Add imagesrcset and imagesizes to link rel=preload so the browser picks the same image.
By Trevor I. Lasn · Published 2024-11-28 · https://www.trevorlasn.com/blog/preloading-responsive-images
Responsive images and preloading don't naturally work well together. When you use responsive images, the browser makes smart decisions about which image to load based on the device's characteristics. But preloading needs to happen before these decisions can be made.
[Browser support for `preloading-responsive-images` on webstatus.dev](https://webstatus.dev/features/preloading-responsive-images)
Here's what a typical responsive image looks like:
```html title="HTML"
```
The browser examines these `srcset` and `sizes` attributes to determine which image to download. It considers the viewport width, the device's pixel density, the sizes attribute, and the available image widths. This smart selection process is what makes responsive images so powerful.
The common approach to preloading breaks down with responsive images.
```html title="HTML"
```
This fails because it forces the browser to download a specific image variant without considering the responsive image selection logic. You might end up downloading the wrong size, wasting bandwidth and potentially hurting performance.
### The Right Way: Responsive Preloading
Modern browsers support responsive preloading through `imagesrcset` and `imagesizes` attributes:
```html title="HTML" ins={5-10}
```
This approach tells the browser about all available image variants and how their widths should be calculated. The browser can then make the same smart decisions about which image to preload that it would make for a regular responsive image.
When working with modern image formats like WebP or AVIF, browser support becomes an important consideration:
```html title="HTML"
```
The `type` attribute prevents browsers that don't support AVIF from downloading these images. This same concept applies when working with multiple image formats in your responsive image markup:
```html title="HTML"
```
You can verify your responsive preloading setup using the browser's DevTools and [Performance Observer API](https://www.trevorlasn.com/blog/performance-web-api-in-javascript):
```javascript title="JavaScript"
const observer = new PerformanceObserver((list) => {
const entries = list.getEntries();
entries.forEach((entry) => {
if (entry.name.includes('photo')) {
console.log(`Downloaded: ${entry.name}`);
console.log(`Size: ${entry.transferSize} bytes`);
console.log(`Time: ${entry.duration}ms`);
}
});
});
observer.observe({ entryTypes: ['resource'] });
```
This code helps you monitor which image variants are being downloaded and how long they take, giving you concrete data about your preloading strategy's effectiveness.
Web performance is a balancing act. While preloading responsive images can significantly improve load times, it's crucial to implement it thoughtfully.
Consider preloading only your most critical responsive images, typically those that appear above the fold or contribute to your Largest Contentful Paint (LCP).
By combining responsive image preloading with modern image formats, you'll deliver the optimal image variant to each user while ensuring it loads as quickly as possible.
```
The browser examines these `srcset` and `sizes` attributes to determine which image to download. It considers the viewport width, the device's pixel density, the sizes attribute, and the available image widths. This smart selection process is what makes responsive images so powerful.
The common approach to preloading breaks down with responsive images.
```html title="HTML"
```
This fails because it forces the browser to download a specific image variant without considering the responsive image selection logic. You might end up downloading the wrong size, wasting bandwidth and potentially hurting performance.
### The Right Way: Responsive Preloading
Modern browsers support responsive preloading through `imagesrcset` and `imagesizes` attributes:
```html title="HTML" ins={5-10}
```
This approach tells the browser about all available image variants and how their widths should be calculated. The browser can then make the same smart decisions about which image to preload that it would make for a regular responsive image.
When working with modern image formats like WebP or AVIF, browser support becomes an important consideration:
```html title="HTML"
```
The `type` attribute prevents browsers that don't support AVIF from downloading these images. This same concept applies when working with multiple image formats in your responsive image markup:
```html title="HTML"