## 前言 本文主要用来讲解一些图片优化常见的技巧以及思路 。 ## 优化方法 ### 图片质量和体积控制 对于图片的分辨率，相信设计做出来的一定是高分辨率的，但是对于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'); } ~~~ ###