srcset 和 sizes 必须同时出现，否则 w 描述符不生效；混用 w 和 x 描述符会导致整个 srcset 被忽略；picture 用于艺术方向、格式切换等 img 无法实现的场景，而非 srcset 升级版。
srcset 和 sizes 必须同时出现，否则 w 描述符不生效
只写 srcset 但漏掉 sizes，浏览器会退化为按 100vw 计算图片宽度，大概率加载远超需要的高清图。比如视口只有 375px，却选了 1200w 的图，流量浪费三倍以上。
-
srcset中用了480w、768w这类宽度描述符，sizes就必须提供，且值要真实反映 CSS 布局下的渲染宽度 - 如果图片在 flex 容器里占 1/2 宽，断点从 768px 开始，
sizes应写成"(max-width: 768px) 100vw, 50vw"，不能硬写"100vw" - 旧版 Safari（iOS 11 / Safari 12.0）会忽略
sizes，只按设备 DPR 粗略匹配——此时srcset里混用x描述符反而更稳
混用 1x 和 480w 会导致整个 srcset 被浏览器忽略
浏览器解析 srcset 时只认一种描述符类型：要么全用 w（宽度），要么全用 x（像素密度）。一旦混写，比如 srcset="small.jpg 1x, big.jpg 800w"，Chrome、Firefox 都会直接跳过整个属性，降级为只加载 src。
- 固定宽高的图标、头像适合用
x：如avatar-40.jpg 1x, avatar-80.jpg 2x - 响应式布局中的内容图必须用
w+sizes：如hero-480.jpg 480w, hero-1024.jpg 1024w - CDN 返回 404 时，浏览器不会报错，只会静默 fallback 到
src——得靠 Network 面板确认实际加载的是哪个 URL
picture 元素不是 srcset 的升级版，而是解决不同问题的工具
<picture></picture> 不是用来“更好地用 srcset”的，它解决的是 <img> 根本做不到的事：艺术方向裁剪、格式强制切换、设备类型区分。
- 当手机需竖构图、桌面需横构图时，
<source media="(max-width: 768px)" srcset="crop-mobile.jpg"></source>才是正解 - 想优先加载
image/avif并 fallback 到image/webp再 fallback 到image/jpeg，必须用<source type="image/avif"></source>+<source type="image/webp"></source>+<img src="fallback.jpg"> -
<source></source>的media和type是 AND 关系：不满足媒体条件，或浏览器不支持该 MIME 类型，整条<source></source>就被跳过
实际渲染宽度 ≠ CSS width 值，sizes 必须匹配真实布局
sizes 不是控制图片大小，而是告诉浏览器“这张图在当前断点下，最终会渲染成多宽”。如果 CSS 设置了 max-width: 600px，但 sizes 写成 "100vw"，浏览器就会误判为需要加载 1920px 宽的图。
- 检查方式：打开 DevTools → Elements → 选中
<img>→ 查看 Computed 面板里的width和height实际值 - Flex 容器里图片不缩？大概率是父容器没设
min-width: 0，导致 flex item 阻断收缩，sizes失效 - 媒体查询里空格敏感：旧 EdgeHTML 解析
(max-width: 768px)会失败，必须写成(max-width:768px)（无空格）
sizes 值和真实渲染宽度脱节，或者把 <picture></picture> 当成 srcset 的豪华替代品来用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
