实现轻量展示的核心是“砍冗余”，只下载当前设备真正需要的图片；而img+css仅缩放渲染，仍会下载大图造成带宽浪费。
直接结论：用 <picture></picture> 实现轻量级图片展示，核心不是“加功能”，而是“砍冗余”——只让浏览器下载它真要显示的那一张图，其他全跳过。
为什么不用 img + CSS 做响应式？
很多人试过给 <img> 加 max-width: 100% 和媒体查询改 width，但问题没解决：
- 浏览器仍会下载
src指向的那张大图（比如 2MB 的桌面版），哪怕只在手机上显示 300px 宽 - CSS 不控制加载行为，只控制渲染，属于“下了再裁”，浪费带宽和首屏时间
- 无法按格式降级（比如 WebP 不支持时自动 fallback 到 JPG）
picture 标签里哪些属性真正影响“轻量”？
关键就三个：media、srcset、<img> 的 src。其他如 sizes 或 type 属于加分项，非必须：
-
media写在<source></source>上，决定“谁该被选中”，必须是合法 CSS 媒体查询，比如(max-width: 768px)；写成768px或tablet就完全失效 -
srcset在<source></source>里只需一个路径（如hero-mobile.jpg），不用写1x/2x——那是分辨率适配的事，和“轻量”无关 -
<img>的src是硬性兜底，必须存在且可访问；404 不报错，只会静默留白，调试得靠 Network 面板确认实际加载项
容易被忽略的结构陷阱
哪怕 media 和 srcset 都写对了，只要结构错一点，整个 <picture></picture> 就不工作：
-
<picture></picture>内最后一个子元素**必须是<img>**，不能是注释、空格或别的标签 - 所有
<source></source>必须在<img>之前，顺序错（比如<img>插中间）会导致后续<source></source>被忽略 - 断点之间不能有间隙：用
(max-width: 480px)→(min-width: 481px) and (max-width: 768px)→(min-width: 769px)，而不是漏掉 481–768 之间的覆盖
要不要加 type 属性做格式降级？
加，但只在你明确需要时。例如：
<picture><source srcset="hero.webp" type="image/webp"><source srcset="hero.avif" type="image/avif"> @@##@@ </source></source></picture>
浏览器会按 <source></source> 顺序检查 type 是否支持，第一个支持的就加载。但注意：
- AVIF 兼容性仍有限（Safari 16.4+ 才开始支持，旧版 iOS 完全不认）
- WebP 基本全覆盖（Chrome/Firefox/Safari 14+），是最稳妥的“轻量格式”选择
- 别混用
type和media在同一个<source></source>里——可以，但没必要；优先用media控制尺寸，type控制格式，职责分开更可控
真正轻量的关键，不在堆属性，而在精准匹配：每张图只服务它该服务的设备，不多载一像素，不晚降级一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
