Preload responsive images

Barry Pollard
Yoav Weiss
Yoav Weiss
X GitHub

Published: September 30, 2019, Last updated: July 10, 2026

You can preload responsive images, which can let your images load significantly faster by helping the browser identify the correct image from a srcset before it renders the img tag.

Responsive images overview

Browser Support

  • Chrome: 73.
  • Edge: 79.
  • Firefox: 78.
  • Safari: 17.2.

Source

Suppose you're browsing the web on a screen that's 300 pixels wide, and the page requests an image 1500 pixels wide. That page has wasted a lot of your mobile data because your screen can't do anything with all that extra resolution. Ideally, the browser would fetch a version of the image that's just a little wider than your screen size, for example, 325 pixels. This ensures a high-resolution image without wasting data, and lets the image load faster.

Responsive images let browsers fetch different image resources for different devices. If you don't use an image CDN, save multiple dimensions for each image and specify them in the srcset attribute. The w value tells the browser the width of each version, so it can choose the appropriate version for any device:

<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">

Preload overview

Browser Support

  • Chrome: 50.
  • Edge: 79.
  • Firefox: 85.
  • Safari: 11.1.

Source

Preloading lets you tell the browser about critical resources that you want to load as soon as possible, before they're discovered in HTML. This is especially useful for resources that aren't readily discoverable, such as fonts included in stylesheets, background images, or resources loaded from a script.

<link rel="preload" as="image" href="important.png" fetchpriority="high">

imagesrcset and imagesizes

The <link> element uses the imagesrcset and imagesizes attributes to preload responsive images. Use them alongside <link rel="preload">, with the srcset and sizes syntax used in the <img> element.

For example, if you want to preload a responsive image specified with:

 <img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">

You can do that by adding the following to your HTML's <head>:

<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">

This initiates a request using the same resource selection logic that srcset and sizes use.

Use cases

The following are some use cases for preloading responsive images.

Preload dynamically-injected responsive images

Imagine you're dynamically-loading hero images as part of a slideshow, and you know which image will be displayed first. In that case, you probably want to show that image as soon as possible, and not wait for the slideshow script to load it.

You can inspect this issue on a website with a dynamically-loaded image gallery:

  1. Open this slideshow demo in a new tab.
  2. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
  3. Click the Network tab.
  4. In the Throttling drop-down list, select Fast 3G.
  5. Disable the Disable cache checkbox.
  6. Reload the page.
Chrome DevTools Network panel showing a waterfall with a JPEG resource only starting to download after some JavaScript.
Without preloading, the images start loading after the browser has finished running the script. For the first image, that delay is unnecessary.

Using preload here lets the image start loading ahead of time, so it can be ready to display when the browser needs to display it.

Chrome DevTools Network panel showing a waterfall with a JPEG resource downloading in parallel to some JavaScript.
Preloading the first image lets it start loading at the same time as the script.

To see the difference that preloading makes, inspect the same dynamically-loaded image gallery but with the first image preloaded by following the steps from the first example.

Preload background images using image-set

If you have different background images for different screen densities, you can specify them in your CSS with the image-set syntax. The browser can then choose which one to display based on the screen's DPR.