srcset 和 sizes 是 HTML 中<img> 元素的属性，用于实现响应式图片，让浏览器根据设备特性和显示条件选择最合适的图片资源

srcset属性

定义一组可选的图片资源及其宽度/像素密度描述符

  <!-- 小于等于500像素的时候使用small.jpg -->
  <img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w">
  <img srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x">

sizes属性

定义图片在不同视口宽度下的显示尺寸，只是告诉浏览器图片预计显示的宽度，而不是图片的实际显示宽度，实际显示由css控制

<!-- 小于等于600像素的时候图片宽度为100%视口宽度 -->
<img sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px">

配合使用

<!-- 当视口宽度小于800时，图片预计显示尺寸300px，显示small.jpg -->
<!-- 当视口宽度大于等于800时，图片预计显示尺寸600px，显示media.jpg -->
<!-- 当视口宽度大于等于1200时，图片预计显示尺寸1200px，显示large.jpg -->

<img
  src="default.jpg"
  srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
  sizes="(min-width: 1200px) 1200px, (min-width: 800px) 600px, 300px"
  alt="示例">

解释：

• 浏览器首先根据 sizes 确定图片的显示尺寸

• 然后根据显示尺寸和屏幕DPI从 srcset 中选择最合适的图片

• src 作为不支持这些属性的浏览器的回退方案