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?