百度權(quán)重查詢 詞庫(kù)網(wǎng) 網(wǎng)站監(jiān)控 服務(wù)器監(jiān)控 seo監(jiān)控 手機(jī)游戲 iPhone游戲

文/來自竹林

現(xiàn)在的互聯(lián)網(wǎng)，是一個(gè)用戶體驗(yàn)至上的時(shí)代，大多數(shù)公司都會(huì)把如何提高產(chǎn)品的易用性放在首要位置。如何提高產(chǎn)品的質(zhì)量則體現(xiàn)在項(xiàng)目開發(fā)的許多階段，例如產(chǎn)品設(shè)計(jì)、UI設(shè)計(jì)和前端開發(fā)等。而圖片優(yōu)化在提高產(chǎn)品質(zhì)量上也起到了舉足輕重的作用，這也就是為什么越來越多的產(chǎn)品團(tuán)隊(duì)更加關(guān)注這個(gè)問題。

本文關(guān)于圖片優(yōu)化的內(nèi)容主要由兩部分構(gòu)成：

1. 整頓總結(jié)網(wǎng)上關(guān)于圖片優(yōu)化的一些體例方法。

2. 自己在項(xiàng)目開發(fā)過程中現(xiàn)實(shí)碰到的問題以及用到的圖片優(yōu)化方案。

如有不足之處，迎接大家指出并增補(bǔ)。

1. 簡(jiǎn)約而不簡(jiǎn)單

Win8和iOS7的出現(xiàn)，將互聯(lián)網(wǎng)行業(yè)中許多產(chǎn)品設(shè)計(jì)帶回到原點(diǎn)，或許更是另一個(gè)新的起點(diǎn)。Win8的Metro UI、iOS7中圖標(biāo)的扁平化設(shè)計(jì)、一向崇尚簡(jiǎn)約的豆瓣網(wǎng)、還有頂著時(shí)代工匠稱號(hào)的老羅所設(shè)計(jì)的錘子ROM，無一不體現(xiàn)著簡(jiǎn)約的風(fēng)格。

言歸正傳，回到我們圖片優(yōu)化的主題上。在產(chǎn)品設(shè)計(jì)和UI設(shè)計(jì)階段，除了內(nèi)容圖片，其他的圖片都是起修飾的作用。也就是對(duì)于傳遞信息來說并非本質(zhì)性的。所以好大的優(yōu)化就是不要圖片。在進(jìn)入到研發(fā)階段之前，就要確認(rèn)設(shè)計(jì)，設(shè)計(jì)自己是否需要用到那么多的圖片，照舊說可以做到更簡(jiǎn)潔！

2. 樣式代替圖片

Chrome，F(xiàn)F等瀏覽器廠商為互聯(lián)網(wǎng)的發(fā)展做了這么多貢獻(xiàn)，為什么我們還要讓那些不兼容CSS3的瀏覽器阻礙互聯(lián)網(wǎng)的發(fā)展呢。因此，讓我們直接使用CSS樣式代替圖片來實(shí)現(xiàn)修飾效果！例如：半透明、圓角、陰影、高光、漸變等。這些效果主流的瀏覽器都能夠好支撐，而對(duì)于那些低端瀏覽器，我們并不會(huì)完全拋棄他們，“漸進(jìn)增強(qiáng)”則是一個(gè)很好的解決方案。至于什么是漸進(jìn)增強(qiáng)，這里不再用過多篇幅去詮釋，假如感愛好可以參考CSS“漸進(jìn)增強(qiáng)”在web制作中常見應(yīng)用舉例。

3. 選擇好合適的圖片

我們常見的圖片格式有JPEG、GIF、PNG。

基本上，內(nèi)容圖片多為照片之類或圖片構(gòu)成較復(fù)雜的情況，適用于JPEG。如網(wǎng)站中的Banner圖、輪播圖、大尺寸背景圖等。

修飾圖片通常更適合用無損壓縮的PNG。而我們主要用到的PNG圖片又分為PNG-8和PNG-24兩種，PNG-8格式不支撐半透明，也是IE6兼容的圖片存儲(chǔ)體例。假如對(duì)圖片質(zhì)量要求較高的半透明或全透明背景，保存成PNG-24更合適。有時(shí)候會(huì)碰到在IE6下應(yīng)用PNG-24圖片的情況，關(guān)于IE6下PNG Alpha透明的解決方案可以參考IE6中PNG Alpha透明。我在項(xiàng)目中常用的方法是AlphaImageLoader篩選器。

GIF基本上除了GIF動(dòng)畫外不要使用。

除了這些格式之外，Chrome、新版Opera、Android 4+支撐WebP格式，IE 9+、IE mobile 10+支撐JPEG XR。這兩個(gè)新格式都支撐無損和有損壓縮，都具有更的壓縮比。當(dāng)然這需要為不同的瀏覽器返回不同的圖片，增添了開發(fā)成本，也增添存儲(chǔ)成本。不過你省了流量或者相同流量下改善了圖片質(zhì)量，提拔了用戶體驗(yàn)。這就需要根據(jù)項(xiàng)目需求進(jìn)行取舍了。

4. 常用的圖片優(yōu)化技巧

CSS Sprites，將同類型的圖標(biāo)或按鈕等背景圖合到一張大圖中，削減頁面請(qǐng)求。

Icon Font，將圖標(biāo)做成字體文件。優(yōu)點(diǎn)是圖標(biāo)支撐多個(gè)尺寸，兼容所有瀏覽器，削減頁面請(qǐng)求等。美中不足的是只支撐純色的icon。

SVG，對(duì)于絕大多數(shù)圖案、圖標(biāo)等，矢量圖更小，且可縮放而無需生成多套圖。現(xiàn)在主流瀏覽器都支撐SVG了，所以可放心使用！

圖片壓縮工具，可以在圖片上線前使用壓縮工具進(jìn)行壓縮，獲得更高的壓縮比。我常用的壓縮工具為Yahoo的Smush.it。 

5. 適用各種資源而不限于圖片的優(yōu)化

data url

Base64是網(wǎng)絡(luò)上好常見的用于傳輸8Bit字節(jié)的編碼體例之一，可用于在HTTP環(huán)境下傳遞較長(zhǎng)的標(biāo)示信息。將圖片轉(zhuǎn)化為base64編碼格式，資源內(nèi)嵌于CSS或HTML中，不必單獨(dú)請(qǐng)求。

該體例的優(yōu)點(diǎn)是：

1. 削減了HTTP請(qǐng)求

2. 避免了圖片重新上傳，還要清理緩存的問題 

不足之處是：

1. IE6, IE7不支撐該類型編碼的圖片作為背景圖

2. 增添了CSS文件的尺寸

3. 維護(hù)成本較高

按照HTTP協(xié)議設(shè)置合理的緩存

具體的緩存策略（如永遠(yuǎn)緩存 + 重命名）、部署策略（如反向代理、CDN等）這里就不睜開了。

Responsive設(shè)計(jì)

為了適應(yīng)現(xiàn)在眾多分辨率和設(shè)備像素比的移動(dòng)設(shè)備，要產(chǎn)生多套不同大小和分辨率的圖片，然后配合Media Query進(jìn)行開發(fā)。這里推薦在進(jìn)行移動(dòng)端頁面開發(fā)時(shí)使用SVG或Icon Font等技術(shù)。這些技術(shù)可以好支撐Retina設(shè)備。關(guān)于更多響應(yīng)式方案，可以參考《響應(yīng)式Web設(shè)計(jì): HTML5和CSS3實(shí)踐》這本書或網(wǎng)上相關(guān)資料，這里不再睜開。

以上為項(xiàng)目中常用的圖片優(yōu)化技術(shù)，只有更多地關(guān)注細(xì)節(jié)，才能做出優(yōu)異的產(chǎn)品。往后會(huì)介紹更多文章中出現(xiàn)的技術(shù)細(xì)節(jié)。