我正在编写一个基于React的应用程序，该应用程序使用SSR生成适合搜索引擎和初始客户端负载的内容，并在客户端上使用React.hydrate（）。一切都很好。
在带有标签的页面上，我在img上同时使用src，srcSet和size属性，以允许客户端选择适当的图像大小。再次，一切都很好。
但是，至少在Safari中，当同时使用src和srcSet时，将加载src资源以及相关的srcSet资源。我可以在浏览器网络检查器中看到这一点。删除src属性会使浏览器仅加载srcSet资源之一。
虽然我可以修复客户端，但这意味着img标签对于搜索引擎搜寻器而言是不完整的，没有src属性。我假设爬虫不使用srcSet，但我想他们可以这样做。我可以通过将数据URI用作具有空SVG或1x1 GIF / PNG的src属性来使img标签更完整，但这无助于确保搜寻器可以访问适当的分辨率图像资源。该网站的性质表明，至少应在搜索引擎上定位图片资源，以吸引访问者使用适当的内容。
我查看了几个延迟加载的React组件，它们似乎都受到此问题或其他问题的某种组合的困扰。
有人知道这是否是Safari特定的错误，还是在客户端上延迟加载时是否有针对图像SSR的通用解决方案？理想情况下，在不调用次优客户端行为的SSR生成的代码中，src，srcSet和大小的首选组合是什么？
NB：懒惰加载是可取的，因为它是一个包含大量图像的图库/索引页面，而移动/低带宽是关键的受众特征。