responsive-images

响应式图像

概述

响应式图像会根据视口、设备像素比和浏览器功能提供合适尺寸和格式的图像。正确实现可避免布局偏移（CLS）、优化最大内容绘制（LCP），并通过现代格式减少 50-70% 的带宽消耗。

适用场景： 任何包含图像的页面，尤其是内容图像、主视觉图像、产品照片和图库布局。

不适用场景： 内联 SVG 图标、CSS 背景图案或 Canvas 渲染的图形。

快速参考

模式	方法	要点
响应式尺寸	使用宽度描述符（w）的 srcset + sizes	浏览器根据视口和 DPR 选择最佳图像
现代格式	使用 AVIF、WebP、JPEG 源的 <picture>	与 JPEG 相比，AVIF 可节省 70%，WebP 可节省 50%
艺术指导	使用 media 查询的 <picture>	根据不同视口使用不同裁剪
LCP 主视觉图像	loading="eager" + fetchpriority="high"	优先下载，满足 Core Web Vitals 要求
首屏以下图像	loading="lazy"	延迟加载，直到接近视口
防止 CLS	width + height 属性	浏览器在加载前预留空间
固定容器	object-fit: cover 或 contain	在受限空间中保持宽高比
格式回退	按 AVIF、WebP、JPEG 顺序指定源	优先使用压缩率最高的格式，最后提供通用回退格式

推荐图像尺寸

用途	要生成的宽度	Sizes 属性
全宽主视觉	800w、1200w、1600w、2400w	100vw
内容区宽度	400w、800w、1200w	(max-width: 768px) 100vw, 800px
网格卡片（3 列）	300w、600w、900w	(max-width: 768px) 100vw, 33vw
侧边栏缩略图	150w、300w	150px

加载策略

图像位置	loading	fetchpriority	原因
主视觉/LCP	eager	high	优化 LCP，优先下载
首屏内（非 LCP）	eager	省略	正常加载
首屏以下	lazy	省略	延迟加载，直到接近视口
屏幕外轮播	lazy	省略	延迟加载，直到交互时

格式对比

格式	质量	文件大小	浏览器支持	用途
JPEG	良好	中等	100%	照片、复杂图像
PNG	无损	大	100%	徽标、透明图像
WebP	极佳	小	96%+	现代浏览器、照片
AVIF	极佳	最小	93%+	最新格式，需提供回退格式

常见错误

错误	正确做法
未在 img 元素上指定宽度和高度属性	始终指定 width 和 height，以防止 CLS 布局偏移
对 LCP 主视觉图片启用延迟加载	对 LCP 图片使用 loading="eager" 和 fetchpriority="high"
对可变宽度图片使用密度描述符（1x、2x）	使用宽度描述符（400w、800w）并搭配 sizes 属性
内容图片缺少替代文本	提供描述性替代文本；仅对装饰性图片使用 alt=""
仅提供 JPEG，不提供现代格式的回退	使用 <picture>，提供 AVIF 和 WebP 源，并回退到 JPEG

委派

• 审查页面中的响应式图片问题和 CLS 问题：使用 Explore Agent 扫描 HTML，查找缺失的属性、错误的加载策略以及格式缺失
• 将页面上的所有图片转换为使用 picture 元素和现代格式：使用 Task Agent 重写 img 标签，添加 AVIF/WebP/JPEG 回退链
• 为多页面网站规划图片优化流程：使用 Plan Agent 设计 srcset 断点、格式转换工作流和 CDN 集成

参考

• srcset、sizes 和宽度描述符模式
• Picture 元素和艺术指导
• 现代图片格式：WebP、AVIF 和转换工具
• 延迟加载、fetchpriority 和 LCP 优化
• 宽高比、object-fit 和 CLS 预防