srcset
HTML img 属性,用于指定多个图片候选项,使浏览器能根据设备条件自动选择最优图片。
<img> 元素的 srcset 属性以逗号分隔列出不同尺寸或分辨率的图片候选项。浏览器根据设备像素比和视口宽度自动选择并下载最优候选项。
存在两种描述符类型。宽度描述符 (w) 指定图片的实际像素宽度,与 sizes 属性配合使用。像素密度描述符 (x) 指定 Retina 倍率,如 1x、2x、3x。
示例:<img srcset="photo-320w.jpg 320w, photo-640w.jpg 640w, photo-1280w.jpg 1280w" sizes="(max-width: 600px) 100vw, 50vw" src="photo-640w.jpg">
srcset 是响应式图片实现的核心。批量调整工具可生成多种尺寸用于 srcset 枚举,为每种设备提供最优分辨率的图片。