On the other hand you could just img { width: 100%; height: auto; } and still have more performance than websites that just send uncompressed PNGs in the hero.
What a lovely story. Sad to see the others don't like it.
The most incredible thing is that a group of enthousiasts can join in the standards making process and actually move companies as big as Google and Apple. Even just a tiny bit.
>A few weeks ago, two patches landed in Gecko and WebKit… aligning [them] with Blink in supporting a relatively recent addition to the HTML specification: support for an auto value in sizes attributes.
>[T]he central issue with srcset/sizes was one of timing: a browser makes decisions about image requests long before it has any information about the page's layout… That assumption is… still the default behavior: if there’s an img in your markup, the request it triggers will be fired off long before any information about the layout can be known
>[T]hat is, unless that image uses the loading="lazy" attribute… [which] changes that entire equation — now those images are requested at the point of user interaction, long after the browser has all the information it needs about the sizes of the rendered image.
The mdn page is https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageEl... but what the mdn examples don't include is that the auto attribute can be used in addition to a specified sizes fallback. The Piccalilli article discusses this and includes example markup.
13 comments
[ 2.8 ms ] story [ 36.1 ms ] threadhttps://trekhleb.dev/js-image-carver/
<img loading="lazy" src="TrIZjHKy9-650.jpeg" srcset="GTrIZjHKy9-650.jpeg 650w, GTrIZjHKy9-960.jpeg 960w, GTrIZjHKy9-1400.jpeg 1400w" sizes="auto, (min-width: 1040px) 650px, calc(94.44vw - 15px)" alt="…">
IMHO, feels more like a polyfill than a final industry solution.
Bro you just spewed 2 long paragraphs about picture at me. Don’t talk to me like that.
The most incredible thing is that a group of enthousiasts can join in the standards making process and actually move companies as big as Google and Apple. Even just a tiny bit.
>A few weeks ago, two patches landed in Gecko and WebKit… aligning [them] with Blink in supporting a relatively recent addition to the HTML specification: support for an auto value in sizes attributes.
>[T]he central issue with srcset/sizes was one of timing: a browser makes decisions about image requests long before it has any information about the page's layout… That assumption is… still the default behavior: if there’s an img in your markup, the request it triggers will be fired off long before any information about the layout can be known
>[T]hat is, unless that image uses the loading="lazy" attribute… [which] changes that entire equation — now those images are requested at the point of user interaction, long after the browser has all the information it needs about the sizes of the rendered image.
The mdn page is https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageEl... but what the mdn examples don't include is that the auto attribute can be used in addition to a specified sizes fallback. The Piccalilli article discusses this and includes example markup.