在網(wǎng)頁(yè)上大部分有圖片構(gòu)成，也就是說(shuō)超過(guò)一半的流量和時(shí)間都是用來(lái)下載圖片。從性能優(yōu)化的角度看，圖片也絕對(duì)是優(yōu)化的熱點(diǎn)和重點(diǎn)之一。
圖片格式的選擇
如果效果真的需要圖片來(lái)表現(xiàn)，那么選擇圖片格式是優(yōu)化的第一步。我們經(jīng)常聽(tīng)到的詞語(yǔ)包括矢量圖、標(biāo)量圖、SVG、有損壓縮、無(wú)損壓縮等等，我們首先說(shuō)明各種圖片格式的特點(diǎn)
圖片格式 ? ? ? 壓縮方式 ? ? ? ? 透明度 ? ? ? 動(dòng)畫(huà) ? ? ? ?瀏覽器兼容 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 適應(yīng)場(chǎng)景
JPEG ? ? ? ? 有損壓縮 ? ? ? ? ?不支持 ? ? ?不支持 ? ? ? ? ?所有 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?復(fù)雜顏色及形狀、尤其是照片
GIF ? ? ? ? ? ?無(wú)損壓縮 ? ? ? ? ?支持 ? ? ? ? 支持 ? ? ? ? ? ? ? 所有 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 簡(jiǎn)單顏色，動(dòng)畫(huà)
PNG ? ? ? ? ? 無(wú)損壓縮 ? ? ? ? ?支持 ? ? ? ?不支持 ? ? ? ? ? ? 所有 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?需要透明時(shí)
APNG ? ? ? ? 無(wú)損壓縮 ? ? ? ? 支持 ? ? ? ? 支持 ? ? ? Firefox 、Safari、iOS Safari ? ? ? ? ? ? ? ? ? ? ? ? ? ? 需要半透明效果的動(dòng)畫(huà)
WebP ? ? ? ? 有損壓縮 ? ? ? ? 支持 ? ? ? ? 支持 ? ? Chrome、Opera、Android、Chrome、Android、Browser ? ? ? 復(fù)雜顏色及形狀瀏覽器平臺(tái)可預(yù)知
SVG ? ? ? ? ? 無(wú)損壓縮 ? ? ? ? 支持 ? ? ? ?支持 ? ? ? ?所有（IE8以上） ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?簡(jiǎn)單圖形，需要良好的放縮體驗(yàn)需要?jiǎng)討B(tài)控制圖片特效
顏色豐富的照片，JPG是通用的選擇
人眼的結(jié)構(gòu)很適合查看JPG壓縮后的照片，可以充分的忽略并在腦中補(bǔ)齊細(xì)節(jié)
JPG在壓縮率不高時(shí)保留的細(xì)節(jié)還是不錯(cuò)的
WebP能夠比JPG減少30%的體積，但目前兼容性較差
如果需要較通用的動(dòng)畫(huà)，GIF是唯一可用的選擇
GIF支持的顏色范圍為256色，而且僅支持完全透明/完全不透明
GIF在顯示顏色豐富的動(dòng)畫(huà)時(shí)可能出現(xiàn)顏色不全、邊緣鋸齒等問(wèn)題
如果圖片由標(biāo)準(zhǔn)的幾何圖形組成，或需要使用程序動(dòng)態(tài)控制其顯示特效，可以考慮SVG格式
SVG是使用XML定義的矢量圖形，生成的圖片在各種分辨率下均可自由放縮
SVG中可以通過(guò)JavaScript等接口自由變換圖片特效，可以完成其中部分元素的自由旋轉(zhuǎn)、移動(dòng)、變換顏色等
如果需要清晰的顯示顏色豐富的圖片，PNG比較好
PNG-8能夠顯示256種顏色，但能夠同時(shí)支持256階透明，因此顏色數(shù)較少但需要半透明的情景（如微信動(dòng)畫(huà)大表情）可以考慮PNG-8
PNG-24可以顯示真彩色，但不支持透明，顏色豐富的圖片推薦使用（如屏幕截圖、界面設(shè)計(jì)圖）
PNG-32可以顯示真彩色，同時(shí)支持256階透明，效果最好但尺寸也最大
優(yōu)化jpg和png
? ?工具 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 用途
jpegtran? ? ? ? ? ? ? ? ? ??優(yōu)化JPG圖片
OptiPNG? ? ? ? ? ? ? ? ??無(wú)損PNG優(yōu)化
AdvPNG? ? ? ? ? ? ? ? ??無(wú)損PNG優(yōu)化
PNGQuant? ? ? ? ? ? ??有損PNG優(yōu)化
ImageOptim (Mac)
主頁(yè)：https://imageoptim.com/
Mac平臺(tái)下非常贊的圖片優(yōu)化工具，只需要把需要優(yōu)化的圖片拖拽進(jìn)ImageOptim，就能夠完成對(duì)圖片的優(yōu)化。設(shè)置選擇的也很豐富，目前支持JPG和PNG的優(yōu)化。這是我在寫(xiě)文章時(shí)最常用到的工具，把網(wǎng)站用到的圖片拖進(jìn)去，優(yōu)化就完成了~
Kraken (Web)
主頁(yè)：https://kraken.io/
在免費(fèi)模式下可以上傳圖片，優(yōu)化后打包下載，很多國(guó)外企業(yè)也選擇了它的收費(fèi)服務(wù)。親自測(cè)試Kraken的圖片優(yōu)化結(jié)果比ImageOptim一般要小3%左右，效果不錯(cuò)，當(dāng)然價(jià)格也不錯(cuò)。適合偶爾有圖片優(yōu)化需求，或者不在開(kāi)發(fā)機(jī)上沒(méi)有優(yōu)化軟件可以使用的情況。
智圖 (Web)
主頁(yè)：http://zhitu.tencent.com/
騰訊ISUX團(tuán)隊(duì)有篇文章介紹智圖：http://isux.tencent.com/zhitu.html
國(guó)貨當(dāng)自強(qiáng)，騰訊的智圖工具推出不久，但實(shí)測(cè)效果很好，而且提供了Gulp的自動(dòng)化支持，這部分會(huì)在后面自動(dòng)優(yōu)化章節(jié)介紹。只想建議一句，Kraken的首頁(yè)比智圖美好幾百倍…… 而且把壓縮前的PNG和壓縮后的JPG放在一起對(duì)比大小，真的沒(méi)關(guān)系么~
優(yōu)化SVG
所有較新的瀏覽器都支持可縮放矢量圖(SVG)，SVG是基于XML的圖片格式，適用于二維圖片。可以將SVG標(biāo)記直接嵌入網(wǎng)頁(yè)，也可以作為外部資源嵌入。可以通過(guò)大多數(shù)基于矢量的繪圖軟件創(chuàng)建SVG文件。這是一段簡(jiǎn)單的SVG圖形：
就寫(xiě)這么多了，如有補(bǔ)充的歡迎
