能省流量是因为它支持按场景切换不同构图和格式的图片，而srcset仅能切换尺寸或像素密度；其需正确使用media和type属性，顺序、边界、语法须精准，否则失效。
为什么能省流量，而不是只靠srcset
因为srcset只能换尺寸或像素密度，不能换构图或格式。<picture></picture>的<source></source>标签配合media和type，才能真正实现“要什么给什么”，避免把2MB全景图发给4.7英寸屏。
media属性写错就白搭：顺序、边界、语法三连坑
浏览器对<source></source>的media属性是自上而下匹配、遇真即停。常见失效原因：
- 顺序反了：把
media="(max-width: 767px)"放在最上面，所有小屏设备都卡在这条，后面min-width: 1200px永远不执行 - 边界不互斥：同时存在
min-width: 768px和max-width: 768px，768px宽度可能随机命中其一，行为不可控 - 语法非法：漏括号、缺单位，如
media="min-width: 768px"（❌）必须写成media="(min-width: 768px)"（✅），否则静默忽略整条<source></source> - CSS断点没对齐：前端用
@media (min-width: 768px)，但<source></source>写了max-width: 767px，中间1px缝隙导致fallback到<img>
type="image/webp"在iOS Safari有闪白风险，别盲目上
虽然WebP体积比JPEG小30%+，但iOS Safari 16.4之前版本加载type="image/webp"时可能出现短暂白屏，尤其在弱网或页面重绘频繁时。实操建议：
- 优先用
srcset+sizes搭配WebP fallback：把WebP放srcset里，JPEG放<img src>兜底，浏览器自动选支持的格式 - 若坚持用
<source type="image/webp"></source>，务必在最后加一个无media、无type的<source></source>，再配<img>作为双重fallback - 所有
srcset里的路径必须真实存在且返回200，404时浏览器静默跳过，不会报错，调试得靠DevTools Network面板确认实际加载项
移动端Banner头图必须用，但别漏掉艺术方向控制
电商活动页首屏Banner，手机竖屏需突出人脸、桌面需展示全景，这时仅靠srcset缩放会拉伸变形或留大片空白。正确做法是用<picture></picture>为不同视口提供不同裁切的源图：
- 每个
<source></source>的media值必须与真实CSS媒体查询断点完全一致，比如CSS用@media (min-width: 768px)，<source></source>就得写media="(min-width: 768px)" -
<source></source>里srcset统一用w描述符（如"banner-mobile.jpg 375w"），别混2x，否则旧Safari可能退化为只加载<img src> - 兜底
<img>的src必须是兼容性最强的格式（如JPEG），且尺寸适配最小视口，不能留空或指向404
最易被忽略的一点：所有<source></source>必须严格按从宽到窄排列，且最后一个必须覆盖全部剩余情况（例如media="(max-width: 374px)"），否则中间断层会导致图片不显示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
