前端优化之响应式图片

在做响应式网站时，经常会处理不同屏幕展示不同图片的问题。通常做法是在在样式中通过@media媒体查询，显示不同大小图片。但问题是所有的图片都会加载，会造成多余的请求，影响性能。现在有一种新的技术--响应式图片，可以解决此问题。参照响应式图片

1）img 标签的srcset/sizes属性

<img
  style="width: 100%;"
  srcset="
  ./images/banner.jpg 1920w,
  ./images/banner_small.jpg 375w
  "
  src="./images/banner.jpg"
  alt="banner"
  sizes="(max-width: 480px) 90vw, 100vw" 
 />
 
 
 srcset中的每一项代表不同尺寸的图片，用逗号隔开。
 每一项由“图片路径+空格+图片本身尺寸（单位为w）”构成。
 
 sizes每一项代表视图大小，用逗号隔开。
 每一项由“媒体查询+空格+实际展示尺寸（单位为vw或px）”构成
 最后一项是默认值，没有媒体查询

2）picture标签

<picture>
  <source type="image/webp" media="(max-width: 799px)" srcset="./images/banner-small.WEBP" />
  <source media="(max-width: 799px)" srcset="./images/banner-small.jpg" />
  <source media="(min-width: 1000px)" srcset="./images/banner.jpg" />
  <img src="./images/banner_normal.jpg"/>
</picture>
通过添加source以及媒体查询，可以在不同尺寸展示不同图片。source通过type属性传递webp格式的图片，体积更小。
注意：source的顺序非常重要。

picture更直观，可以考虑优先使用。

3)图片添加loading="lazy"属性延迟加载

延迟加载图像，直到它和视口接近到一个计算得到的距离（由浏览器定义）。 测试发现这个距离的值比较大，并且不要在首屏的图片使用这个功能，后续视具体情况使用。