頁面優化小總結 （圖片類型）

兔兔這麼可愛，拿來當首圖確定更招人喜歡

圖片在網頁中十分常見。高質量的圖片可以使你的網站更加出色，同時也伴隨着必定的性能損耗。圖片文件較大，會減緩頁面的加載。若是是一個帶寬較低的用戶，用戶體驗將會特別差。因此，開發一個高質量的網頁，須要掌握一些圖片優化的方法。

下面是對圖片相關知識的整理，以及一些圖片相關的優化技巧。

圖片的類型（矢量圖和位圖）

圖片的壓縮方式（有損壓縮和無損壓縮）

常見圖片格式

JPEG

• 有損壓縮，不支持透明，不支持動畫；
• 能夠經過壓縮控制圖片的大小；
• 經常使用壓縮比例60%~80%；
• 適用於存儲攝影，寫實圖像；
• 不適用於有文字及線條的圖片壓縮；

PNG

PNG可分爲三種格式:PNG8，PNG24，PNG32。後面的數字表明這種PNG格式最多能夠索引和存儲的顏色值。」8″表明2的8次方也就是256色，而24則表明2的24次方大概有1600多萬色。

關於透明：

• PNG8支持索引透明和alpha透明，體積小，用的比較多
• PNG24不支持透明;
• 而PNG32在24位的PNG基礎上增長了8位的alpha通道透明，也就是說能夠存儲從徹底透明到徹底不透明一共256個層級的透明度（即所謂的半透明）。

PNG的特性：

• 無損壓縮；
• 存儲灰度圖像時，深度可多到16位；
• 存儲彩色圖像時，深度可多到48位；
• 而且能夠存儲多到16位的α通道數據；
• 對於複雜的圖像，png圖片文件較大，不適用用web網頁；

JPEG和PNG的比較

• 色彩層次豐富，顏色較多的圖像用JPEG存儲；
• 顏色簡單對比強烈的用PNG存儲；
• 對品質要求較高的圖片能夠用PNG存儲，如按鈕，導航背景等；
• 要求不是過高的能夠用JPG存儲下降圖片的大小；
• 特殊狀況，圖片顏色豐富但尺寸較小能夠嘗試用PNG存儲；

GIF

無損壓縮，支持全透明，支持動畫； 8位圖片格式，最多支持256色； 隔行掃描，加載較快； 適用於顏色不太複雜的圖片，如Logo,icon圖標；

APNG

• 無損壓縮，支持透明度，支持動畫；
• 24位圖片格式，顯示圖像更清晰；
• 兼容較差，僅支持部分瀏覽器；

WebP

在以前的文章「圖片的新型格式：webP的工做原理」中已經介紹過；

WebP是一種支持有損壓縮和無損壓縮的圖片文件格式，支持動畫和透明度，根據Google的測試，有損壓縮後的WebP圖片相比於等效質量指標的JPEG圖片減小了25％~34%的體積，大大減小了頁面的加載時間。

GIF、APNG、WEBP比較

（截圖來源：aotu.io/notes/2016/…

經過兩張圖片對比GIF和APNG，圖一是GIF，圖二是APNG

GIF：

最多支持 8 位 256 色，色階過渡很差，圖片具備顆粒感 不支持 Alpha 透明通道，邊緣有雜邊

APNG：

支持 24 位彩色圖片 支持 8 位 Alpha 透明通道 向下兼容 PNG（若是瀏覽器不支持，顯示靜圖）

對比中發現APNG比gif和webp體積小，加載快；

SVG

概念：

SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義用於網絡的基於矢量的圖形 SVG 使用 XML 格式定義圖形 SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有所損失 SVG 是萬維網聯盟的標準 SVG 與諸如 DOM 和 XSL 之類的 W3C 標準是一個總體

與其餘圖像格式相比，使用 SVG 的優點在於：

SVG 可被很是多的工具讀取和修改（好比記事本） SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。 SVG 是可伸縮的 SVG 圖像可在任何的分辨率下被高質量地打印 SVG 可在圖像質量不降低的狀況下被放大 SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製做地圖） SVG 能夠與 Java 技術一塊兒運行 SVG 是開放的標準 SVG 文件是純粹的 XML

雪碧圖

將許多的小圖標合併到一張圖片上，請求一張圖片，經過截取獲取圖標； 減小HTTP請求次數，提升頁面加載速度

base64

• 以「data:image/png;base64」開頭的字符串代理src的url
• 優勢：減小網絡請求；
• 缺點：生成的字符串的體積可能大於原來的圖片，形成CSS體積增大，可讀性變差，兼容性較差，IE8如下不兼容，IE8以上限制了URL的大小；
• 對於極小或者極簡單的圖片，例如只有幾像素的圖片不用考慮跨域問題不想頁面的圖片緩存，能夠用base64編碼

選擇圖片格式

優化總結：

1.使用其它技術代替圖片，如邊框，圓角，陰影，漸變等能夠用CSS設置； 2.能夠用矢量圖代替； 3.選擇合適的圖片格式； 4.使用雪碧圖，base64圖片減小http請求； 5.預加載 6.懶加載