HTTP Archieve有個(gè)統(tǒng)計(jì)，圖片內(nèi)容已經(jīng)占到了互聯(lián)網(wǎng)內(nèi)容總量的62%，也就是說超過一半的流量和時(shí)間都用來下載圖片。從性能優(yōu)化的角度看，圖片也絕對(duì)是優(yōu)化的熱點(diǎn)和重點(diǎn)之一，Google PageSpeed或者Yahoo的14條性能優(yōu)化規(guī)則無不把圖片優(yōu)化作為重要的優(yōu)化手段，本文覆蓋了Web圖片優(yōu)化的方方面面，從基本的圖片格式選擇、到尚未被廣泛支持的響應(yīng)式圖片均有所提及。

Google Web Fundamentals的說法我很喜歡：

圖片優(yōu)化既是一門藝術(shù)，也是一門科學(xué)，圖片優(yōu)化是一門藝術(shù)，是因?yàn)閱蝹�(gè)圖片的壓縮不存在最好的特定性方案，而圖片優(yōu)化之所以是一門科學(xué)，是因?yàn)樵S多開發(fā)得很出色的方法和算法可以明顯減小圖片的大小。要找到圖片的最優(yōu)設(shè)置，需要按照許多維度進(jìn)行認(rèn)真分析：格式能力、編碼數(shù)據(jù)內(nèi)容、像素尺寸等。

真的要用圖片嗎？

要實(shí)現(xiàn)需要的效果，真的需要圖片嗎？這是首先要問自己的問題。瀏覽器和Web標(biāo)準(zhǔn)的發(fā)展速度極快，記得數(shù)年前我在用微軟Silverlight 1.0寫視頻播放器的時(shí)候，中文還不能使用自定義字體顯示，所以那時(shí)候?qū)懥撕芏嘣愀獾拇�碼把需要的文字在服務(wù)器上生成圖片并緩存起來。用戶下載起來很慢，搜索引擎也完全無法檢索這些文字。

但是現(xiàn)在不一樣了，很多特效（漸變、陰影、圓角等等）都可以用純粹的HTML、CSS、SVG等加以實(shí)現(xiàn)，實(shí)現(xiàn)這些效果少則寥寥數(shù)行代碼，多則加載額外的庫(kù)（一張普通的照片比非常強(qiáng)大的效果庫(kù)也大了許多）。這些效果不但需要的空間很小，而且在多設(shè)備、多分辨率下都能很好的工作，在低級(jí)瀏覽器上也可以實(shí)現(xiàn)較好的功能降級(jí)。因此在存在備選技術(shù)的情況下，應(yīng)該首先選擇這些技術(shù)，只有在不得不使用圖片的時(shí)候才加入真正的圖片。

備選技術(shù)

• CSS效果、CSS動(dòng)畫。提供與分辨率無關(guān)的效果，在任何分辨率和縮放級(jí)別都可以顯示得非常清晰，占用的空間也很小。
• 網(wǎng)絡(luò)字體�，F(xiàn)在連很多圖標(biāo)庫(kù)都是用字體方式提供，保持文字的可搜索性同時(shí)擴(kuò)展顯示的樣式。

前端工程師最好能和設(shè)計(jì)師、產(chǎn)品經(jīng)理保持溝通，幫助他們了解到什么樣的效果比較“簡(jiǎn)潔、高效、可維護(hù)”，畢竟對(duì)于CSS來說改變圓角矩形的Radius可以實(shí)時(shí)看到效果，用圖片的話至少要重新生成圖片、切圖并替換資源。Retina、高分辨率屏幕、多尺寸的設(shè)備，這些都加快了非圖片特效的發(fā)展，想想在高分辨率屏幕下Windows 7的慘不忍睹，就知道原生的圖片資源絕對(duì)不是多多益善。

圖片格式的選擇

如果效果真的需要圖片來表現(xiàn)，那么選擇圖片格式是優(yōu)化的第一步。我們經(jīng)常聽到的詞語包括矢量圖、標(biāo)量圖、SVG、有損壓縮、無損壓縮等等，我們首先說明各種圖片格式的特點(diǎn)：

其中APNG和WebP格式出現(xiàn)的較晚，尚未被Web標(biāo)準(zhǔn)所采納，只有在特定平臺(tái)或?yàn)g覽器環(huán)境可以預(yù)知的情況下加以采用，雖然均可以在不支持的環(huán)境中較好的功能降級(jí)，但本節(jié)暫不討論這兩種格式。圖片格式選擇過程如下：

標(biāo)簽： 響應(yīng)式圖片 Web性能優(yōu)化 圖片優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。