懒加载图片新支持了sizes=”auto”属性，其作用是？
内容提要
文章介绍HTML图片新特性sizes="auto"：配合loading="lazy"使用时，浏览器可在图片布局完成后获知实际渲染宽度，自动从srcset中挑选合适尺寸图片，无需手写媒体查询。前提是图片需显式指定宽高或用CSS约束比例。该特性Safari尚未支持，但不影响正常显示。作者还建议用AVIF格式省流量，并提到可借AI生成多尺寸图片。
延伸解读
sizes="auto" 的生效条件
sizes="auto" 并非无条件可用，它必须与 loading="lazy" 配合。因为懒加载图片在滚动到视口附近才开始加载，此时页面 CSS 已解析完毕，浏览器能准确知道图片的布局宽度，从而自动从 srcset 中挑选合适资源。此外，图片还需显式指定 width 和 height，或通过 CSS 约束宽高比，否则浏览器无法确定渲染尺寸，自动选择也就无从谈起。
兼容性与降级处理
该特性目前 Safari 尚未支持，但作者指出这并不影响图片正常显示。在不支持的浏览器中，sizes="auto" 会被忽略，图片仍按 src 或默认规则加载。因此开发者可以放心使用，只需在 src 中提供一个合理的默认图片（如两倍图）作为兜底，无需为兼容性做额外处理。
更省流量的替代方案
作者认为，相比研究 srcset 细节，更换图片格式对流量增益更大。建议将 JPG 换成 WebP，条件允许时最好用 AVIF，同画质下比 WebP 小 20%~30%，比 JPG 减半不止。目前所有主流浏览器都已支持 AVIF，值得优先关注。此外，现在可借助 AI 自动生成多尺寸图片，再配合 srcset 使用，开发成本已大幅降低。
Q&A
sizes="auto" 是什么？它有什么作用？
sizes="auto" 是 HTML 图片的新特性，专为懒加载图片设计。它让浏览器在图片布局完成后自动获取实际渲染宽度，并从 srcset 中挑选最合适尺寸的图片加载，无需开发者手写媒体查询。
使用 sizes="auto" 需要满足哪些条件？
必须同时满足两个条件：1) 图片设置 loading="lazy" 懒加载；2) 图片显式指定 width 和 height，或通过 CSS 限制宽高，或指定一侧高度并用 aspect-ratio 约束比例。
为什么 sizes="auto" 必须配合懒加载使用？
因为懒加载图片不会立即加载，而是等到滚动到视口附近才开始加载。此时页面 CSS 已解析完毕，浏览器已知图片在布局中的准确宽度，因此能自动匹配 srcset 中的合适资源。
sizes="auto" 的浏览器兼容性如何？Safari 支持吗？
该特性较新，Safari 尚未支持。但不支持也不影响图片正常显示，开发者可以在 src 中指定一个默认的两倍图作为回退。
如何正确编写 srcset 属性？有什么技巧？
srcset 中每张图片的宽度描述符应使用原图的实际像素宽度，例如原图宽 300px 就写 300w。示例：srcset="img-300.jpg 300w, img-600.jpg 600w, img-1200.jpg 1200w"。
除了使用 srcset，还有哪些节省图片流量的方法？
可以将 JPG 格式换成 WebP，条件允许时最好换成 AVIF 格式。AVIF 在同画质下比 WebP 小 20%~30%，比 JPG 体积减半不止，且所有主流浏览器都已支持。
现在有 AI 辅助，处理多尺寸图片有什么新方式？
可以利用 AI 自动生成多尺寸图片（以前多需手动处理），然后通过 srcset 属性调用。这样开发成本大幅降低，从烧脑子变为烧 token。
