结论是：仅靠max-width:100%或单一大图会浪费40%–70%带宽；真正省流量的核心是「srcset+sizes声明式选图」+「cdn动态裁剪url作为srcset条目」+「控制webp/avif降级」三者缺一不可。
直接说结论：在大规模电商活动页中，仅靠 max-width: 100% 或单纯用 src 加一张大图，会浪费 40%–70% 的图片带宽；真正省流量的核心动作是「srcset + sizes 声明式选图」+「CDN 动态裁剪 URL 作为 srcset 条目」+「<picture></picture> 控制 WebP/AVIF 降级」，三者缺一不可。
为什么 sizes + srcset 能省带宽，而 CSS 缩放不能
浏览器不会因为你写了 max-width: 100% 就自动换小图——它仍会下载 src 指向的原始大图，再在本地缩放。而 srcset + sizes 是声明式资源选择，浏览器在发起请求前就决定加载哪张物理文件。
-
sizes="(max-width: 768px) 100vw, 50vw"告诉浏览器：“这张图在手机上占满屏，在桌面占半屏” -
srcset="p-480w.webp 480w, p-800w.webp 800w, p-1200w.webp 1200w"提供三张固有宽度明确的图 - iPhone SE（375px 宽）匹配到 100vw → 渲染宽度 ≈ 375px → 浏览器选
p-480w.webp，而非下载 1200w 版本 - 必须用
w描述符，不用x：电商图多为布局图，按渲染宽度选比按 DPR 选更稳定
CDN 裁剪 URL 必须和 srcset 一一对应
CDN 裁剪不是前端加个 object-fit 就完事的——它得在图片请求发出前，由 CDN 边缘节点根据 URL 参数动态生成新图。每个 srcset 条目必须是一个独立裁剪 URL，且其 w 值必须等于该 URL 中的 w= 参数值。
- 正确：
srcset="https://cdn.com/p.jpg?w=480&h=270&fit=cover 480w, https://cdn.com/p.jpg?w=800&h=450&fit=cover 800w" - 错误：同一张 CDN 图加多个
w描述符（如...p.jpg?w=800... 480w, ...p.jpg?w=800... 800w），浏览器会反复请求同一张图 - 老 iOS Safari 可能截断含多个
&的 URL，建议优先用路径式参数（如/w_800,h_450,c_fill/），或对&做 URL 编码（%26） -
src回退地址不能依赖 CDN 参数（如src="https://cdn.com/p.jpg?w=800"），否则降级时可能加载失败
不是炫技，是格式控制开关
<picture></picture> 的核心价值不是“多图切换”，而是格式兜底策略。电商主图、Banner 等关键图像必须支持 WebP（体积比 JPEG 小 30%+），但 IE11 和旧 Android WebView 不支持，需降级。
- 顺序即策略：浏览器从上到下解析
<source></source>，遇到第一个匹配且格式支持的就停 - WebP 放前面，AVIF（Chrome 119+）居中，JPEG 放最后：
<source type="image/avif" srcset="..."></source>→<source type="image/webp" srcset="..."></source>→<img src="..." srcset="..."> -
<img>必须存在，且带src和srcset：它是 fallback，也是语义和可访问性载体 - 别在
<source></source>里同时写media和type：混用易导致无匹配项，浏览器退到<img>，但你本意可能是格式降级而非断点切换
最容易被忽略的一点：所有 sizes 值必须基于真实布局容器宽度来写，而不是拍脑袋填 "480px" 或 "100vw" —— 如果页面结构是三栏网格，图片只占其中一栏，那 sizes 就得写成 "33vw" 或对应媒体查询下的精确比例，否则浏览器选图会系统性偏大。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
