图片优化

1.响应式图片

大分辨率用大图，小分辨率用小图

.banner{
  background-image: url('/static/large.jpg');
}

@media screen and (max-width: 767px){
  background-image: url('/static/small.jpg');
}

2.图片懒加载

3.使用webp代替其它格式,是因为webp更小，更清晰

<picture>
	<!-- 判断是否兼容-->
	<source type="MIME-TYPE" srcset="./image.webp"></source>
	<img src="./image.png">
</picture>

4.小图标改用字体图标，字体不是图片，加载比图片快

如iconfont

5.图片压缩，可参考以下网站

https://www.webutils.app/image-compress

https://compressor.io/

6.使用base64编码图片 可以节省HTTP请求