3

我一直在使用以下标记：

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

这与图片填充（http://scottjehl.github.io/picturefill/）非常完美，并且不会产生任何跨客户端问题。

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

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

我几乎找不到任何关于使用 src 以及 srcset 和 picturefill 与 SEO 和视网膜显示相关的信息。所以如果这个标记没有缺陷，那么我希望更多的人可以使用这种方法来响应和 SEO 友好的图像。

4

3 回答 3

1

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

但是，如果您仅将它用于视网膜的东西，您实际上并不需要使用图片填充。如果浏览器不支持 srcset，我倾向于让它降级回正常的 src。

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

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

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

这里有几篇关于 srcset 的好文章。

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

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

于 2015-09-03T10:11:01.243 回答
1

是的，您应该将其视为您使用的第二种（默认）字体，“以防浏览器不支持/找到该字体”。

于 2015-09-03T10:13:54.003 回答
1

在带有图片填充的图像标签上同时使用 src 和 srcset 是否有效？

是的。但是picturefill不推荐这样做，因为它会导致双重下载。（更多解释见下文。）

Google 不会索引 srcset-attribute，但会索引 src-attribute，这就是我同时使用两者的原因。所以这主要是一个SEO考虑。

基本上你不必担心这个。googlebot 类似于旧的无头 webkit 浏览器并执行 JavaScript。因此 googlebot 也被 picturefill 填充。这意味着，如果您不使用src，但包含图片填充，您的图像将被编入索引。（另见：https ://github.com/scottjehl/picturefill/issues/549#issuecomment-122538689 ）

据我测试，我还没有发现浏览器发送双重 HTTP 请求。

我假设您已经在 iOS 8 或 Android 版 Chrome/Firefox 上进行了测试。这些浏览器确实支持srcset。或者您只在 1x 设备上使用不支持的浏览器进行了测试。但是，Android 4.x Stockbrowser 不支持此功能，如果使用 2x 设备，将导致双重下载（请参阅： http ://caniuse.com/#search=srcset）。

我的建议：要么使用src，但不要包含图片填充或省略 src 并使用图片填充。如果您仅使用srcsetwith x 描述符而不使用picturew 描述符，我将根本不包括 picturefill 而仅使用src.

于 2015-09-04T11:16:31.667 回答