图片优化
最后更新于：2022-04-02 05:27:39
## 前言
本文主要用来讲解一些图片优化常见的技巧以及思路 。
## 优化方法
### 图片质量和体积控制
对于图片的分辨率，相信设计做出来的一定是高分辨率的，但是对于pc端，一般情况是web分辨率 72的即可，对于高分屏，另外设置。对于手机端，因为显示的空间小，所以只需要小分辨率的原图或者缩略图即可。
保证所有端的缩略图是规格一致的，并且尽量小的减小其规格。
### 图片替换技术
既然图片比较浪费性能，那么我们可以采取一些思路来减少页面中的图片。比如：
- 使用图片精灵，来吧一些固定的图片集成到一个大背景中
- 使用图表字体，代替一些常用的、需要设置灵活大小、颜色的图片
- 使用base64或者webbp或者svg之类的图片来代替高清图
备注：
- [webbp了解下](https://www.zhihu.com/question/27201061)
- 如果浏览器不支持
~~~
if (window.supportWebp && (/format\/png/i.test(query) || /format\/jpg/i.test(query))) {
imgUrl = imgUrl.replace(/format\/png/i, 'format/webp').replace(/format\/jpg/i, 'format/webp');
}
~~~
###
';