Profile picture of Dan Poulton

Preload responsive and retina images

I’ll open with the unfortunate fact that responsive image preloading isn’t perfect – but you can solve most of the problems.

So what are those problems?

Before responsive images

Before reponsive images, we would specify one file for one image tag.

If that one image was above the fold, we would preload it.

<link rel="preload" as="image" href="important_image.jpg">
<img src="important_image.jpg">

(The <link> tag would always go in the <head> – all examples show tags together for brevity.)

Retina/pixel-dense images

Here’s how we show a Retina/pixel-dense image.

<link rel="preload" as="image" href="???">
<img src="important_image@1.jpg" srcset="important_image@1.jpg 1x, important_image@2.jpg 2x">

See the question marks? What can I put in? I don’t want to load both images. I don’t want to load the wrong one – the one the user doesn’t see. I can’t win.

This is the problem.

srcset and sizes

Retina images cause a problem with the one/two alternate images you might have.

Now consider srcset and sizes. You could have tens of images. How will the browser know which one to preload?

Picture tag

Another – and thankfully the last – problem. You’re using the <picture> tag to offer the image in different formats.

How does the browser know which one to load?

There isn’t actually a fix for this last one. Pick the format most users will encounter.

Preloading reponsive images

Thankfully there is a fix for the different sized images (if not for different formats).

Before we begin, the preloading approach is supported in Chromium-based browsers (listed below) and not Firefox or Safari (which is annoying).

  • Google Chrome
  • Microsoft Edge

Retina/pixel-density only

I’ve started off with this example because it’s much easier to understand.

<link rel="preload" as="image" href="important_image@1.jpg" imagesrcset="important_image@1.jpg 1x, important_image@2.jpg 2x">
<img src="important_image@1.jpg" srcset="important_image@1.jpg 1x, important_image@2.jpg 2x">

So that’s actually quite easy. If the more pixel-dense important_image@2.jpg image is used, that’s preloaded, if it’s important_image@1.jpg then that is loaded.

srcset and sizes

Here’s how to preload different sized images.

<link
	rel="preload"
	as="image"
	href="image-300.jpg"
	imagesrcset="image-300.jpg 300w, image-600.jpg 600w, image-750.jpg 750w, image-1000.jpg 1000w, image-1500.jpg 1500w, image-2000.jpg 2000w"
	imagesizes="(min-width: 900px) 1000px, (min-width: 600px) 750px, 300px"
>
<img
	src="image-300.jpg"
	sizes="(min-width: 900px) 1000px, (min-width: 600px) 750px, 300px"
	srcset="image-300.jpg 300w, image-600.jpg 600w, image-750.jpg 750w, image-1000.jpg 1000w, image-1500.jpg 1500w, image-2000.jpg 2000w"
/>

Simple rules to create your <link> preload tag. Copy the attributes from your <img> tag to the <link> tag using the table below.

imglink
srchref
sizesimagesizes
srcsetimagesrcset

Different formats using picture tag

I’m sorry, you can’t yet preload on this basis. I recommend preloading the formats most of your users will encounter.

So do prioritise WebP over JPEG, for example.

AVIF is now supported by Safari on macOS and iOS since September 2022 – perhaps this should be the format of choice from now on.

Share