1. 前端常用圖片格式

2. 文件特點(diǎn)概述

2.1 JPEG

jpeg圖片格式的設(shè)計(jì)目標(biāo)，是在不影響人類可分辨的圖片質(zhì)量的前提下，盡可能的壓縮文件大小。這意味著JPEG去掉了一部分圖片的原始信息，也即是進(jìn)行了有損壓縮。JPEG的圖片的優(yōu)點(diǎn)，是采用了直接色，得益于更豐富的色彩，JPEG非常適合用來(lái)存儲(chǔ)照片，用來(lái)表達(dá)更生動(dòng)的圖像效果，比如顏色漸變。

優(yōu)點(diǎn)：圖片體積較小，兼容性好，色彩還原度較高，解碼速度快

缺點(diǎn)：不適合于線條繪圖（drawing）和其他文字或圖示（iconic）的圖形。

2.2 PNG

便攜式網(wǎng)絡(luò)圖片（Portable Network Graphics）,簡(jiǎn)稱PNG,是一種無(wú)損數(shù)據(jù)壓縮位圖圖形文件格式。PNG格式是無(wú)損數(shù)據(jù)壓縮的,PNG格式有8位、24位、32位三種形式,其中8位PNG支持兩種不同 的透明形式（索引透明和alpha透明）,24位PNG不支持透明,32位 PNG 在24位基礎(chǔ)上增加了8位透明通道（32-24===8）,因此可展現(xiàn)256級(jí)透明程度。

優(yōu)點(diǎn)：支持透明，無(wú)損

缺點(diǎn)：體積較大， 也有一些軟件不能使用適合的預(yù)測(cè)，生成的文件較大(IE6只支持PNG8)

2.3 gif

GIF(Graphics Interchange Format)的原義是“圖像互換格式”，GIF文件的數(shù)據(jù)，是一種基于LZW算法(串表壓縮算法)連續(xù)色調(diào)的無(wú)損壓縮格式。是目前web網(wǎng)頁(yè)中十分常用的一種動(dòng)畫文件格式。

優(yōu)勢(shì)：

• 優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時(shí)將體積變得很小
• 可插入多幀,從而實(shí)現(xiàn)動(dòng)畫效果
• 可設(shè)置透明色以產(chǎn)生對(duì)象浮現(xiàn)于背景之上的效果

劣勢(shì)：由于采用了8位壓縮,最多只能處理256種顏色（2的8次方）,故不宜應(yīng)用于真彩圖像。

2.4 webp

2010年谷歌推出的圖片格式,專門用來(lái)在web中使用, 壓縮率只有jpg的2/3或者更低； 第一個(gè)版本的webp圖片格式是有損的, 新版本中webp圖片是無(wú)損的。
相對(duì)于png圖片,webp比png小了45%,但是缺點(diǎn)是你壓縮的時(shí)候需要的時(shí)間更久了，同時(shí)兼容性較差。

2.5 小結(jié)

性能測(cè)試對(duì)比

3. 圖片優(yōu)化策略

影響圖片加載速度的因素主要有：圖片大小、網(wǎng)絡(luò)傳輸帶寬、圖片解碼、渲染加載快慢。其中解碼速率主要取決于圖片的質(zhì)量、分辨率大小、解碼算法及物理配置（CPU、GPU、內(nèi)存...）等。

3.1 異步懶加載

加載圖片的過程一般比較費(fèi)時(shí)，應(yīng)采用異步不阻塞的方式加載，同時(shí)引入懶加載，當(dāng)該圖片真正需要被顯示時(shí)再進(jìn)行加載，同時(shí)緩存之前加載的圖片，常用的緩存策略有LRU等。現(xiàn)在常用的圖片加載庫(kù)基本都已實(shí)現(xiàn)。

3.2 根據(jù)顯示圖片大小加載

一張圖片，在前端顯示用到的大小可能不同，例如：針對(duì)不同分辨率的手機(jī)屏加載不同的圖片；列表界面我們只需顯示圖片的縮略圖，而到詳情頁(yè)時(shí)需加載圖片的大圖等。

對(duì)于以上場(chǎng)景，就可以根據(jù)圖片樣式來(lái)優(yōu)化圖片加載，具體如下：

1. 服務(wù)端需存儲(chǔ)所需的不同分辨率或不同格式的圖片
2. 開放對(duì)應(yīng)樣式的URL接口給前端
3. 前端根據(jù)不同的場(chǎng)景去加載適合的圖片

目前國(guó)內(nèi)已有很多第三方服務(wù)提供了這樣的圖床服務(wù)，比如七牛圖床。

3.3 IconFont

在很多的響應(yīng)式網(wǎng)站里一般會(huì)采用IconFont，因?yàn)榭梢灾苯油ㄟ^font-size和color屬性來(lái)控制icon的大小和顏色，非常方便，而且由于iconfont本身就是字體文件，會(huì)矢量適配各種不同devicePixelRatio，國(guó)內(nèi)常用的有阿里巴巴的FontIcon平臺(tái)。

具體做法是將一些圖標(biāo)打包到一個(gè)字體文件中，然后可通過設(shè)置字體的方式來(lái)加載圖片。
一些工具：

1. 字體制作
2. Android使用

優(yōu)點(diǎn)：

1. 縮放不會(huì)模糊，告別移動(dòng)端中2x/3x以及未來(lái)nx的問題
2. 一套資源可在web、iOS、Android等多個(gè)平臺(tái)使用
3. 一鍵換膚、方便更改圖片顏色，圖片復(fù)用
4. 一定程度上減小包體積

缺點(diǎn)：

1. 顏色單一，無(wú)法實(shí)現(xiàn)多種顏色的圖標(biāo)展示。
2. 因?yàn)槭峭ㄟ^加載字體的方式實(shí)現(xiàn)的，字體間是存在間距的，不能直接根據(jù)視覺稿標(biāo)注來(lái)顯示圖片，同時(shí)在圖標(biāo)的對(duì)齊上也需有所調(diào)整。
3. 在PC上當(dāng)圖標(biāo)小于等于16px時(shí)，或者復(fù)雜度高的圖標(biāo)會(huì)出現(xiàn)比較嚴(yán)重鋸齒，圖標(biāo)無(wú)法展示清晰，特別在chrome下的表現(xiàn)尤為嚴(yán)重。為何出現(xiàn)鋸齒?
4. 在實(shí)際的開發(fā)中，圖標(biāo)或界面經(jīng)常調(diào)整變化，制作及更新成本高。

3.4 使用SVG

SVG在IconFont的基礎(chǔ)上，增加了動(dòng)畫支持，可以使用多色，兼容性及顯示效果上明顯優(yōu)于IconFont。但網(wǎng)上有說(shuō)，SVG在加載較復(fù)雜的圖片時(shí)，速度很慢，這個(gè)未經(jīng)考證，因?yàn)槲易霾怀龊軓?fù)雜的矢量圖 :)。但在簡(jiǎn)單圖標(biāo)的表現(xiàn)上還是不錯(cuò)的，建議使用SVG代替IconFont。

3.5 Webp

Webp格式在移動(dòng)端的應(yīng)用較廣，在移動(dòng)端可通過編譯加載webp的解碼庫(kù)來(lái)解決兼容性問題。如果應(yīng)用中大圖較多的話，帶來(lái)的優(yōu)勢(shì)是很明顯的，其可以大幅縮小圖片體積的大小，同時(shí)在人眼的顯示識(shí)別上沒有太大區(qū)別。

實(shí)測(cè)：APP一張引導(dǎo)頁(yè)圖片727KB，通過webp編碼后大小為33KB，而顯示上幾乎沒多大區(qū)別。當(dāng)然并不是所有圖片都有這么大的壓縮率，平均大概在30%的樣子，但帶來(lái)的優(yōu)勢(shì)是明顯的。

但是在Web端，由于兼容性問題沒法大面積應(yīng)用，網(wǎng)上有基于webp的js插件，只是很久沒有更新了；但目前一些大公司基本是采用如果支持webp就加載webp，不支持就加載jpg或png的策略的，比如淘寶。雖然不清楚他們是怎么實(shí)現(xiàn)的，但是通過PageSpeed可以達(dá)到這樣的效果，參照3.7。

3.6 Guetzli 優(yōu)化JPG

谷歌最近開源了一個(gè)新的JPEG編碼器Guetzli，Guetzli通過引入搜索算法來(lái)減小JPEG和Guetzli在視覺模型上的差別，試圖在最小的質(zhì)量損失和文件大小之間找到平衡。Guetzli視覺模型用一種更全面和細(xì)致的方式來(lái)完成色彩感知和視覺遮蔽，以此來(lái)代替簡(jiǎn)單的色彩轉(zhuǎn)換和離散余弦變換。但Guetzli生成更小文件的代價(jià)在于，這種搜索算法所需要的時(shí)間遠(yuǎn)遠(yuǎn)長(zhǎng)于現(xiàn)有的壓縮方法。

此外，它能兼容現(xiàn)有的瀏覽器、圖像處理應(yīng)用和JPEG標(biāo)準(zhǔn)。

3.7 PageSpeed優(yōu)化頁(yè)面

PageSpeed地址
國(guó)內(nèi)配置參考

圖片轉(zhuǎn)換：

pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;