响应式图片技术通过srcset和sizes属性让浏览器根据设备屏幕特性自动选择最适配图片；配合picture元素可按设备类型与分辨率双重适配；推荐按宽度命名并用构建工具自动生成多尺寸版本。
用响应式图片技术，让浏览器根据设备屏幕特性自动选择最合适的图片版本。
使用 srcset 和 sizes 属性
这是最直接有效的方式。在 img 标签中同时提供多张不同分辨率的图片，并告诉浏览器每张图适用的视口宽度或设备像素比。
- srcset 列出图片资源及对应宽度（如
image-400w.jpg 400w）或像素密度（如image@2x.jpg 2x） - sizes 告诉浏览器在不同视口宽度下，这张图将占据多宽的显示区域（例如
(max-width: 768px) 100vw, 50vw） - 浏览器结合 sizes 和当前设备 DPR（设备像素比），从 srcset 中选出最匹配的一张加载
针对手机和平板做明确区分
可以按典型断点设置：手机（≤768px）、平板（769px–1024px）。例如：
src=”image-400.jpg”
srcset=”image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w”
sizes=”(max-width: 480px) 100vw,
(max-width: 768px) 800px,
(max-width: 1024px) 900px,
800px”
alt=”示例图片”>
这样，小屏手机优先加载 400w 或 800w 版本，平板更倾向 800w 或 1200w，高 DPR 设备还会自动选带 @2x 的版本（若你额外提供）。
配合 picture 元素做更精细控制
如果需要为不同设备类型指定完全不同的图片（比如裁剪方式、内容重点不同），可用 picture + source：
- 用 media 属性匹配设备宽度范围，如
media="(max-width: 768px)"专供手机 - 每个 source 可独立配 srcset 和 sizes，实现“设备类型 + 分辨率”双重适配
- img 标签作为兜底，确保不支持 picture 的旧浏览器也能显示
生成与命名建议
实际项目中建议按宽度命名图片（如 hero-400.jpg、hero-800.jpg），并搭配构建工具（如 webpack、vite 插件）或 cdn 自动产出多尺寸版本。避免手动维护大量文件，也别依赖客户端 js 检测 UA——它不可靠且延迟加载影响体验。