什么是 Srcset
Srcset 是一种 HTML 图片属性，用于指定在不同场景下加载的图片列表，浏览器会依据屏幕尺寸与分辨率选择最优版本。
什么是 Srcset？
Srcset 是一种 HTML 图片属性，用于指定在不同场景下使用的图片列表。浏览器会依据屏幕尺寸与分辨率选择最优版本，这一概念称为响应式图片（responsive images）。
它看似复杂，且有多种设置方式，下面看一个真实例子：
<img srcset="ahrefs-image-480w.jpg 480w,
ahrefs-image-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
src="ahrefs-image-800w.jpg"
alt="Cool ahrefs illustration">
在此例中，srcset 告知浏览器：视口宽度小于 600 像素时加载 480 像素宽的版本，大于 600 像素时加载更大的 800 像素宽版本。
也可改用像素密度（每 CSS 像素对应的设备像素数）作为条件，而不用尺寸：
<img srcset="ahrefs-image-1x.jpg 1x,
ahrefs-image-2x.jpg 2x"
src="ahrefs-image-1x.jpg"
alt="Another cool ahrefs illustration">
Srcset 为什么对 SEO 重要？
Srcset 对 SEO 重要，因为它让浏览器根据设备特性加载最优的图片尺寸。
图片越大，文件体积越大。例如，在普通手机上加载一张 2400 像素宽、20 MB 的图片毫无意义。srcset 能节省带宽、缩短页面加载时间，而加载速度对移动搜索、桌面搜索乃至 Google 广告都是一个直接的排名因素。
响应式图片的最佳实践
1. 查看 PageSpeed Insights 的建议
PageSpeed Insights 是 Google 提供的免费在线工具，可展示页面的速度实测数据。输入网页 URL 后，它会给出网站速度优化建议，其中包括图片方面的建议。
PageSpeed Insights 针对图片的常见建议包括：更新图片格式以获得更好的压缩、对屏幕外或隐藏的图片采用懒加载，以及为图片设置恰当尺寸以改善加载时间。
2. 使用 Picture 元素进行艺术指导（art direction）
“picture”元素同样能让浏览器根据设备特性显示不同图片。但借助该元素，你可以定义完全不同的图片，而不只是同一张图的不同尺寸版本。
例如，希望在移动设备上显示窄而高的图片，在桌面设备上显示宽图。
<picture>
<source media="(min-width: 600px)" srcset="ahrefs-image.jpg, ahrefs-image-2x.jpg 2x">
<img src="ahrefs-image.jpg" alt="cool illustration">
</picture>
上述例子中，当浏览器宽度达到 600px 及以上时（取决于设备像素密度），将显示 ahrefs-image.jpg 或 ahrefs-image-2x.jpg；屏幕宽度小于 600px，或 picture 元素不受支持时，则渲染 img 元素。“img”元素应始终保留。