Page 1 of 1

New attributes for rel=preload LINK in Chrome 73+

Posted: Mon May 27, 2019 12:44 pm
by TomHTML
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?

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

Posted: Mon May 27, 2019 1:11 pm
by Albert Wiersch
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!