## 前言 本文主要用來講解一些圖片優化常見的技巧以及思路 。 ## 優化方法 ### 圖片質量和體積控制 對于圖片的分辨率，相信設計做出來的一定是高分辨率的，但是對于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'); } ~~~ ###