New attributes for rel=preload LINK in Chrome 73+

For topics about current BETA or future releases, including feature requests.
Post Reply
TomHTML
Rank II - Novice
Rank II - Novice
Posts: 42
Joined: Sun Feb 04, 2018 10:19 am

New attributes for rel=preload LINK in Chrome 73+

Post by TomHTML » Mon May 27, 2019 12:44 pm

I've been using the srcset and sizes attributes on my IMG elements to allow images to load that are closer to the device viewport size and DPR. In tandem with that, I've been using rel=preload LINK elements to get the images to the page before the images are rendered, but the problem with that is every possible size that could be used must be preloaded, which is counterproductive: you only need the image that will, in fact, be used to be preloaded. Also note that this current restriction requires a separate LINK element for each image listed in the IMG srcset attribute.

Today I discovered that Google has enabled a fix for that in Chrome that's been active since Chrome 73:

https://www.chromestatus.com/feature/5164259990306816

See the source code at the demo linked at the article:

https://irori.github.io/imagesrcset-demo/

Code: Select all

<link rel="preload" as="image" href="640.png" imagesrcset="640.png 640w, 800.png 800w, 1024.png 1024w" imagesizes="100vw">
It's essentially everything that you'd add to the corresponding IMG element (the example code doesn't even both including an IMG tag), with a few of the attributes renamed; this way, you only need one rel=preload LINK for every IMG with srcset.

I tried it out and it worked well...Chrome ceased barking at me that I had preloaded images I hadn't put to use.

However, it's not yet standardized, and both the CSS HTML validator and the W3 validator do not recognize the attributes as valid.

I'm torn about using it in production. Thoughts?

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3445
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: New attributes for rel=preload LINK in Chrome 73+

Post by Albert Wiersch » Mon May 27, 2019 1:11 pm

Hello Tom,

The "imagesrcset" attribute and the "imagesizes" attribute are now listed here:
https://html.spec.whatwg.org/multipage/ ... nk-element

I will add them to CSS HTML Validator in the next update.

Please let me know if you find anything else that could use an update. Thanks!
Image
Albert Wiersch

Post Reply