I'm writing a React based app that uses SSR to generate content suitable for search engines and the initial client load, and using React.hydrate() on the client. All good.
On pages with tags, I'm using both src, srcSet and sizes attributes on img to allow the client to choose an appropriate image size. Again, all good.
However, at least in Safari, when both src and srcSet are used, the src resource is loaded as well as the relevant srcSet resource. I can see this in the browser network inspector. Removing the src attribute causes the browser to only load one of the srcSet resources.
Whilst I can fix the client, it means that the img tags are incomplete in respect of search engine crawlers, no src attribute. I'm assuming that crawlers don't use srcSet but I guess they could do. I could make the img tag more complete by using a data URI for the src attribute that has an empty SVG or 1x1 GIF/PNG, but this doesn't help with ensuring that crawlers can access an appropriate resolution image resource. The nature of the website suggests at least that image resources should be locatable on search engines, as a way of drawing visitors to appropriate content.
I've looked at several lazy loading React components and they all appear to suffer from some combination of this problem or other.
Does anyone know if this is a Safari specific bug, or is there a general solution to SSR of images whilst lazy loading on the client? Ideally, what's the preferred mix of src, srcSet and sizes on SSR generated code that doesn't invoke sub-optimal client side behaviour?
NB: Lazy load is desirable as its an image gallery/index page with lots of images, and mobile/low bandwidth is a key demographic.
