`sizes` 自动？

结论：sizes 没有通用意义上的「自动」。规范里唯一被承认的自动值只有 sizes="auto"，且只对带 loading="lazy" 的 <img> 生效；其他情况你不写 sizes 就等于 100vw，浏览器会按视口宽度去挑最大的候选图，白下载几百 KB。

sizes="auto" 是什么？为什么必须搭配 loading="lazy"？

结论：sizes="auto" 让浏览器按图片真实的渲染宽度（CSS 像素）去选 srcset 里的候选图，而不是按 sizes 里手写的表达式。

原理上，渲染宽度要等布局（layout）完成才知道，而普通图片是解析到标签就立刻发起请求的——那时布局还没跑，浏览器拿不到宽度。所以规范把 auto 和懒加载绑死：loading="lazy" 的图片本来就要等布局后才加载，正好能拿到渲染宽度。这也是为什么 sizes="auto" 写在 <picture> 的 <source> 上是无效的，规范只允许出现在 <img> 上。

sizes="auto" 怎么写？给一份最小可用代码

结论：三件套必须齐——srcset 用 w 描述符、loading="lazy"、sizes="auto"，同时给 width/height 属性固定宽高比。

<img src="photo-400.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.jpg 1200w"
     sizes="auto"
     loading="lazy"
     width="400" height="300"
     alt="示例图">

注意两点：一是 srcset 里如果是 1x/2x 这种密度描述符，sizes 完全不参与计算，写了也没用；二是宽高最好由 width/height 属性或 CSS 明确决定，否则渲染宽度不稳定，浏览器只能退到更保守的候选。

不写 sizes 会有什么后果？

结论：sizes 缺失或无法解析时，默认值就是 100vw，也就是「这张图占满整个视口宽度」。

在 1440px 的桌面上，一个实际只显示 400px 宽的缩略图，浏览器会去挑 1440w 附近的候选，下载量是实际需要的 3 倍以上。这是响应式图片最常见的性能坑：srcset 写了，sizes 忘了。

哪些情况下 sizes 写了也不生效？

结论：没有 srcset（或只有 x 密度描述符）时 sizes 被忽略；用 sizes="auto" 时，不支持的浏览器会把 auto 当解析失败，回退成 100vw。

这意味着老浏览器不但没享受到「自动」，反而按最大图下载。另外 sizes 不是完整 CSS，它是一个小语法：媒体条件 + 长度值，可以写 sizes="(min-width: 800px) calc(100vw - 4rem), 100vw" 这种 calc()，但不能写选择器、变量之类的东西。

想让 sizes 尽量「自动」，工程上怎么处理？

结论：生产环境推荐按断点显式写 sizes，把 auto 当成渐进增强，而不是唯一方案。

具体做法：先用 CSS 确认图片在各断点下的真实宽度，再写成 sizes="(max-width: 600px) 100vw, (max-width: 1000px) 50vw, 400px" 这样的表达式。用框架的话更省事，比如 next/image 就要求你显式传 sizes，fill 布局下不传会默认按 100vw 处理，结果同样是下载过大。构建期用 eleventy-img、vite-imagetools 这类工具生成 srcset 时，也要同步把 sizes 一起产出，两者必须配套。

浏览器支持上，Chrome 121（2024 年 1 月）起支持 auto-sizes；Firefox、Safari 的支持情况请按你的目标版本实测，可用 caniuse 搜「auto-sizes for lazy-loaded images」。最后一个硬约束：首屏 LCP 大图不要加 loading="lazy"，既然不能懒加载，它也就用不了 sizes="auto"，老老实实写死尺寸表达式。

一句话收尾：sizes="auto" 是给懒加载图片的专用优化，能省掉手算断点的麻烦；其余场景，显式写对 sizes 仍然是唯一可靠的做法。