 Barry Pollard [X](https://twitter.com/tunetheweb) [GitHub](https://github.com/tunetheweb) [Mastodon](https://mastodon.social/@tunetheweb) [Bluesky](https://bsky.app/profile/tunetheweb.com) [Homepage](https://www.tunetheweb.com)  Yoav Weiss [X](https://twitter.com/yoavweiss) [GitHub](https://github.com/yoavweiss)
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
- ' d='M96 183a64 64 0 0 1-23-23L17 64a128 128 0 0 0 111 192l55-96a64 64 0 0 1-87 23Z'/%3E%3Cpath fill='url(%23b)' d='M192 128a64 64 0 0 1-9 32l-55 96A128 128 0 0 0 239 64H128a64 64 0 0 1 64 64Z'/%3E%3Ccircle cx='128' cy='128' r='52' fill='%231a73e8'/%3E%3Cpath fill='url(%23c)' d='M96 73a64 64 0 0 1 32-9h111a128 128 0 0 0-222 0l56 96a64 64 0 0 1 23-87Z'/%3E%3C/svg%3E)
- ' xlink:href='%23A'%3E%3Cstop offset='.76' stop-opacity='0'/%3E%3Cstop offset='.95' stop-opacity='.5'/%3E%3Cstop offset='1'/%3E%3C/radialGradient%3E%3CradialGradient id='F' cx='2523' cy='4680' r='20243' gradientTransform='matrix(-.03715 .99931 -2.12836 -.07913 13579 3530)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2335c1f1'/%3E%3Cstop offset='.11' stop-color='%2334c1ed'/%3E%3Cstop offset='.23' stop-color='%232fc2df'/%3E%3Cstop offset='.31' stop-color='%232bc3d2'/%3E%3Cstop offset='.67' stop-color='%2336c752'/%3E%3C/radialGradient%3E%3CradialGradient id='G' cx='24247' cy='7758' r='9734' gradientTransform='matrix(.28109 .95968 -.78353 .22949 24510 -16292)' xlink:href='%23A'%3E%3Cstop offset='0' stop-color='%2366eb6e'/%3E%3Cstop offset='1' stop-color='%2366eb6e' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cpath id='H' d='M24105 20053a9345 9345 0 01-1053 472 10202 10202 0 01-3590 646c-4732 0-8855-3255-8855-7432 0-1175 680-2193 1643-2729-4280 180-5380 4640-5380 7253 0 7387 6810 8137 8276 8137 791 0 1984-230 2704-456l130-44a12834 12834 0 006660-5282c220-350-168-757-535-565z'/%3E%3Cpath id='I' d='M11571 25141a7913 7913 0 01-2273-2137 8145 8145 0 01-1514-4740 8093 8093 0 013093-6395 8082 8082 0 011373-859c312-148 846-414 1554-404a3236 3236 0 012569 1297 3184 3184 0 01636 1866c0-21 2446-7960-8005-7960-4390 0-8004 4166-8004 7820 0 2319 538 4170 1212 5604a12833 12833 0 007684 6757 12795 12795 0 003908 610c1414 0 2774-233 4045-656a7575 7575 0 01-6278-803z'/%3E%3Cpath id='J' d='M16231 15886c-80 105-330 250-330 566 0 260 170 512 472 723 1438 1003 4149 868 4156 868a5954 5954 0 003027-839 6147 6147 0 001133-850 6180 6180 0 001910-4437c26-2242-796-3732-1133-4392-2120-4141-6694-6525-11668-6525-7011 0-12703 5635-12798 12620 47-3654 3679-6605 7996-6605 350 0 2346 34 4200 1007 1634 858 2490 1894 3086 2921 618 1067 728 2415 728 2952s-271 1333-780 1990z'/%3E%3Cuse fill='url(%23B)' xlink:href='%23H'/%3E%3Cuse fill='url(%23D)' opacity='.35' xlink:href='%23H'/%3E%3Cuse fill='url(%23C)' xlink:href='%23I'/%3E%3Cuse fill='url(%23E)' opacity='.4' xlink:href='%23I'/%3E%3Cuse fill='url(%23F)' xlink:href='%23J'/%3E%3Cuse fill='url(%23G)' xlink:href='%23J'/%3E%3C/svg%3E)
- ' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%239059ff' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%238c4ff3' stop-opacity='.1'/%3E%3Cstop offset='.8' stop-color='%237716a8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%236e008b' stop-opacity='.6'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-g' cx='239.1' cy='34.6' r='171.6' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ffe226'/%3E%3Cstop offset='.1' stop-color='%23ffdb27'/%3E%3Cstop offset='.3' stop-color='%23ffc82a'/%3E%3Cstop offset='.5' stop-color='%23ffa930'/%3E%3Cstop offset='.7' stop-color='%23ff7e37'/%3E%3Cstop offset='.8' stop-color='%23ff7139'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-h' cx='374' cy='-74.3' r='732.2' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-i' cx='304.6' cy='7.1' r='536.4' gradientTransform='rotate(84 303 4)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.3' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.6' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-j' cx='235' cy='98.1' r='457.1' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.5' stop-color='%23ff980e'/%3E%3Cstop offset='.6' stop-color='%23ff5634'/%3E%3Cstop offset='.7' stop-color='%23ff3647'/%3E%3Cstop offset='.9' stop-color='%23e31587'/%3E%3C/radialGradient%3E%3CradialGradient id='ff-k' cx='355.7' cy='124.9' r='500.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.2' stop-color='%23ffe141'/%3E%3Cstop offset='.5' stop-color='%23ffaf1e'/%3E%3Cstop offset='.6' stop-color='%23ff980e'/%3E%3C/radialGradient%3E%3ClinearGradient id='ff-a' x1='446.9' y1='76.8' x2='47.9' y2='461.8' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.1' stop-color='%23fff44f'/%3E%3Cstop offset='.1' stop-color='%23ffe847'/%3E%3Cstop offset='.2' stop-color='%23ffc830'/%3E%3Cstop offset='.4' stop-color='%23ff980e'/%3E%3Cstop offset='.4' stop-color='%23ff8b16'/%3E%3Cstop offset='.5' stop-color='%23ff672a'/%3E%3Cstop offset='.5' stop-color='%23ff3647'/%3E%3Cstop offset='.7' stop-color='%23e31587'/%3E%3C/linearGradient%3E%3ClinearGradient id='ff-l' x1='442.1' y1='74.8' x2='102.6' y2='414.3' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.2' stop-color='%23fff44f' stop-opacity='.8'/%3E%3Cstop offset='.3' stop-color='%23fff44f' stop-opacity='.6'/%3E%3Cstop offset='.5' stop-color='%23fff44f' stop-opacity='.2'/%3E%3Cstop offset='.6' stop-color='%23fff44f' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134a120 120 0 0 0-66 25 71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a229 229 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zM202 355l3 1-3-1zm55-145zm198-31z' fill='url(%23ff-a)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-b)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60 14 26 22 53 25 72v1a207 207 0 0 1-206 279c-113-3-212-87-231-197-3-17 0-26 2-40-2 11-3 14-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121z' fill='url(%23ff-c)'/%3E%3Cpath d='m362 195 1 1a130 130 0 0 0-22-29C266 92 322 5 331 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62z' fill='url(%23ff-d)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-e)'/%3E%3Cpath d='M257 210c-1 6-22 26-29 26-68 0-80 41-80 41 3 35 28 64 57 79l4 2 7 3a107 107 0 0 0 31 6c120 6 143-143 57-186 22-4 45 5 58 14-21-37-60-62-105-62l-9 1a120 120 0 0 0-66 25l17 16c16 16 58 33 58 35z' fill='url(%23ff-f)'/%3E%3Cpath d='m171 151 5 3a111 111 0 0 1-1-58c-25 11-44 29-58 44 1 0 36 0 54 11z' fill='url(%23ff-g)'/%3E%3Cpath d='M18 261a242 242 0 0 0 231 197 207 207 0 0 0 206-279c8 56-20 110-64 146-86 71-169 43-186 31l-3-1c-50-24-71-70-67-110-42 0-57-35-57-35s38-28 89-4c46 22 90 4 90 4 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5l-5-3c-18-11-52-11-54-11-9-12-9-51-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73c0 1-9 38-5 57z' fill='url(%23ff-h)'/%3E%3Cpath d='M341 167a130 130 0 0 1 22 29 46 46 0 0 1 4 3c55 50 26 121 24 126 44-36 72-90 64-146-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-9 5-65 92 10 167z' fill='url(%23ff-i)'/%3E%3Cpath d='M367 199a46 46 0 0 0-4-3l-1-1c-13-9-36-18-58-15 86 44 63 193-57 187a107 107 0 0 1-31-6 131 131 0 0 1-11-5c17 12 99 39 186-31 2-5 31-76-24-126z' fill='url(%23ff-j)'/%3E%3Cpath d='M148 277s12-41 80-41c7 0 28-20 29-26s-44 18-90-4c-51-24-89 4-89 4s15 35 57 35c-4 40 16 85 67 110l3 1c-29-15-54-44-57-79z' fill='url(%23ff-k)'/%3E%3Cpath d='M479 166c-11-25-32-52-49-60a249 249 0 0 1 25 73c-27-68-73-95-111-155a255 255 0 0 1-8-14 44 44 0 0 1-4-9 1 1 0 0 0 0-1 1 1 0 0 0-1 0c-60 35-81 101-83 134l9-1c45 0 84 25 105 62-13-9-36-18-58-14 86 43 63 192-57 186a107 107 0 0 1-31-6 131 131 0 0 1-11-5l-3-1 3 1c-29-15-54-44-57-79 0 0 12-41 80-41 7 0 28-20 29-26 0-2-42-19-58-35l-17-16a71 71 0 0 0-6-5 111 111 0 0 1-1-58c-25 11-44 29-58 44-9-12-9-52-8-60l-8 4a175 175 0 0 0-24 21 210 210 0 0 0-22 26 203 203 0 0 0-32 73l-1 2-2 15a279 279 0 0 0-4 34v1a240 240 0 0 0 477 40l1-9c5-41 0-84-15-121zm-24 13z' fill='url(%23ff-l)'/%3E%3C/svg%3E)
- ' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-color='%2324a5f3' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%231e8ceb' /%3E%3C/radialGradient%3E%3CradialGradient id='s-j' cx='109.3' cy='13.8' r='93.1' gradientTransform='matrix(-.02 1.1 -1.04 -.02 137 -115)' xlink:href='%23s-b'%3E%3Cstop offset='0' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235488d6' stop-opacity='0' /%3E%3Cstop offset='1' stop-color='%235d96eb' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='220' height='220' x='22' y='-107' fill='url(%23s-a)' ry='49' transform='matrix(.57 0 0 .57 187 256)' /%3E%3Cg transform='translate(194 190)'%3E%3Ccircle cx='67.8' cy='67.7' fill='url(%23s-c)' paint-order='stroke fill markers' r='54' /%3E%3Ccircle cx='-69.9' cy='69.3' fill='url(%23s-i)' transform='translate(138 -2)' r='54' /%3E%3C/g%3E%3Cellipse cx='120' cy='14.2' fill='url(%23s-j)' rx='93.1' ry='93.7' transform='matrix(.58 0 0 .58 192 250)' /%3E%3Cg transform='matrix(.58 0 0 .57 197 182)'%3E%3Cpath fill='%23cac7c8' d='M46 192h1l72-48-7-9-66 57Z' /%3E%3Cpath fill='%23fbfffc' d='M46 191v1l66-57-7-9-59 65Z' /%3E%3Cpath fill='url(%23s-d)' d='m119 144-7-9 66-57-59 66Z' /%3E%3Cpath fill='%23fb645c' d='m105 126 7 9 66-57-1-1-72 49Z' /%3E%3C/g%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='1' stroke-width='1.3' d='m287 278 3-2m-12-17 8-2m-8-3h4m-4-13 8 2m-8 3h4m-1-13 7 3m-4-11 7 4m-2-11 6 6m0-12 6 7m1-11 4 6m4-10 3 7m5-9 2 7m15-7-1 7m10-5-3 7m11-4-4 7m11-2-5 6m16 7-7 4m10 4-7 3m10 6-8 1m8 16-8-2m5 10-7-3m4 11-7-4m2 11-6-5m0 11-5-6m-2 11-4-7m-4 11-3-8m-6 10-1-8m-16 8 2-8m-10 5 3-7m-11 4 4-7m-11 2 5-6m-8 3 3-3m4 8 2-3m5 8 2-4m6 7 1-4m8 5v-4m8 4v-4m9 3-1-4m9 1-2-4m9 0-2-4m9-2-3-3m8-4-3-2m8-5-4-2m7-6-4-1m5-8h-4m4-8h-4m3-9-4 1m1-9-4 2m-1-9-3 2m-2-9-3 3m-4-8-2 3m-5-8-2 4m-6-6-1 3m-8-5v4m-8-4v4m-9-2 1 3m-9 0 2 3m-9 1 2 3m-9 2 3 3m-8 4 3 2m-8 5 4 2m-7 6 4 1m-4 25 4-1m-2 5 7-3m-6 7 4-2m-2 6 7-4m-13-21h8m41-41v-8m0 99v-8m49-42h-8' transform='translate(-65 8)' /%3E%3C/svg%3E)
[Source](https://developer.mozilla.org/docs/Web/API/HTMLLinkElement/imageSrcset)
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](https://web.dev/articles/serve-responsive-images.md.txt#serve_multiple_image_versions)
let browsers fetch different image resources for different devices. If you don't
use an [image CDN](https://web.dev/articles/image-cdns.md.txt), 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:
```html
[Preloading](https://web.dev/articles/preload-critical-assets.md.txt) 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.
```html
[!IMPORTANT]
> **Important:** Preloaded images are presumably high priority and so should include the `fetchpriority="high"` attribute as otherwise the preload will get the default priority for the `as` attribute. For images this is `low` by default so the browser can prioritise render-blocking content over images. See [Optimize resource loading with the Fetch Priority API](https://web.dev/articles/fetch-priority.md.txt) for more details.
## `imagesrcset` and `imagesizes`
The `` element uses the `imagesrcset` and `imagesizes` attributes to
preload responsive images. Use them alongside
``, with the `srcset` and `sizes` syntax used in the
`` element.
For example, if you want to preload a responsive image specified with:
```html
ot;50vw" alt="A rad wolf"
```
You can do that by adding the following to your HTML's ``:
```html
; imagesizes="50vw" fetchpriority="high"
```
This initiates a request using the same resource selection logic that
`srcset` and `sizes` use.
> [!WARNING]
> **Warning:** Responsive images may not be supported for HTTP header preloads as the viewport is only defined when the document is created. This also means they [cannot be used for early preloading in 103 Early Hints](https://developer.chrome.com/docs/web-platform/early-hints#current-limitations).
>
> Some browsers, such as Chrome, do process the preloads with those attributes once the document is defined and after processing the first chunk of HTML. This [has been proposed to the HTML standard](https://github.com/whatwg/html/issues/7873). However, this can still be risky if the viewport is redefined later in the document (for example, a late `` element) as the wrong responsive images may already have started loading.
>
> To avoid any issues, it is recommended to use `` elements for responsive images rather than `Link: <...>; rel="preload"` HTTP response headers.
## 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](https://responsive-preload.glitch.me/no_preload.html) 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.
 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.
 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](https://responsive-preload.glitch.me/preload.html)
by following the steps from the first example.
> [!NOTE]
> **Note:** Another way to avoid delays in image loading is using a markup-based carousel and having the [browser's preloader](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/) pick up the required resources. However, this approach isn't always practical, for example, if you're reusing an existing component that isn't markup-based.
### 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](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio).
```css
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
```
> [!NOTE]
> **Note:** This syntax ignores this feature's need for vendor prefixes in both Chromium and WebKit-based browsers. If you're planning to use this feature, consider using [Autoprefixer](https://github.com/postcss/autoprefixer) ([available as an online tool](https://goonlinetools.com/autoprefixer/)) to address that automatically.
The problem with CSS background images is that the browser discovers them
only after it has downloaded and processed all the CSS in the page's ``.
You can inspect this issue on an example website with a
[responsive background image](https://responsive-preload.glitch.me/background_no_preload.html).
 In this example, the image download doesn't start until the CSS is fully downloaded, causing unnecessary lag to the image's display.
Responsive image preloading lets you load those images faster.
```html
` element, but do support `image-set` in
CSS download the correct source. However, they won't benefit from the preload in
this case.
You can inspect how the previous example behaves with a preloaded responsive
background image in [the responsive background preload demo](https://responsive-preload.glitch.me/background_preload.html).
 Here the image and CSS start downloading at the same time, letting the image load faster.
## Practical effects of preloading responsive images
Preloading your responsive images can speed them up in theory, but what does it
do in practice?
To answer that I created two copies of a [demo PWA shop](https://github.com/GoogleChromeLabs/sample-pie-shop):
[one that doesn't preload images](https://20190710t144416-dot-pie-shop-app.appspot.com/apparel),
and [one that preloads some of them](https://20190710t132936-dot-pie-shop-app.appspot.com/apparel).
Because the site lazy loads images using JavaScript, it's likely to benefit from
preloading the ones that appear in the initial viewport.
That produced the following results for
[no preload](https://www.webpagetest.org/result/190710_VM_30b9d4c993a1e60befba17e1261ba1ca/)
and for [image preload](https://www.webpagetest.org/result/190710_7B_a99e792121760f81a270b4b9c847797b/):
- [Start Render](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/getting-started.md#start-render) stayed the same.
- [Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index) improved slightly (273 ms, as images arrive faster don't take up a huge chunk of the pixel area).
- [Last Painted Hero](https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md) improved significantly, by 1.2 seconds.
 Images arrive significantly faster when preloaded, greatly improving the user experience.
## Preload and ``
The Web Performance Working Group is discussing adding a preload equivalent for
`srcset` and `sizes`, but not the [``](https://developer.mozilla.org/docs/Web/HTML/Element/picture)
element, which handles the ["art direction"](https://web.dev/articles/codelab-art-direction.md.txt)
use case.
There are still a number of [technical issues to sort out](https://calendar.perfplanet.com/2018/how-the-sausage-is-made-webperfwg-meeting-summary/) for preloading ``,
but in the meantime, there are workarounds:
```html
8<00px)&qu>ot;
img src="large_cat.jpg"
/picture
```
The `` element's image source selection logic goes over the `media`
attributes of the `` elements in order, finds the first one that
matches, and uses the attached resource.
Because responsive preload has no notion of "order" or "first match", you'll
need to translate the breakpoints into something like the following:
```html
link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)" fetchpriority="high"
```
### Preload and `type`
The `` element also supports matching on the first `type`, to let you provide different image formats so the browser can pick the first image format it supports.
This use case is only partially supported with preload: browsers should only download preloads for supported types. So you can use this to prevent browsers preloading unsupported mimetypes types by including this in the preload:
```html
s="image" fetchpriority="high"
```
However, unlike `` it won't stop at the first supported type. So if multiple preloads are included for multiple types, then all the images will be preloaded:
Don't do this --- preload multiple types:
```html
s<="image" fetchpriority="high"
link rel="preload" href=>"image.jpg" type="image/jpg" as="image" fetchpriority="high"
```
Instead do this --- preload the most preferred type:
```html
s="image" fetchpriority="high"
```
Preloading the newest format (AVIF in this case) acts as as a progressive enhancement, where browsers supporting that type will benefit and other browsers won't benefit from the preload.
For sites where the image is quickly discoverable in the HTML, we recommend avoiding preload, and instead having the [preload scanner](https://web.dev/articles/preload-scanner.md.txt) pick up the images from the `` and `` elements instead. This is a best practice anyway, especially when using [Fetch Priority](https://web.dev/articles/fetch-priority.md.txt) for help prioritizing the appropriate image, as it allows the exact image to be preloaded based on browser support. It also removes the risk of a preload becoming outdated from the main markup when images or pages change.
## Effects on Largest Contentful Paint (LCP)
Because images can be [Largest Contentful Paint (LCP) candidates](https://web.dev/articles/lcp.md.txt#what-elements-are-considered),
preloading them can improve your website's LCP.
Regardless of whether the image you're preloading is responsive, preloads work
best when the image resource isn't discoverable in the initial markup payload.
You'll also get more LCP improvement on sites that render markup on the client
side than on sites that send complete markup from the server.
[Preloading](https://web.dev/articles/preload-critical-assets.md.txt) 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.
```html
[!IMPORTANT]
> **Important:** Preloaded images are presumably high priority and so should include the `fetchpriority="high"` attribute as otherwise the preload will get the default priority for the `as` attribute. For images this is `low` by default so the browser can prioritise render-blocking content over images. See [Optimize resource loading with the Fetch Priority API](https://web.dev/articles/fetch-priority.md.txt) for more details.
## `imagesrcset` and `imagesizes`
The `` element uses the `imagesrcset` and `imagesizes` attributes to
preload responsive images. Use them alongside
``, with the `srcset` and `sizes` syntax used in the
`
ot;50vw" alt="A rad wolf"
```
You can do that by adding the following to your HTML's ``:
```html
; imagesizes="50vw" fetchpriority="high"
```
This initiates a request using the same resource selection logic that
`srcset` and `sizes` use.
> [!WARNING]
> **Warning:** Responsive images may not be supported for HTTP header preloads as the viewport is only defined when the document is created. This also means they [cannot be used for early preloading in 103 Early Hints](https://developer.chrome.com/docs/web-platform/early-hints#current-limitations).
>
> Some browsers, such as Chrome, do process the preloads with those attributes once the document is defined and after processing the first chunk of HTML. This [has been proposed to the HTML standard](https://github.com/whatwg/html/issues/7873). However, this can still be risky if the viewport is redefined later in the document (for example, a late `` element) as the wrong responsive images may already have started loading.
>
> To avoid any issues, it is recommended to use `` elements for responsive images rather than `Link: <...>; rel="preload"` HTTP response headers.
## 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](https://responsive-preload.glitch.me/no_preload.html) 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.
 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.
 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](https://responsive-preload.glitch.me/preload.html)
by following the steps from the first example.
> [!NOTE]
> **Note:** Another way to avoid delays in image loading is using a markup-based carousel and having the [browser's preloader](https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/) pick up the required resources. However, this approach isn't always practical, for example, if you're reusing an existing component that isn't markup-based.
### 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](https://developer.mozilla.org/docs/Web/API/Window/devicePixelRatio).
```css
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
```
> [!NOTE]
> **Note:** This syntax ignores this feature's need for vendor prefixes in both Chromium and WebKit-based browsers. If you're planning to use this feature, consider using [Autoprefixer](https://github.com/postcss/autoprefixer) ([available as an online tool](https://goonlinetools.com/autoprefixer/)) to address that automatically.
The problem with CSS background images is that the browser discovers them
only after it has downloaded and processed all the CSS in the page's ``.
You can inspect this issue on an example website with a
[responsive background image](https://responsive-preload.glitch.me/background_no_preload.html).
 In this example, the image download doesn't start until the CSS is fully downloaded, causing unnecessary lag to the image's display.
Responsive image preloading lets you load those images faster.
```html
` element, but do support `image-set` in
CSS download the correct source. However, they won't benefit from the preload in
this case.
You can inspect how the previous example behaves with a preloaded responsive
background image in [the responsive background preload demo](https://responsive-preload.glitch.me/background_preload.html).
 Here the image and CSS start downloading at the same time, letting the image load faster.
## Practical effects of preloading responsive images
Preloading your responsive images can speed them up in theory, but what does it
do in practice?
To answer that I created two copies of a [demo PWA shop](https://github.com/GoogleChromeLabs/sample-pie-shop):
[one that doesn't preload images](https://20190710t144416-dot-pie-shop-app.appspot.com/apparel),
and [one that preloads some of them](https://20190710t132936-dot-pie-shop-app.appspot.com/apparel).
Because the site lazy loads images using JavaScript, it's likely to benefit from
preloading the ones that appear in the initial viewport.
That produced the following results for
[no preload](https://www.webpagetest.org/result/190710_VM_30b9d4c993a1e60befba17e1261ba1ca/)
and for [image preload](https://www.webpagetest.org/result/190710_7B_a99e792121760f81a270b4b9c847797b/):
- [Start Render](https://github.com/WPO-Foundation/webpagetest-docs/blob/main/src/getting-started.md#start-render) stayed the same.
- [Speed Index](https://developer.chrome.com/docs/lighthouse/performance/speed-index) improved slightly (273 ms, as images arrive faster don't take up a huge chunk of the pixel area).
- [Last Painted Hero](https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md) improved significantly, by 1.2 seconds.
 Images arrive significantly faster when preloaded, greatly improving the user experience.
## Preload and `