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