Make <img> src attribute optional if srcset is present

[foolip]

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element currently requires:

The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

and

The srcset attribute may also be present, and is a srcset attribute.

In other words, a validator should complain about an img element with a srcset attribute but no src, and https://validator.nu/ does.

However, it's not clear why it's important to require putting one source in the src attribute, instead of putting them all in srcset. The processing model deals with src being missing:

• In update the source set, default source will remain the empty string
• In create a source set, if default source is the empty string, obviously there's nothing to add to source set

In other words, omitting src works just fine in practice.

When srcset was new it made sense to require a src, but now srcset has been supported everywhere for many years:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset#browser_compatibility

Is it time to make src optional and not require sending unused markup like this?

[foolip]

How about just doing what the validator says? Unfortunately, it's not as simple as taking one of the srcset URLs and putting into src, because it's not necessarily the case that one of them has a pixel density of 1. This is especially likely if you have a bunch of sizes encoded, and then the layout size changes slightly. So the only option is to put something into srcset which won't be used, for example like this:

<img src="cat-100w.jpg" srcset="cat-100w.jpg 100w, cat-200w.jpg 200w, cat-300w.jpg 300w">

Doing extra work to add a src attribute while ensuring it's not going to have any effect is weird, IMHO.

cc @zcorpan

Edit: fix typo, use w instead of px

[Kaiido]

Glad you opened this. This was asked recently on StackOverflow and I meant to open that issue to see if I missed something.
I am not an srcset specialist and thus was wondering if there exists a situation where the srcset attribute could be set but ignored. It seems at some point in the early history it was for detached elements, but that's not the case anymore, and I couldn't find such a situation with the current specs.

To be noted, there is #4478 which was already asking for some update around here.

Also I was wondering about the <picture><source srcset="..."><img></picture> case, doesn't it boil to the same situation?

[foolip]

@Kaiido can you elaborate on the <picture> case, do you mean if the <img> child should be optional?

[Kaiido]

I meant that the <img>'s src attribute and the srcset may also be optional in the case the <img> source image is set by a <source> element, but maybe it's not the case?

To be thorough, maybe I extrapolated a bit, but I was initially thinking that this could be handled by defining something like an "image source attribute", which would be either the srcset attribute, or the src attribute. But then it occurred to me that this <picture> case can also participate in the <img>'s image-source, and I thought it would be better for this new "image source attribute" to also encompass this so that both concepts somehow overlap. Thus it would actually become either the srcset attribute, or the src attribute, or the srcset attribute of a sibling <source> element if <img> is a child of a <picture> element.
But that might make things a lot more complicated, and once again, maybe I just completely digressed in my thought path and you had something a lot more simpler in mind.

[zcorpan]

First, when using width descriptors, which seems to be the case here (assuming you mean w instead of px in your example), the src attribute is not added to the source set as a candidate. See https://html.spec.whatwg.org/multipage/images.html#create-a-source-set step 4

The reason it's required is for backwards compatibility with old browsers and other UAs (e.g. search engines) that don't implement srcset or picture. This is explained in the introduction here https://html.spec.whatwg.org/multipage/images.html#introduction-3:viewport-based-selection-2

For backwards compatibility, one of the URLs is specified in the img element's src attribute. In new user agents, the src attribute is ignored when the srcset attribute uses w descriptors.

However, srcset has now existed in the spec for over a decade and picture almost a decade, we could indeed revisit this requirement. What is the current status for non-browser image-fetching UAs?

[foolip]

assuming you mean w instead of px in your example

Yes, updated. I did use w correctly in all my testing, just not when simplifying it into an example :)

What is the current status for non-browser image-fetching UAs?

I've accidentally deployed my personal website without src attributes before realizing this problem. Are there UAs I can test to answer this question? If I see GoogleBot fetching images, does that answer the question?

[zcorpan]

GoogleBot seems useful to test, yeah. Also Bing.

[annevk]

https://annevankesteren.nl/about has not used src for quite a while now. I agree it should be optional. I don't think we necessarily need to research non-compliant user agents exhaustively here. The developer ergonomics win is worth it.

[foolip]

@annevk can you tell if GoogleBot or Bing has picked up any images you have in srcset only? My own changes are much more recent so I can't be confident they come from my current site.

[annevk]

@foolip I'm not sure how I would go about testing that. But that image there has been like that for years (at some point I replaced a 2x with a 3x).

[foolip]

@annevk I see, I assumed the sizes and URLs would be different and you could tell from that.

[zcorpan]

Findings: Google image search seemingly doesn't find srcset-only images, but Bing does.

Method: I ran a query in httparchive (results).

https://www.expertcloud.info/

<img class="_2BnAI _3vJf2" style="width:100%" draggable="false" srcSet="https://jimdo-storage.freetls.fastly.net/image/115918718/29c7687f-b7dd-4c2b-bd5d-8b70d3da32c5.png?quality=80&amp;auto=webp&amp;disable=upscale&amp;width=320&amp;height=92&amp;trim=0,0,0,0 320w, https://jimdo-storage.freetls.fastly.net/image/115918718/29c7687f-b7dd-4c2b-bd5d-8b70d3da32c5.png?quality=80&amp;auto=webp&amp;disable=upscale&amp;width=160&amp;height=46&amp;trim=0,0,0,0 160w" sizes="(min-width:1441px) 20vw,(min-width:1281px) 30vw,(min-width:801px) 50vw,(max-width:800px) 75vw," alt="" loading="lazy"/>

• https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fwww.expertcloud.info%2F&tbm=isch&ved=2ahUKEwjmisz7sOr-AhUJtyoKHYUcAV8Q2-cCegQIABAA&oq=site%3Ahttps%3A%2F%2Fwww.expertcloud.info%2F&gs_lcp=CgNpbWcQA1DXA1jXA2DrBWgAcAB4AIABMogBXJIBATKYAQCgAQGqAQtnd3Mtd2l6LWltZ8ABAQ&sclient=img&ei=c1xbZKaFJYnuqgGFuYT4BQ&bih=994&biw=1728#imgrc=gEwM4_I-10uo2M
• https://www.bing.com/images/search?q=site%3ahttps%3a%2f%2fwww.expertcloud.info%2f&form=HDRSC3&first=1

https://thesurreyparkclinic.co.uk/

<img class="od-logo" srcset="/img/odsite-drk.svg" alt="The OD Agency | Full service design &amp; marketing agency" width="60" />

• https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fthesurreyparkclinic.co.uk%2F&tbm=isch&ved=2ahUKEwiOmvzIsur-AhXih4sKHReOCbIQ2-cCegQIABAA&oq=site%3Ahttps%3A%2F%2Fthesurreyparkclinic.co.uk%2F&gs_lcp=CgNpbWcQA1CsBVisBWC-CGgAcAB4AIABQ4gBf5IBATKYAQCgAQGqAQtnd3Mtd2l6LWltZ8ABAQ&sclient=img&ei=Il5bZI6BE-KPrgSXnKaQCw&bih=994&biw=1728
• https://www.bing.com/images/search?q=site%3Ahttps%3A%2F%2Fthesurreyparkclinic.co.uk%2F&qs=n&form=QBIR&sp=-1&lq=0&pq=site%3Ahttps%3A%2F%2Fthesurreyparkclinic.co.uk%2F&sc=0-39&cvid=46376963DB764B1FBDC132A0C526650B&ghsh=0&ghacc=0&first=1