img的srcset属性

srcset

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

属性格式：图片地址 宽度描述 w 像素密度描述 x，多个资源之间用逗号分隔。

如：

<!-- 浏览器宽度达到 800px 则加载 middle.jpg 达到 1400px 则加载 big.jpg。 -->
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
<!-- 注意：像素密度描述只对固定宽度图片有效。 -->

---

size

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询 宽度描述（支持 px），多条规则用逗号分隔。

<!-- 浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px -->
<img
  src="images/gun.png"
  srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
  sizes="(max-width: 320px) 300w, 1200w"
/>

---

css image-set()

css 属性 image-set()支持根据用户分辨率适配图像。

body {
  /* 为普通屏幕使用 pic-1.jpg
  为高分屏使用 pic-2.jpg
  如果更高的分辨率则使用 pic-3.jpg，比如印刷 */
  background-image: -webkit-image-set(
    url(../images/pic-1.jpg) 1x,
    url(../images/pic-2.jpg) 2x,
    url(../images/pic-3.jpg) 600dpi
  );
  background-image: image-set(
    url(../images/pic-1.jpg) 1x,
    url(../images/pic-2.jpg) 2x,
    url(../images/pic-3.jpg) 600dpi
  );
}