0

关于 Picturefill polyfill 的一些初学者问题：

当我使用src属性时，我注意到 Firefox (33) 和 Safari (7.1) 出现短暂闪烁。这些浏览器发出额外的 HTTP 请求。这是我的代码：

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w" />
  • Picturefill 不应该阻止浏览器下载不必要的图像吗？
  • 删除src属性有什么缺点吗？（我知道关闭 JS 或浏览器没有原生响应图像的人根本看不到任何图像，只会看到 alt 文本）
  • src缺少属性对 SEO 有什么影响？
4

2 回答 2

1
  1. 您只能在 chrome 和 ie 中中止图像下载，不能在 ff 或 safari 中中止。
  2. 预加载解析器看不到没有 src 的图像，规范需要 src 属性（您已经提到 JS 关闭）

一般关于您的图像标记。300和364之间的差异很小。不要认为它实际上会给你带来那么大的不同。但是，如果您想保留它，最好将它添加到 srcset 中，以便浏览器知道它的属性（并使用它，如果屏幕非常小或带宽低）。

<img src="images/300x180-1.jpg"
    alt="My alt text"
    sizes="(min-width: 768px) 364px, 100vw"
    srcset="images/364x220@2x-1.jpg 728w, images/364x220-1.jpg 364w, images/300x180-1.jpg 300w" />

您还可以尝试使用respimage，它会尝试在 IE 中中止图像下载，并在 safari/firefox 中等待更长的时间来更改源（实现低质量图像占位符技术）。此外，它还尝试通过使用更智能的资源选择来节省带宽。

于 2014-11-11T23:06:03.303 回答
0

缺少 src 属性对 SEO 有什么影响？

使用 Google 的 Fetch As Google 工具进行测试，可以看到虽然默认情况下，Google 不会索引属性中引用的文件，但如果使用 Picturefill srcset，它确实会索引它们。

我在这里写了关于 Stack Exchange Webmasters 的更全面的答案

于 2015-07-17T11:32:22.260 回答