响应式图片应优先用 <picture> 配合 <source> 按媒体条件和 DPR 精准选图，<img> 仅作兜底；若仅适配分辨率，srcset + sizes 更轻量；背景图响应式受限，关键插图勿依赖 background-image；WebP/AVIF 需降级 fallback 并验证实际加载效果。
用 <picture> + <source> 控制不同屏幕尺寸的图片源
响应式插图不是靠 CSS 拉伸一张图应付所有设备，而是让浏览器根据视口宽度、设备像素比（DPR）等条件，主动选择最合适的图片资源。核心是 <picture> 元素配合多个 <source> 声明条件，最后用 <img> 作为兜底。
常见错误是只写 srcset 不配 sizes，导致浏览器无法正确计算所需宽度；或把高 DPR 图片全塞进 srcset 却没加 2x 描述符，Retina 屏仍加载低清图。
-
<source>的media属性写断点（如(max-width: 768px)），必须匹配真实布局断点 -
<source>的srcset可填多个图片路径，用逗号分隔；若含 DPR 描述，需配2x、3x -
<img>的sizes必须存在，且值要反映该图在不同断点下实际占容器的宽度比例（如(max-width: 768px) 100vw, 50vw） - 所有
<source>必须在<img>标签之前，否则被忽略
<picture>
<source media="(max-width: 768px)" srcset="hero-mobile.webp" type="image/webp">
<source media="(max-width: 768px)" srcset="hero-mobile.jpg" type="image/jpeg">
<source media="(min-width: 769px)" srcset="hero-desktop@1x.webp, hero-desktop@2x.webp 2x" type="image/webp">
<source media="(min-width: 769px)" srcset="hero-desktop@1x.jpg, hero-desktop@2x.jpg 2x" type="image/jpeg">
<img src="hero-desktop@1x.jpg"
alt="主视觉插图"
sizes="(max-width: 768px) 100vw, 50vw">
</picture>
用 srcset + sizes 简化单图多分辨率适配
如果只是适配不同 DPR（比如普通屏 vs iPhone 14 Pro），不需要换构图，<img> 自身的 srcset 和 sizes 就够用，比 <picture> 更轻量。
关键陷阱在于：只写 srcset 不写 sizes，浏览器默认按 100vw 计算，导致大图在小屏上也下载；或者 sizes 写死成 100vw，但实际图宽随布局变化（如 flex 容器中缩放），结果选错尺寸。
立即学习“前端免费学习笔记（深入）”；
-
srcset中每个图片后必须标注宽度（w）或 DPR（x），不能混用；标注w时，sizes必须提供对应宽度上下文 -
sizes是字符串，不是 CSS；支持媒体查询语法，但不支持 calc() 或变量 - 生成的图片宽度建议按 1.5x 步进（如 320w、480w、768w、1200w），覆盖主流设备逻辑像素宽度
<img src="chart-768w.jpg"
srcset="chart-320w.jpg 320w,
chart-480w.jpg 480w,
chart-768w.jpg 768w,
chart-1200w.jpg 1200w"
sizes="(max-width: 480px) 100vw,
(max-width: 768px) 80vw,
600px"
alt="数据趋势图">
CSS background-image 响应式限制与绕过方案
CSS 背景图无法像 <img> 那样用 srcset 或 <picture> 切换资源，image-set() 兼容性差（Safari 16.4+ 才稳定支持），纯靠媒体查询易冗余且难维护。
真正可靠的做法是放弃背景图承载关键插图——尤其是带文字、图表、品牌元素的插图。如果必须用背景图，优先走内联 SVG 或 data URL，或用 JS 动态设置 style.backgroundImage，但会增加首屏阻塞风险。
- 不要对
background-image依赖image-set()做核心适配，iOS Safari 15.x 有渲染白屏 bug - 媒体查询中重复写
background-image时，确保所有路径可访问，否则 404 会静默失败 - SVG 作为背景时，用
background-size: contain或cover配合background-repeat: no-repeat，避免拉伸失真
WebP / AVIF 格式降级与格式协商
现代格式（WebP/AVIF）体积比 JPEG/PNG 小 30%–50%，但旧浏览器不支持。不能只扔一个 webp 地址进去完事，必须提供 fallback。
最容易被忽略的是：服务器未开启 Accept 头协商时，即使前端用了 <picture>，CDN 或代理可能缓存了 WebP 版本并返回给不支持的客户端，导致图片空白。
-
<source type="image/webp">必须放在<source type="image/jpeg">之前，浏览器按顺序尝试 - 服务端若支持内容协商（Content Negotiation），可省略
<source>，但需确认 Nginx/Apache 配置了add_header Vary Accept - 构建阶段用工具（如 sharp）批量转格式时，确保 AVIF 的
quality设为 50–70，低于 40 易出现色带
srcset 项、是否命中 2x、有没有因 sizes 错误导致大图小屏下载。这些细节不查，光写对语法也没用。 
