打开手机流量一看，一个页面干了 3MB，图片占了八成。罪魁祸首通常是同一张 2000px 宽的大图，PC 和手机都在原样下载——手机屏幕 400px 宽，下载的像素是实际需要的几十倍，流量和渲染性能全浪费了。srcset 就是解决这个问题的原生方案，不用任何 JS。
先准备好同一张图的多个尺寸版本，然后一行代码让浏览器自己挑：
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w,
photo-800.jpg 800w,
photo-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 680px"
alt="图片描述">原理拆开讲：srcset 列出每张图的宽度和描述符（400w 表示这张图宽 400 像素）；sizes 告诉浏览器这张图在页面上最终显示多宽——例子里的意思是手机上占满屏宽（100vw），PC 上占 680px。浏览器拿这两个信息一算，挑最合适的那张下载，只下不下多余像素。
src 是兜底，不支持 srcset 的老浏览器用原图，功能不缺失。别忘了给 img 本身加上 width 和 height 属性，浏览器能提前占好位置，避免加载时布局跳动。
批量生成多尺寸图，一个 ImageMagick 命令的事，可以配进发布流程：
# 一张图批量生成三个尺寸
convert photo.jpg -resize 1200x photo-1200.jpg
convert photo.jpg -resize 800x photo-800.jpg
convert photo.jpg -resize 400x photo-400.jpg
# 配合质量压缩
convert photo.jpg -resize 800x -quality 80 photo-800.jpg验证打开 Chrome 开发者工具的 Network 面板，勾选设备模拟切换手机模式刷新，看图片请求的文件名——应该变成 400 那张，体积直接小一个数量级。再切换回 PC 宽度刷新，请求的又回到大图。
srcset 配合之前写过的 WebP 转换食用更佳：srcset 挑尺寸，type 属性挑格式，双保险之下图片流量能砍掉七成。图片向来是页面最大的资产，这里省下的每一 KB 都是白赚的。
数据来源：MDN Web Docs 响应式图片指南
申请创业报道，分享创业好点子。点击此处，共同探讨创业新机遇！
