前言
HTTP Archieve有個統計，圖片內容已經佔到了互聯網內容總量的62%，也就是說超過一半的流量和時間都用來下載圖片。從性能優化的角度看，圖片也絕對是優化重點和熱點之一。
“圖片優化既是一門藝術，也是一門科學，圖片優化是一門藝術，是因爲單個圖片的壓縮不存在最好的特定性方案，而圖片優化之所以是一門科學，是因爲許多開發得很出色的方法和算法可以明顯減小圖片的大小。要找到圖片的最優設置，需要按照許多維度進行認真分析：格式能力、編碼數據內容、像素尺寸等。
針對業務場景選擇圖片格式
1. JPEG/JPG
特點：有損壓縮、體積小、不支持透明、在壓縮率不高時保留的細節還不錯。
使用場景：顏色豐富的照片，
JPG是通用的選擇，如大的背景圖、輪播圖或Banner圖。
2. PNG
特點:無損壓縮、質量高、體積大、支持透明。
使用場景：透明圖片的業務場景，如小的
Logo、顏色簡單且對比強烈的圖片或背景。
3. SVG
特點：文本文件、體積小、不失真、兼容性好、無需多端、多分辨率適配、較強的交互特性、渲染成本比較高。
使用場景：圖片色彩相對簡單的業務場景。
4. Base64
特點：文本文件、依賴編碼，
Base64編碼後，圖片大小會膨脹爲原文件的4/3。使用場景：小圖標（<8KB）解決方案。
5. WebP
“打開淘寶網，假如你是
chrome瀏覽器，你會發現，所有圖片都是webp結尾的，淘寶網圖片運用了webp。假如你是safari瀏覽器，看到圖片就是jpg或者png了，淘寶網自動判斷瀏覽器支持不支持webp，假如支持，則輸出相應的圖片格式！
特點：
WebP圖片是一種新的圖像格式，由Google開發。與png、jpg相比，相同的視覺體驗下，WebP圖像的尺寸縮小了大約30％。另外，WebP圖像格式還支持有損壓縮、無損壓縮、透明和動畫，但有兼容性問題。使用場景：圖片佔較大的商場類網站，目前
Google、Facebook、ebay、淘寶、騰訊、美團等已經在用。
圖片在線轉換工具推薦
在前端工程化的今天，不會讓你手動轉換圖片，下面幾款工具可以測試玩一玩。
智圖：https://zhitu.isux.us（推薦）
雪碧圖樣式生成：http://www.spritecow.com/（推薦）
Chrome 插件：Save image as Type （推薦），WebP Highlighter
改圖寶：https://www.gaitubao.com/jpg-gif-png
CloudConvert：https://cloudconvert.com/jpeg-to-webp
converter：https://www.office-converter.com/JPEG-to-JPG
squoosh：https://squoosh.app （谷歌出品，github）
總結
根據具體的業務場景來選擇不同圖片格式。
減少網站的http請求數量，如：雪碧圖（
pc端用的比較多，如facebook）、Image inline（Base64或SVG）。圖片壓縮。
WebP + 兼容性處理。
end
❤️ 看完三件事
如果你覺得這篇內容對你挺有啓發，我想邀請你幫我三個小忙：
點個「在看」，讓更多的人也能看到這篇內容（喜歡不點在看，都是耍流氓 -_-）
關注我的博客 https://github.com/SHERlocked93/blog，讓我們成爲長期關係
關注公衆號「前端下午茶」，持續爲你推送精選好文，也可以加我爲好友，隨時聊騷。
在看點這裏
