前置知識：二進(jìn)制位數(shù)與色彩的關(guān)系
?內(nèi)容出自前端性能優(yōu)化原理與實(shí)踐御滩，我作為筆記簡單記錄下重罪。
????一個(gè)二進(jìn)制位表示兩種顏色（0|1 對應(yīng)黑|白）娇昙，如果一種圖片格式對應(yīng)的二進(jìn)制位數(shù)有 n 個(gè)，那么它就可以呈現(xiàn) 2^n 種顏色吸重。
JPEG/JPG
????關(guān)鍵字：有損壓縮师枣、體積小怪瓶、加載快、不支持透明
????把圖片體積壓縮至原有體積的 50% 以下時(shí)践美，JPG 仍然可以保持住 60% 的品質(zhì)洗贰。此外，JPG 格式以 24 位存儲單個(gè)圖拨脉，可以呈現(xiàn)多達(dá) 1600 萬種顏色哆姻，足以應(yīng)對大多數(shù)場景下對色彩的要求
使用場景
????JPG 適用于呈現(xiàn)色彩豐富的圖片宣增，在我們?nèi)粘ｉ_發(fā)中玫膀，JPG 圖片經(jīng)常作為大的背景圖、輪播圖或 Banner 圖出現(xiàn)爹脾。
PNG-8 與 PNG-24
關(guān)鍵字：無損壓縮帖旨、質(zhì)量高、體積大灵妨、支持透明
PNG 的優(yōu)點(diǎn)
????PNG 圖片對透明度有良好的支持解阅。它彌補(bǔ)了上文我們提到的 JPG 的局限性，唯一的 BUG 就是體積太大泌霍。
應(yīng)用場景
? ? 用它來呈現(xiàn)小的 Logo货抄、顏色簡單且對比強(qiáng)烈的圖片或背景等。
SVG
關(guān)鍵字：文本文件朱转、體積小蟹地、不失真、兼容性好
????SVG（可縮放矢量圖形）是一種基于 XML 語法的圖像格式藤为。它和本文提及的其它圖片種類有著本質(zhì)的不同：SVG 對圖像的處理不是基于像素點(diǎn)怪与，而是是基于對圖像的形狀描述。
SVG 的特性
? ?SVG 與 PNG 和 JPG 相比缅疟，文件體積更小分别，可壓縮性更強(qiáng)。
? ?它最顯著的優(yōu)勢還是在于圖片可無限放大而不失真這一點(diǎn)上存淫。
????SVG 的局限性主要有兩個(gè)方面耘斩，一方面是它的渲染成本比較高，另一方面桅咆，SVG 存在著其它圖片格式所沒有的學(xué)習(xí)成本（它是可編程的）括授。
SVG 的使用方式與應(yīng)用場景
????SVG 是文本文件，可以編輯，也可以把對圖形的描述寫入以 .svg 為后綴的獨(dú)立文件
將 SVG 寫入 HTML：
<body>
? ? <svg xmlns="http://www.w3.org/2000/svg"? width="200" height="200">
? ? ? ? <circle cx="50" cy="50" r="50" />
? ? </svg>
</body>
將 SVG 寫入獨(dú)立文件后引入 HTML:
<img src="文件名.svg" alt="">
Base64
關(guān)鍵字：文本文件刽脖、依賴編碼羞海、小圖標(biāo)解決方案
????Base64 并非一種圖片格式，而是一種編碼方式曲管。Base64 和雪碧圖一樣却邓，是作為小圖標(biāo)解決方案
WebP
????它于 2010 年被提出， 是 Google 專為 Web 開發(fā)的一種旨在加快圖片加載速度的圖片格式院水，它支持有損壓縮和無損壓縮腊徙。
WebP 的優(yōu)點(diǎn)
????WebP 像 JPEG 一樣對細(xì)節(jié)豐富的圖片信手拈來，像 PNG 一樣支持透明檬某，像 GIF 一樣可以顯示動態(tài)圖片——它集多種圖片文件格式的優(yōu)點(diǎn)于一身撬腾。
WebP 的局限性
????任何新生事物，都逃不開兼容性的大坑
