From #3752 (comment)

@r00dY I believe what you're asking for is essentially the data-sizes="auto" feature in lazySizes. I think this has been discussed before (maybe somewhere in https://github.com/ResponsiveImagesCG/picture-element/issues ), though I can't find it now. It was blocked on native lazy loading, but that is being introduced in this PR, so you're right that it is good timing to revisit "auto sizes".

The idea with sizes is:

• browsers need to start loading critical images as early as possible; waiting for external CSS would regress page loading time
• the browser is in a better position to make a decision on which image to load, given a list of images and their dimensions (srcset) + layout size of the image (sizes). https://ericportis.com/posts/2014/srcset-sizes/

The layout size information in sizes is redundant with layout information in CSS, but for images that are critical to initial paint it's necessary to have the information in the HTML.

But for lazy-loaded images, CSS will usually be available before the image load begins. The browser could take the actual width of the image as specified in CSS, and use that as if it was the image's sizes.

A syntax proposal is sizes="auto", or omitting the sizes attribute. Only allow this on loading=lazy images.

Issues:

• What should happen for loading=eager images? Use 100vw (like today)?
• What should happen for loading=auto images? Depend on whether the UA decides to load it eagerly or lazily?