图片通常占页面体积的 60% 以上。同样一张首屏大图，桌面端需要 1600px，手机端 750px 就够，但很多站给两边都发 2000px 的原图。省下来的流量，就是省下来的加载时间。
一、srcset 的基本写法
三个属性各管一件事：
srcset列出可选的图片和宽度。sizes告诉浏览器"在不同屏幕下，这张图会显示多宽"。src是不支持 srcset 时的兜底。
浏览器根据设备像素比和 sizes 计算，选择最合适的一张。注意：sizes 写错，选图就会错，这是最常见的失效原因。
二、什么时候用 picture
picture 解决的是"艺术指导"，不是分辨率适配。比如桌面用横图、手机用竖图：
如果只是分辨率不同、构图一样，用 srcset 就够了，别用 picture。
三、格式：优先 WebP，考虑 AVIF
WebP 兼容性已经很好，体积比 JPEG 小 25%-35%。AVIF 更小，但编码慢、部分老设备不支持。
实际方案：用 picture 提供 AVIF + WebP + JPEG 三层，或者干脆只用 WebP（2026 年主流浏览器都支持）。
四、懒加载的边界
懒加载的作用是"不加载看不见的图"，但用错会伤害 LCP。
- 首屏图片不要懒加载。它是 LCP 元素，延迟加载会让 LCP 变差。
- 首屏图片加 fetchpriority="high"。告诉浏览器优先加载。
- 其余图片用 loading="lazy"。浏览器原生支持，不需要 JS 库。
五、必须写宽高
图片不写 width 和 height，加载完成时会把下面的内容顶下去，造成布局偏移（CLS 变差）。
写了宽高后，用 CSS 控制实际显示尺寸：
img { max-width: 100%; height: auto; }这样既能预留空间，又能自适应。
六、五个常见错误
sizes写成固定值，导致手机上加载了桌面大图。- 图片没压缩，直接上传 3MB 的原图。
- 懒加载套在首屏图上，LCP 直接翻倍。
- 用 JS 库做懒加载，反而增加了一个请求。
- 背景图用 CSS 加载，无法享受 srcset，只能用媒体查询切换。
七、怎么验证
用 Chrome 开发者工具的 Network 面板，把设备切成手机，看实际加载的图片尺寸。如果加载的是 1600px 而显示宽度只有 375px，说明 srcset 没生效。
再看 Lighthouse 的"适当尺寸的图片"报告，它会列出所有尺寸不匹配的图片。
常见问题
响应式图片要不要生成多套
要。上传时自动生成 400/800/1600 三档，配合 srcset 使用。多数 CMS 有插件可以做。
WebP 会不会不被百度识别
百度支持 WebP。但如果做图片搜索优化，JPEG 的兼容性更稳。
图片 CDN 能自动处理吗
能。很多图片 CDN 支持在 URL 里带参数自动裁剪压缩，比手工生成多套省事。
图片之外，整体性能优化见核心网页指标。
