2 ms·
A <picture> contains a list of <source>s each corresponding to a different media query, plus a fallback <img>. A <source> contains a srcset containing a set of
by missblit 6y ago
A <picture> contains a list of <source>s each corresponding to a different media query, plus a fallback <img>.
A <source> contains a srcset containing a set of candidate images (plus hints). Unlike the media queries to determine the <source> (which the web developer has control over), the browser is allowed to choose whatever candidate image it deems most appropriate from the srcset.
So to answer your question, srcset is used because it allows for multiple candidate urls. src isn't used because it's redundant with srcset [1].
As for the more meta question about why <picture><source srcset> exists in the first place and is the way it is, this comment is a good starting point and has some links [2].
[1]
https://github.com/ResponsiveImagesCG/picture-element/issues/224 https://github.com/ResponsiveImagesCG/picture-element/issues...
[2]
https://bugs.chromium.org/p/chromium/issues/detail?id=233751#c2 https://bugs.chromium.org/p/chromium/issues/detail?id=233751...
---
The rest is just my opinion / speculation, but you have to break a few eggs to make an omelette.
The web platform is always walking an incredibly thin tightrope between backwards compat, making things more principled, addressing privacy issues, supporting new features, and addressing the wants or needs of multiple implementors or users.
A lot of the "why would anyone do things that way?!" questions start to make sense when you keep these constraints in mind and trawl through the old issue trackers / spec explainers / mailing lists.
Sure <picture> is kinda confusing compared to <img src>, but:
1. Web devs want their fancy media queries and browser hints
2. Changing src to behave like srcset might be dangerous for backwards compat reasons
3. Treating src like srcset just in the picture tag but not in the img tag would lead to just as much confusion.
And <picture> doesn't have to be used. A simple <img src> or <img srcset> is fine when it suits the developer's needs better, so I think it's fine that <picture> is a bit unwieldy in comparison.