Question

我正在开发的网页上使用srcset属性。

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 1200w, 
    img/picture-374x226.jpg 992w, 
    img/picture-305x185.jpg 768w, 
    img/picture-707x428.jpg 300w" />

如果我检查哪些资源加载了页面，我看到Chrome 41以及使用polyfill和Safari 7的FF总是加载图像两次 - 一次是完整分辨率，一次是来自srcset属性的相应大小。我在这里做错了什么？

Answer 1

我遇到了类似的问题，我发现如果src图片不是srcset图片中提供的图片，则浏览器会加载src图片。解决方案是确保src图片网址与srcset图片网址之一匹配。

顺便一提 - 正如我所理解的那样，图像网址后面的w值应该（大致）匹配图像的宽度。这允许浏览器根据sizes属性和设备像素密度来最佳地确定要显示的图像。因此，您应该更改标记中的w值，并添加sizes属性（允许您使用媒体查询和后备，即浏览器知道渲染的图像大小，例如。(min-width: 640px) 600px, 50vw）。请考虑以下示例：

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 820w,
    img/picture-707x428.jpg 707w, 
    img/picture-374x226.jpg 374w, 
    img/picture-305x185.jpg 305w"
    sizes="100vw">

浏览器正在加载两个图像 - 一个用于srcset，一个用于src（Chrome 41等）

1 个答案: