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

Is it valid to use both src and srcset on an image-tag with picturefill?

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

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

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

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

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

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

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

但是,如果您仅将它用于视网膜内容,则实际上不需要使用 picturefill。如果浏览器不支持 srcset,我倾向于让它退化回正常的 src。

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

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

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

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

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

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

是的,您应该将其视为您使用的第二种(默认)字体 'in case a browser does not support/find the font'。

Is it valid to use both src and srcset on an image-tag with picturefill?

是的,是的。但是 picturefill 不推荐这样做,因为它会导致重复下载。 (有关更多说明,请参见下文。)

Google does not index the srcset-attribute, but it does index the src-attribute, which is why I use both. So this is mainly an SEO consideration.

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

As far as I have tested this, I haven't found the browser sending double HTTP-requests.

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

我的建议: 要么使用 src,但不包含 picturefill,要么省略 src 而使用 picturefill。如果您只使用带有 x 描述符的 srcset 而不是 picture 并且没有 w 描述符,我会简单地不包括 picturefill 并且只使用 src.