html - 在带有 picturefill 的图像标签上同时使用 src 和 srcset 是否有效？

Question

我使用以下标记已有一段时间了:

<img src="lowresImage.jpg" srcset="lowresImage.jpg, highresImage.jpg 2x" alt="Lorem Ipsum">

这与 picturefill ( http://scottjehl.github.io/picturefill/ ) 配合得非常完美，不会出现任何跨客户端问题。

我只是想知道是否有人可以确认这是支持使用内联视网膜图像的有效标记。我使用它的原因如下:

1. 图像是内容的一部分，因此不能使用背景图像。
2. Google 没有索引 srcset-attribute，但确实索引了 src-attribute，这就是我同时使用两者的原因。所以这主要是 SEO 的考虑。
3. 就我对此进行的测试而言，我还没有发现浏览器发送双重 HTTP 请求。它在普通桌面上请求 src-image，在视网膜显示器上请求 srcset-retina (2x) 图像。

我几乎找不到任何关于将 src 与 srcset 和 picturefill 一起用于 SEO 和 retina-display 的信息。所以如果这个标记没有缺陷，那么我希望更多的人可以使用这种方法来制作响应式和 SEO 友好的图像。

Answer 1

是的，它是有效的。如果浏览器不支持 srcset，则 src 用作后备。

但是，如果您只是将它用于视网膜的东西，那么您实际上并不需要使用 picturefill。如果浏览器不支持 srcset，我倾向于让它退化回正常的 src。

srcset 应该只是为 src 图像提供替代尺寸和分辨率，这就是谷歌不会读取它的原因。

我已经这样使用了几个月，没有发现任何问题。

附带说明，如果您缓存了较大的图像，它将使用该图像而不是较小的图像。它非常聪明和酷。

这里有一些关于 srcset 的好文章。

https://ericportis.com/posts/2014/srcset-sizes/

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/