src 和 sizes 缺一不可：src 是所有浏览器的强制兜底，sizes 则决定 srcset 中哪张图被加载；漏写或写错 sizes 会导致大图滥用，而 srcset 与 src 必须协同生效。
不配 sizes，srcset 就基本等于没写；漏掉 src，老浏览器和部分 WebView 会直接空白——降级不是“可选项”，而是必须显式声明的兜底链。
为什么写了 srcset 还是加载大图？
核心问题几乎总是 sizes 缺失或写错。浏览器在发起请求前，需要靠 sizes 算出这张图“在当前布局里实际占多宽”，再从 srcset 列表里挑最接近的源。没 sizes，它就默认按 100vw 算，哪怕你只给了一张 400w 的图，它也可能跳过，去加载 1200w 版本。
-
sizes必须是有效媒体查询字符串，比如(max-width:768px) 100vw, 50vw（注意括号紧贴，旧版 Edge 对空格敏感） - 写成
sizes="100vw"看似简单，但若父容器有max-width: 600px，桌面端仍会拉远超所需的图 - 栅格中占 1/3 宽？
sizes就得是(max-width:768px) 100vw, 33.33vw，不是凭感觉写50vw - 检查是否生效：打开 DevTools → Network 面板，刷新后看图片请求 URL；更准的是在控制台执行
document.querySelector('img').currentSrc
src 不是备用，是强制兜底项
src 属性不可省略，它不是“备选”，而是浏览器解析失败、JS 未执行、低带宽或旧环境（如 IE11、Android 4.4 WebView）下的唯一出口。漏掉它，整张图就留白。
-
src应该指向一个体积适中、清晰度够用的版本，比如photo-400w.jpg，而不是最大图 - 不要把 CDN 动态参数塞进
src，例如src="https://cdn.com/p.jpg?w=800"—— 降级时可能因参数不被支持而加载失败 - 所有不支持
srcset的浏览器（包括部分低版本 Safari iOS）都只认src，它必须能独立显示
srcset 里 w 和 x 能不能混用？
不能。混用 400w 和 2x 是未定义行为，Chrome 等现代浏览器会直接忽略整条 srcset，退化为只加载 src。
立即学习“前端免费学习笔记（深入）”；
- 用
w描述符（如photo-480w.jpg 480w）→ 必须配sizes，适合 banner、商品主图等流式布局图 - 用
x描述符（如logo@2x.png 2x）→sizes可省略，但只适用于固定宽高的图标、头像等 -
1x、2x必须写整数，1.0x或2.0x不被识别 - 多个
x候选时，浏览器从左到右匹配，遇到第一个满足 DPR 的就停，所以高倍率图要放最后
什么时候必须用 <picture></picture> 而不是只靠 <img alt="HTML响应式图片如何降级？srcset配置教程" >？
当你要的不是“同一张图缩放”，而是“不同屏幕展示不同裁剪、不同比例、不同格式”时，<picture></picture> 是唯一解。它不替代 <img alt="HTML响应式图片如何降级？srcset配置教程" >，而是包裹它，且顺序即策略。
-
<source></source>的media和type是 AND 关系：两个条件都满足才生效，写错一个括号或 MIME 类型拼错（如image/webp;多个分号），整条就被跳过 - 断点必须和真实 CSS 布局一致，比如 CSS 用
@media (min-width: 769px)，<source></source>就别写成(max-width: 768px)，否则某一行图全加载错版本 - WebP / AVIF 降级必须写全链：
<source type="image/avif" srcset="..."></source>→<source type="image/webp" srcset="..."></source>→<img src="fallback.jpg" alt=""> -
<source></source>必须写在<img alt="HTML响应式图片如何降级？srcset配置教程" >前面，顺序错就完全不生效；<img alt="HTML响应式图片如何降级？srcset配置教程" >的alt是最终无障碍描述来源，不能省
真正容易被忽略的，是 sizes 值必须真实反映图片在 CSS Grid / Flex 中的实际占位宽度——不是你“希望它多宽”，而是布局引擎算出来它占多少。写错一个断点，整套响应式逻辑就偏了。
