• sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel="icon")，才能使用该属性。
• srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。可以适应不同屏幕，加载不同大小的图片。

在类似七牛这样的图像存储服务都有缩放裁切功能的情况下，这两个属性就是渣

• srcset：规定了图片的src候选集;
• sizes：规定了图片在不同条件下的尺寸取值，根据尺寸取值从srcset中找到对应的图片src；配合srcset属性才能使用；

如果没有设置srcset属性，或者没值，那么sizes属性也将不起作用。——MDN

应用场景：多用于响应式图片或不同像素密度设备的图片适配；

参考文档：响应式图片srcset全新释义sizes属性w描述符

@xxf1996 "配合sizes属性才能使用" 这句表述不对吧，没有资料显示需要配合。张鑫旭文章里的第一个demo：

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x">

应该是 sizes 需要配合候选集 srcset 使用

@xxf1996 "配合sizes属性才能使用" 这句表述不对吧，没有资料显示需要配合。张鑫旭文章里的第一个demo：

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px.jpg 2x">

应该是 sizes 需要配合候选集 srcset 使用

是的，应该是sizes依赖srcset属性；

• img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

<img src="1.jpg " srcset="2.jpg 1440w, 3.jpg 800w" />
当浏览器宽度为1440时显示2.jpg，浏览器宽度为800时显示3.jpg

• sizes 和 srcset 用法差不多

可恶，又在mdn和回答里沉迷自我

这群贤弟，放一下愚兄多年前写的blog吧。
https://blog.csdn.net/qq_35534823/article/details/69388430

这群贤弟，放一下愚兄多年前写的blog吧。
https://blog.csdn.net/qq_35534823/article/details/69388430

原来优秀的人很早就优秀了！

@jiamianmao 膜拜大神，通俗易懂