HTTP Archieve有個(gè)統(tǒng)計(jì),圖片內(nèi)容已經(jīng)占到了互聯(lián)網(wǎng)內(nèi)容總量的62%,也就是說(shuō)超過(guò)一半的流量和時(shí)間都用來(lái)下載圖片。從性能優(yōu)化的角度看,圖片也絕對(duì)是優(yōu)化的熱點(diǎn)和重點(diǎn)之一,Google PageSpeed或者Yahoo的14條性能優(yōu)化規(guī)則無(wú)不把圖片優(yōu)化作為重要的優(yōu)化手段,本文覆蓋了Web圖片優(yōu)化的方方面面,從基本的圖片格式選擇、到尚未被廣泛支持的響應(yīng)式圖片均有所提及。
Google Web Fundamentals的說(shuō)法我很喜歡:
圖片優(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ū)懥撕芏嘣愀獾拇a把需要的文字在服務(wù)器上生成圖片并緩存起來(lái)。用戶下載起來(lái)很慢,搜索引擎也完全無(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)畫。提供與分辨率無(wú)關(guān)的效果,在任何分辨率和縮放級(jí)別都可以顯示得非常清晰,占用的空間也很小。 網(wǎng)絡(luò)字體。現(xiàn)在連很多圖標(biāo)庫(kù)都是用字體方式提供,保持文字的可搜索性同時(shí)擴(kuò)展顯示的樣式。
前端工程師最好能和設(shè)計(jì)師、產(chǎn)品經(jīng)理保持溝通,幫助他們了解到什么樣的效果比較“簡(jiǎn)潔、高效、可維護(hù)”,畢竟對(duì)于CSS來(lái)說(shuō)改變圓角矩形的Radius可以實(shí)時(shí)看到效果,用圖片的話至少要重新生成圖片、切圖并替換資源。Retina、高分辨率屏幕、多尺寸的設(shè)備,這些都加快了非圖片特效的發(fā)展,想想在高分辨率屏幕下Windows 7的慘不忍睹,就知道原生的圖片資源絕對(duì)不是多多益善。
圖片格式的選擇
如果效果真的需要圖片來(lái)表現(xiàn),那么選擇圖片格式是優(yōu)化的第一步。我們經(jīng)常聽到的詞語(yǔ)包括矢量圖、標(biāo)量圖、SVG、有損壓縮、無(wú)損壓縮等等,我們首先說(shuō)明各種圖片格式的特點(diǎn):
其中APNG和WebP格式出現(xiàn)的較晚,尚未被Web標(biāo)準(zhǔn)所采納,只有在特定平臺(tái)或?yàn)g覽器環(huán)境可以預(yù)知的情況下加以采用,雖然均可以在不支持的環(huán)境中較好的功能降級(jí),但本節(jié)暫不討論這兩種格式。圖片格式選擇過(guò)程如下:
顏色豐富的照片,JPG是通用的選擇
人眼的結(jié)構(gòu)很適合查看JPG壓縮后的照片,可以充分的忽略并在腦中補(bǔ)齊細(xì)節(jié) JPG在壓縮率不高時(shí)保留的細(xì)節(jié)還是不錯(cuò)的 WebP能夠比JPG減少30%的體積,但目前兼容性較差
如果需要較通用的動(dòng)畫,GIF是唯一可用的選擇
GIF支持的顏色范圍為256色,而且僅支持完全透明/完全不透明 GIF在顯示顏色豐富的動(dòng)畫時(shí)可能出現(xià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)畫大表情)可以考慮PNG-8 PNG-24可以顯示真彩色,但不支持透明,顏色豐富的圖片推薦使用(如屏幕截圖、界面設(shè)計(jì)圖) PNG-32可以顯示真彩色,同時(shí)支持256階透明,效果最好但尺寸也最大
圖片尺寸的選擇
尺寸,曾經(jīng)是最不需要討論的話題,但自從Retina出現(xiàn)之后世界就變得復(fù)雜多了。
這里只說(shuō)我們關(guān)心的部分和結(jié)論,我們需要分清不同類型的像素:CSS像素和設(shè)備像素。一個(gè) CSS像素可能包含多個(gè)設(shè)備像素。對(duì)于圖片來(lái)說(shuō),在高DPI的屏幕上需要使用分辨率更高的圖片,如果我們討論的是Retina,那么就需要2倍分辨率(幾乎4倍尺寸)的圖片。這幾乎沒有取巧的空間,屏幕就是那么大,需要的圖片也就是那么大。(鴿子為什么那么大?^_^)
我們能夠控制的地方是“恰好”顯示所需尺寸的圖片。例如在屏幕中通過(guò)CSS或者標(biāo)簽的wihth/height屬性,將一副200x200的圖片調(diào)整為100x100大小,那么這其中就有(200x200)-(100x100)=30000個(gè)像素是浪費(fèi)的,這占到了圖片尺寸的75%!
之所以有這么大的浪費(fèi),是因?yàn)閳D片的尺寸與面積基本成正比,與寬高的平方成正比。因此良好的計(jì)算客戶端實(shí)際顯示的圖片尺寸,能夠大大減小圖片的大小。即使只有長(zhǎng)和寬都只有10px被浪費(fèi),但是當(dāng)圖片足夠大時(shí),這部分也將產(chǎn)生很大影響。
響應(yīng)式圖片
上面提到“恰好”顯示客戶端所需大小的圖片,聽上去很容易不是嗎?但當(dāng)響應(yīng)式布局出現(xiàn)后,這就變得極其困難。我們要支持上至1920寬度,下至320寬度的無(wú)數(shù)種設(shè)備,如果使用1920寬度的圖片,那么在小型設(shè)備(這類設(shè)備往往對(duì)網(wǎng)速和流量更加敏感)上每個(gè)用戶都要付出額外的帶寬和等待時(shí)間,如果使用320寬度的圖片,那么在1920的屏幕上就像是在高清屏上使用DOS那么讓人難以接受。
很自然的,我們需要圖片也能“響應(yīng)式”加載,根據(jù)所在設(shè)備的不同,加載不同尺寸的圖片。響應(yīng)式圖片尚沒有寫入Web標(biāo)準(zhǔn),實(shí)現(xiàn)起來(lái)也有諸多不便和兼容性限制。
響應(yīng)式圖片雖然尚未成為標(biāo)準(zhǔn),但這是Web圖片優(yōu)化的一柄利器,一旦被廣泛支持,再?zèng)]有比縮小圖片尺寸更有效的優(yōu)化方法了。
優(yōu)化JPG和PNG
選擇了正確的圖片格式,按照正確的大小生成了圖片后,我們還需要對(duì)圖片進(jìn)行進(jìn)一步優(yōu)化,這種優(yōu)化一般分兩步進(jìn)行:
有損優(yōu)化,刪除沒有出現(xiàn)或極少出現(xiàn)過(guò)的顏色,合并相鄰的相近顏色。這一步并不必須,如PNG格式就直接進(jìn)入下一步 無(wú)損優(yōu)化,壓縮數(shù)據(jù),刪除不必要的信息
JPG和PNG格式的圖片生成后,一般還有進(jìn)一步優(yōu)化的空間,例如JPG格式的照片中,可能攜帶有相機(jī)的Exif信息,PNG格式的圖片中可能帶有Fireworks等軟件的圖層信息等。去除這些額外信息后,還可以通過(guò)減小圖片的調(diào)色板,去除沒有出現(xiàn)過(guò)的顏色,以及合并相鄰的相同顏色等手段來(lái)進(jìn)行優(yōu)化。原理性的內(nèi)容這里不再贅述,僅介紹工程中可用的優(yōu)化工具。
不同格式的圖片有一系列工具,這些工具有有更多種參數(shù)調(diào)節(jié)方案,常見的幾種調(diào)節(jié)工具有:
如果你真的需要追求各種圖片的極限壓縮,可以參閱這些工具的文檔,但是對(duì)于一般的Web應(yīng)用,面對(duì)的圖片種類多樣,幾乎不可能在工程中實(shí)現(xiàn)對(duì)每種工具的獨(dú)立配置,因此推薦使用以下工具來(lái)進(jìn)行優(yōu)化。這些工具往往使用了上表中的一種或幾種優(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)化。這是我在寫文章時(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)化需求,或者不在開發(fā)機(jī)上沒有優(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ì)比大小,真的沒關(guān)系么~
優(yōu)化SVG
所有較新的瀏覽器都支持可縮放矢量圖(SVG),SVG是基于XML的圖片格式,適用于二維圖片。可以將SVG標(biāo)記直接嵌入網(wǎng)頁(yè),也可以作為外部資源嵌入?梢酝ㄟ^(guò)大多數(shù)基于矢量的繪圖軟件創(chuàng)建SVG文件。這是一段簡(jiǎn)單的SVG圖形:
這個(gè)圓形輪廓為黑色,背景為紅色,從Adobe Illustrator直接導(dǎo)出。可以從中看到大量元數(shù)據(jù),例如圖層信息、注釋和XML名稱空間等等,在瀏覽器中呈現(xiàn)資源時(shí),通常不需要這些數(shù)據(jù)。因此我們需要使用一些工具去除這些不必要的元數(shù)據(jù),僅保留必須的標(biāo)記。
SVGO工具可以縮減SVG文件的體積,在這個(gè)的例子中,SVGO能夠?qū)llustrator生成的SVG文件大小減小58%,從470字節(jié)縮減到199字節(jié)。
由于SVG是基于XML的格式,本質(zhì)上是純文本,所以,還可以采用GZIP壓縮來(lái)減小傳輸大小,當(dāng)然這需要一些服務(wù)器配置,例如在apache服務(wù)器中設(shè)置:
AddType image/svg+xml .svgAddOutputFilterByType DEFLATE image/svg+xml
來(lái)對(duì)SVG文件啟用GZip壓縮(當(dāng)然你還需要先加載deflate模塊并進(jìn)行適當(dāng)配置,GZip的配置超出了本文的范疇,這部分內(nèi)容請(qǐng)自行Google)
優(yōu)化GIF和APNG
GIF有很多好處,在顏色數(shù)較低的時(shí)候能夠大幅減小圖片體積,而且他也是唯一能夠較為通用的展示動(dòng)畫的圖片格式。關(guān)于GIF格式的優(yōu)化原理我并不熟悉,只是在工程中直接使用成型的壓縮工具,在后文自動(dòng)優(yōu)化章節(jié)的Grunt中,會(huì)介紹通過(guò)Grunt Task進(jìn)行自動(dòng)優(yōu)化的方法。
關(guān)于APNG,目前瀏覽器對(duì)他的支持還不夠好,不過(guò)在支持HTML5的場(chǎng)景中,有成熟的開源工具apng-canvas可以用于支持APNG。
騰訊ISUX團(tuán)隊(duì)有篇文章介紹iSparta工具:http://isux.tencent.com/introduction-of-apng.html。這是目前幾乎唯一能夠批量處理APNG文件的工具,感興趣的同學(xué)可以在那篇文章里得到更多地了解。
自動(dòng)優(yōu)化
前面說(shuō)了太多關(guān)于如何優(yōu)化各種不同格式圖片的方法和工具,優(yōu)化圖片需要大量重復(fù)性的勞動(dòng),作為工程師顯然不會(huì)忍受這一點(diǎn),因此也產(chǎn)生出了很多工具對(duì)圖片進(jìn)行自動(dòng)優(yōu)化,這里主要介紹CDN、Grunt/Gulp、Google PageSpeed三種方式。
自動(dòng)優(yōu)化:CDN
使用CDN對(duì)圖片自動(dòng)進(jìn)行優(yōu)化,我在國(guó)外的CDN提供商處很少見到這類服務(wù),倒是國(guó)內(nèi)的兩大新秀CDN七牛和又拍在這方面都做了大量工作。其工作方式為,向CDN請(qǐng)求圖片的URL參數(shù)中包含了圖片處理的參數(shù)(格式、寬高等),CDN服務(wù)器根據(jù)請(qǐng)求生成所需的圖片,發(fā)送到用戶瀏覽器。
七牛云存儲(chǔ)的圖片處理接口極其豐富,覆蓋了圖片的大部分基本操作,例如:
圖片裁剪,支持多種裁剪方式(如按長(zhǎng)邊、短邊、填充、拉伸等) 圖片格式轉(zhuǎn)換,支持JPG, GIF, PNG, WebP等,支持不同的圖片壓縮率 圖片處理,支持圖片水印、高斯模糊、重心處理等
七牛云存儲(chǔ)的圖片處理接口使用并不復(fù)雜,例如下面這張?jiān)瓐D:
我們通過(guò)如下URL請(qǐng)求,裁剪正中部分,等比縮小生成200x200縮略圖:
http://upload.chinaz.com/2014/1222/1419227799432.jpg?imageView2/1/w/200/h/200
自動(dòng)優(yōu)化:Grunt/Gulp
這里介紹用于圖片優(yōu)化的Grunt組件:grunt-image。前端工程師的重復(fù)性工作,例如合并靜態(tài)資源、壓縮JS和CSS文件、編譯SASS等都可以使用Grunt等自動(dòng)化工具批量完成,圖片優(yōu)化也是如此。
grunt-image非常強(qiáng)大,按照作者的介紹,其內(nèi)部加載的圖片優(yōu)化工具包括了pngquant, optipng, advpng, zopflipng, pngcrush, pngout, mozjpeg, jpegRecompress, jpegoptim, gifsicle和svgo。支持批量自動(dòng)優(yōu)化PNG, JPG, SVG和GIF,速度也不錯(cuò),配置方式支持單圖片優(yōu)化和全目錄優(yōu)化:
自動(dòng)優(yōu)化:Google PageSpeed
Google做事風(fēng)格比較徹底,看見哪個(gè)軟件不好用就拿來(lái)直接fork出新版本或者干脆重寫,對(duì)于Web優(yōu)化,Google發(fā)布了了Google PageSpeed這個(gè)服務(wù)器模塊,可以在apache或ngnix中加載,通過(guò)在服務(wù)器配置文件中進(jìn)行設(shè)置來(lái)進(jìn)行自動(dòng)化的優(yōu)化。對(duì)于圖片格式轉(zhuǎn)換、圖片優(yōu)化甚至圖片LazyLoad都有相關(guān)選項(xiàng)。這部分展開會(huì)非常長(zhǎng),請(qǐng)感興趣的同學(xué)參考Google的手冊(cè)。
--wizcabbit的博客
轉(zhuǎn)載請(qǐng)保留原文地址: http://m.448gfe.cn/show-323.html