How to preload responsive images with imagesizes and imagesrcset
Tags: html, performance
Published: 2020-09-11 12:12:36

---
title: How to preload responsive images with imagesizes and imagesrcset
published: true
description: Improve the loading of your responsive images by using link rel="preload" elements with the new attributes imagesrcset and imagesizes.
tags: html, performance
canonical_url: https://www.stefanjudis.com/today-i-learned/how-to-preload-responsive-images-with-imagesizes-and-imagesrcset/
---

Today I read [Addy Osmani](https://twitter.com/addyosmani)'s article [Preload late-discovered Hero images faster](https://addyosmani.com/blog/preload-hero-images/). It's a good summary of ways to preload resources if you want to adjust and improve the browser's loading behavior. The cool thing about this article; I discovered __a recently added web platform feature to help speed up the loading of responsive images__.

Let's assume you have the following responsive image in your page.

```html
<img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
     sizes="100vw" 
     alt="...">
```

The `srcset` and `sizes` attribute of this image element provide browsers with the information that it will span over the whole viewport width (`100vw`) and that it is available in three sizes ranging from 400px to 1600px. With this information, browsers can load the best-suited image without wasting high-res image data on tiny screens.

You have to consider, though, that [browsers load resources in a particular order](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf#5c44). They usually request images after critical resources like stylesheets and fonts. To change this loading order and re-prioritize resources, you can use `<link rel="preload">` elements in your document's `head` to signal that certain resources are high-priority or requested by the document soon.

```html
<!-- preload a font that will be discovered later -->
<link rel="preload" 
      href="fonts/cicle_fina-webfont.woff2" 
      as="font" 
      type="font/woff2" 
      crossorigin>
```

If you want to learn more about preloading, I recommend looking at the article [Preload: What Is It Good For?](https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/).

But how would you preload a responsive image with `sizes` and `srcset` attributes injected into the DOM later when a JavaScript component renders?

## Preload responsive images with `rel="preload"`

It turns out that [`iamgesrcset` and `imagesizes` made it into the spec](https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset). You can use these attributes on `link` elements to give browsers the information of high-priority responsive images coming with `sizes` and `srcset` attributes.

```html
<head>
  <!-- Hey browser! Please preload this important responsive image -->
  <link rel="preload"
        as="image" 
        imagesrcset="
          image-400.jpg 400w, 
          image-800.jpg 800w, 
          image-1600.jpg 1600w" 
        imagesizes="100vw">
</head>
<body>
  <img srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w"
       sizes="100vw" 
       alt="...">
</body>
```

`imagesrcset` and `imagesizes` follow the same rules as `srcset` and `sizes` on `img` elements so that you can reuse the same attribute values you use for the image itself.

### Things to consider when using `imagesrcset` and `imagesizes` on `link` elements

__`imagesizes` and `imagesrcset` only work on link elements with the attributes `rel="preload"` and `as="image"`.__ Also, __omit the `href` on the `link` element__ so that unsupporting browsers won't request a useless image because the browser loads a more suitable image.

### Browser support

There is no browser support data on caniuse.com or MDN at the time of writing. But you can look at [the Chrome status ticket for `imagesrcset` and `imagesizes`](https://www.chromestatus.com/feature/5164259990306816), and it appears that this web platform addition is currently a Chrome-only (and Edge 🙈) thing.

![Chromestatus support for imagesizes and imagesrcset](//images.ctfassets.net/f20lfrunubsq/5WkNDWaOsETcTRbn8VvTof/e75186082c936943fdd8d5cc4d671abd/Screenshot_2020-09-11_at_13.15.33.png)

Nevertheless, looking at Chrome's market share these days([roughly 70%](https://netmarketshare.com/browser-market-share.aspx)), it's something to check out! Happy preloading! 🐎

## Additional resources

- [Preload late-discovered Hero images faster](https://addyosmani.com/blog/preload-hero-images/)
- [Preloading responsive images](https://web.dev/preload-responsive-images/)
- [Spec for the `link` element](https://html.spec.whatwg.org/multipage/semantics.html#the-link-element)
- [MDN page for the `link`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)
- [Chromestatus page for `imagesizes` and `imagesrcset`](https://www.chromestatus.com/feature/5164259990306816)