by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12455
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、一步到位

一句话：sizes="auto" 是给懒加载图片用的新特性，浏览器不再需要你手写媒体查询，会自动读取图片布局后的实际渲染宽度，去 srcset 里挑选最合适尺寸的图片。

关于srcset属性，我在之前的文章（响应式图片srcset全新释义sizes属性w描述符），以及我写的《HTML并不简单》这本书里面都有过详细的介绍。

比方说下面这段HTML代码：

<img src="128px.jpg"
  srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
  sizes="(max-width: 480px) 100vw, 480px">

我问你，iPhone6下加载的是哪张图片？渲染的宽度是多少？

有谁回答的上来！

需要知道iPhone6的屏幕密度，需要知道他的尺寸，然后计算使用哪个规格的图片。

麻麻批的，我自己都看不懂，虽然这段代码是我自己写的。

这就是为何，从业十几年，我从来没有在哪个国内的项目见谁用过srcset和sizes属性。

太复杂，太啰嗦，所以，大家都是直接2倍图，3倍图一把梭，反正用的是公司流量。

现在情况有变，在某些条件下，开发者无需去关注sizes的media查询细节了，直接sizes="auto"就可以了，浏览器会自动选择合适尺寸的图片去加载。

那这个条件是什么呢？为什么浏览器可以自动选择尺寸？

二、既然是懒加载？

这个条件就是图片需要设置loading="lazy"。

设置了懒加载的图片默认不是立即加载的，对吧，需要图片元素滚动到视口，或者接近视口的时候（与网速、屏幕尺寸等有关）才开始加载。

此时页面的 CSS 早就解析完毕，图片在布局中的准确宽度浏览器早就知道了。

既然尺寸都知道了，那么不就可以后自动匹配对应的srcset资源了？

这就是为何sizes="auto"需要图片是懒加载的原因。

补充说明

图片除了必须是懒加载的，还需要显式指定 width 和 height（或通过 CSS 限制宽高），或者指定一侧高度，然后使用aspect-ratio属性约束好比例。

三、噢啦，就这么点内容

<img sizes="auto" loading="lazy">还是个新特性，我看了下，Safari居然还没有支持：

唉，无所谓了，不支持就不支持吧，反正不影响图片正常显示，到时候src随便给个两倍图就好了。

至于srcset属性的使用窍门那就简单了，原图宽度是多少像素，后面就写多少w，比方说：

<img loading="lazy" 
  sizes="auto" 
  srcset="img-300.jpg 300w, img-600.jpg 600w, img-1200.jpg 1200w" 
  src="img-600.jpg" 
  width="600" 
  height="400"
/>

当然，省流量还有其他更好的方式，比方说jpg格式换成webp，如果条件允许，最好换成avif格式，这个才是兼顾视觉效果和文件大小的王牌格式，同画质下，比webp小20%~30%的体积，和jpg格式相比，更是减半不止。

目前所有主流浏览器都支持avif格式了，大家有兴趣可以多多关注。

比研究srcset这样细节的知识对产品流量的增益大多了。

当然，本文的内容并不是一无是处，反正现在有AI，回头开发的时候，让AI自动生成多尺寸图片（以前多半要手动处理），使用srcset属性调用，也可以。

毕竟以前实现类似东西要烧脑子，现在只要烧token，开发成本不可同日而语。

好了，就说这么多。

顺便汇报下之前说的在线前端课程，已经写到章节2.5了，阅读约莫20~30%的样子吧。

再写几个小节，就可以找编辑看看能不能签约了，谈分成之类的。

股票跌没了，得找点路子赚点零花钱补贴家用了。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12455

（本篇完）