注明：本人原創(chuàng)翻譯，原版為Essential Image Optimization電子書钠署，這里將其拆分為幾篇文章發(fā)布糠聪。另外，文中部分鏈接可能會因為“網(wǎng)絡(luò)”原因無法打開谐鼎。不必著急舰蟆，我會慢慢將其中一些比較好的內(nèi)容翻譯過來發(fā)表，都會在這個“Web圖像技術(shù)深究”專題中狸棍。
目錄
- ?介紹
- 如何判斷我的圖像是否需要優(yōu)化身害？
- 如何選擇正確的圖像格式？
- “素人”JPEG
- JPEG的壓縮模式
-
什么是WebP？
- WebP的表現(xiàn)如何牵触？
- 誰在生產(chǎn)環(huán)境中使用WebP淮悼？
- WebP編碼如何執(zhí)行？
- WebP的瀏覽器支持
- 如何將我的圖像轉(zhuǎn)換為WebP揽思？
- 如何在我的操作系統(tǒng)上查看WebP圖像袜腥？
- 如何提供WebP？
- SVG優(yōu)化
- 避免使用有損編解碼器重復(fù)壓縮圖像
-
減少不必要的圖像解碼和尺寸調(diào)整帶來的損耗
- 使用srcset提供HiDPI圖像
- 藝術(shù)化的響應(yīng)
- 顏色管理
- 圖像拼合技術(shù)
- 延遲加載非關(guān)鍵圖像
- 避免<code>display: none;</code>的陷阱
- 圖像CDN服務(wù)對你有意義嗎钉汗？
- 緩存圖像資源
- 預(yù)加載關(guān)鍵圖像資源
- 圖像的網(wǎng)絡(luò)性能預(yù)算
- 最后的建議
- 附注
正文：
JPEG的壓縮模式（接上文）
使用JPEG優(yōu)化編碼器
現(xiàn)代化的JPEG編碼器會嘗試生產(chǎn)出更小更高保真的JPEG文件羹令，同時保持與現(xiàn)有瀏覽器以及圖像處理應(yīng)用程序的兼容性。它們避免了在運行的系統(tǒng)中引入新的圖像格式而帶來一系列變化损痰，并給圖像優(yōu)化壓縮帶來質(zhì)的變化福侈。這里就有兩個這樣的編碼器，它們是MozJPEG和Guetzli卢未。
簡單聊一下：你該使用哪個編碼器肪凛？
- 一般使用MozJPEG
- 如果你的核心關(guān)注點是圖像質(zhì)量，而且不在乎相對較長的編碼時間辽社，則使用Guetzli
- 如果你需要更好的可配置性:
- JPEGRecompress （底層使用了MozJPEG）
- JPEGMini：它類似于Guetzli會自動選擇最佳質(zhì)量伟墙。但它不如Guetzli技術(shù)復(fù)雜，而且更快滴铅，其目標(biāo)是在于更適用于網(wǎng)絡(luò)的最佳質(zhì)量圖像戳葵。
- ImageOptim API（這里還有個免費的在線界面）：它的顏色處理機(jī)制是獨一無二的，您可以分開選擇顏色質(zhì)量與整體質(zhì)量汉匙。另外拱烁，它可以自動選擇色度抽樣級別生蚁，以便在屏幕截圖中保留高分辨率顏色，并避免了在自然照片中平滑色彩的字節(jié)浪費戏自。
什么是MozJPEG邦投？
MozJPEG是Mozilla開源提供的現(xiàn)代化的JPEG編碼器。它聲稱要去除JPEG文件的10％左右的體積擅笔。使用MozJPEG壓縮的JPEG文件可以跨瀏覽器顯示尼摹，并且還包括漸進(jìn)式掃描優(yōu)化、網(wǎng)格量化（丟棄最少壓縮的細(xì)節(jié)）以及一些優(yōu)秀的量化預(yù)設(shè)等功能剂娄，可以幫助創(chuàng)建更平滑的高分辨率圖像（當(dāng)然也可以使用ImageMagick，如果你愿意去瀏覽XML配置）玄呛。
MozJPEG不僅被ImageOptim所支持阅懦，并且還有一個可靠的可配置imagemin插件。以下是Gulp的簡單實現(xiàn)示例：
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
gulp.task('mozjpeg', () =>
gulp.src('src/*.jpg')
.pipe(imagemin([imageminMozjpeg({
quality: 85
})]))
.pipe(gulp.dest('dist'))
);
MozJPEG：不同質(zhì)量的文件體積與視覺相似度得分的比較徘铝。
我用來自jpeg-archive項目的jpeg-recompress來計算一個源圖像的SSIM（結(jié)構(gòu)相似性）分?jǐn)?shù)耳胎。SSIM是一種用于測量兩個圖像之間的相似性的方法，其中的分?jǐn)?shù)就是一個圖像對比另一個圖像的“完美”相似測量值惕它。
根據(jù)我的測量結(jié)果怕午，MozJPEG的確是一個很好的選擇，它可以保持高視覺質(zhì)量來壓縮網(wǎng)頁的圖像淹魄，同時減少文件的大小郁惜。對于中小型圖像，我發(fā)現(xiàn)MozJPEG（質(zhì)量= 80-85）可以將文件大小減少30-40％甲锡，同時保持可接受的SSIM兆蕉，在jpeg-turbo庫上可以提高了5-6％讀取速度。MozJPEG確實要比基線JPEG編碼更慢缤沦，但這不足以成為你放棄它的理由虎韵。
注意：如果您需要一個支持MozjPEG的工具，并包含配置支持缸废，以及一些免費的圖像比較實用程序包蓝，請查看jpeg-recompress∑罅浚《Web Performance in Action》的作者Jeremy Wagner提供了一種參考配置测萎，如下：
jpeg-recompress --min 35 --max 70 --strip --method smallfry --loops 16 in.jpg out.jpg
什么是Guetzli？
Guetzli是一個來自谷歌的梁钾、有前景的绳泉、有些緩慢的感知型的JPEG編碼器，它會試圖找到一個人眼在視覺上無法區(qū)分差異但卻體積最小的JPEG文件姆泻。Guetzli會執(zhí)行一系列感知測試零酪，為最終的JPEG提出方案冒嫡，并對每個方案進(jìn)行評估。最終在其中選擇最高評分的提案作為最終輸出四苇。
而為了測量圖像之間的差異孝凌，Guetzli使用Butteraugli，一種基于人類感知來測量圖像差異的模型（下面會介紹）月腋。Guetzli可以考慮到其他JPEG編碼器沒有的幾個視覺屬性蟀架。例如，人眼所看到的綠光量與藍(lán)色的敏感度之間是存在關(guān)系的榆骚，因此綠色旁邊的藍(lán)色信息的編碼就會動態(tài)修改的更精準(zhǔn)一些片拍。
注意： 圖片文件的大小更多取決于你圖片的質(zhì)量，而非使用的編解碼器妓肢。與通過切換編解碼器實現(xiàn)的文件大小節(jié)省相比捌省，最低質(zhì)量和最高質(zhì)量JPEG之間的文件大小差異要更大的多。因此碉钠，設(shè)置最低可接受的質(zhì)量非常重要纲缓。避免將您的質(zhì)量設(shè)置得太高，并且不去關(guān)注它喊废。
Guetzli 聲稱當(dāng)在Butteraugli得到同樣的質(zhì)量評分的情況下祝高，和其他編碼器相比可以將數(shù)據(jù)體積再減小20-30％。使用Guetzli的一個大問題就是污筷，它非常非常慢工闺，目前只適用于靜態(tài)內(nèi)容的優(yōu)化。從它的說明中可以看出瓣蛀，Guetzli需要大量的內(nèi)存（每百萬像素可能需要1分鐘+ 200MB的內(nèi)存）斤寂。這里有一個很好的Guetzli實踐測試報告【镜耄可以看到遍搞，Guetzli可以作為你的靜態(tài)網(wǎng)站構(gòu)建過程中圖片優(yōu)化的理想拼圖，但是在按需執(zhí)行時就并不合適了器腋。
注意：當(dāng)您將圖像優(yōu)化作為靜態(tài)網(wǎng)站的構(gòu)建過程的一部分時溪猿，Guetzli可能更加適用，或者在不需要按照要求執(zhí)行圖像優(yōu)化的情況時纫塌。
像ImageOptim這樣的工具诊县，同樣支持Guetzli優(yōu)化（在最新版本中）。
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const imageminGuetzli = require('imagemin-guetzli');
gulp.task('guetzli', () =>
gulp.src('src/*.jpg')
.pipe(imagemin([
imageminGuetzli({
quality: 85
})
]))
.pipe(gulp.dest('dist'))
);
可以看到措左，為了節(jié)省些空間依痊，使用Guetzli編碼一張3 x 3MP的圖像要花費近七分鐘的時間（并且伴隨著高CPU使用率）。但是為了存檔更高分辨率的照片，我認(rèn)為付出些代價也是值得的胸嘁。
Guetzli：不同質(zhì)量的文件體積和視覺相似度得分的比較瓶摆。
注意：建議在高質(zhì)量圖像（例如未壓縮的圖像，PNG原圖或者100％質(zhì)量（或無損）的JPEG）上使用Guetzli性宏。雖然它可以在其他質(zhì)量的圖像（例如質(zhì)量為84或更低的JPEG）上工作群井，但結(jié)果可能較差。
使用Guetzli壓縮圖像是非常（非常）耗時的毫胜，可能會使你的用戶轉(zhuǎn)身而去书斜，但是對于較大的圖像，這是值得的酵使。我已經(jīng)可以看到一些使用案例里荐吉，Guetzli可以僅僅保留文件大小的40％，同時保持了視覺的保真度口渔。這使它非常適合存檔照片稍坯。在小到中等大小的圖像上，我仍然看到一些地方在應(yīng)用（在10-15KB的范圍內(nèi)）搓劫，但是效果并不顯著。Guetzli可以在壓縮更小的圖像上引入更多的液化曲線失真混巧。
您可能還對Eric Portis的這項研究感興趣枪向，他將Guetzli與Cloudinary的自動壓縮功能進(jìn)行了比較，并從中獲得了一些有效的不同數(shù)據(jù)點咧党。
MozJPEG與Guetzli孰優(yōu)孰劣秘蛔？
比較不同的JPEG編碼器是很復(fù)雜的 —— 它需要比較壓縮圖像的質(zhì)量、保真度以及最終文件大小等多項內(nèi)容傍衡。正如圖像壓縮專家KornelLesiński指出的那樣深员，僅就單方面而非多個角度進(jìn)行測試比較，很可能會導(dǎo)致一個無效的結(jié)論蛙埂。
那Guetzli和MozJPEG比究竟如何呢倦畅？—— Kornel指出：
- Guetzli更適用于更高品質(zhì)的圖像（butteraugli建議最好是
q=90以上，而MozJPEG更適宜處理q=75左右的圖像） - Guetzli壓縮速度要慢得多（都是生成了標(biāo)準(zhǔn)的JPEG绣的，所以解碼速度是一樣很快的）
- MozJPEG不會自動選擇質(zhì)量設(shè)置叠赐，但您可以使用外部工具找到最佳質(zhì)量，例如jpeg-archive
存在多種方法屡江，都可以用于測定壓縮圖像與原圖像的相似度或視覺感知差異度芭概。一些圖像質(zhì)量研究經(jīng)常會使用像SSIM（結(jié)構(gòu)相似性）這樣的方法。然而惩嘉，Guetzli則是通過優(yōu)化Butteraugli的方法來實現(xiàn)的罢洲。
Butteraugli
Butteraugli是一個來自Google的項目，它可以估算一個人可能會注意到兩個圖像的視覺降級（即心理視覺相似性）的點文黎，并給出幾乎沒有區(qū)別的兩個圖像的比對分?jǐn)?shù)惹苗。Butteraugli不僅給出一個標(biāo)量的分?jǐn)?shù)殿较，而且還會計算出圖像差異水平的空間圖。所以當(dāng)SSIM專注于計算圖像中差異的總和時鸽粉，Butteraugli則更專注于差異最明顯的部分斜脂。
上圖是一個例子：使用Butteraugli找到用戶無法注意到視覺差異的最小質(zhì)量閾值。并且縮小了65%的文件體積触机。
在真正的實施中帚戳，您將會制定一個圖像質(zhì)量的目標(biāo)，然后運行一些不同的圖像優(yōu)化策略儡首，查看您的Butteraugli分?jǐn)?shù)片任，然后再找到合適的文件大小與質(zhì)量級別的最佳平衡點。
總而言之蔬胯，我花費了30分鐘來安裝Butteraugli到我的Mac上对供，包括安裝Bazel和編譯C++的源碼。使用它就非常簡單了：選擇兩個圖片（一個原圖和一個壓縮版本）進(jìn)行比較氛濒，它就會給你一個比較分?jǐn)?shù)产场。
Butteraugli與其他視覺相似度比較算法有什么不同？
[根據(jù)一位Guetzli項目成員的這條評論表明舞竿，Guetzli在Butteraugli得分最高京景，但在SSIM和MozJPEG得分也最差。其實骗奖，這是符合我自己對圖像優(yōu)化策略的研究的确徙。我會運行Butteraugli和一個Node模塊（如img-ssim）比較在使用了Guetzli、MozJPEG的之前和之后执桌，源圖像和壓縮圖像的SSIM分?jǐn)?shù)鄙皇。
組合編碼器？
對于一些較大的圖像仰挣，我發(fā)現(xiàn)將Guetzli與MozJPEG中的無損壓縮（jpegtran伴逸，而不是cjpeg，避免丟掉了Guetzli完成的工作）結(jié)合起來使用膘壶，可以將文件大小再減少10~15%（總體55%）违柏，并且只有非常小的SSIM評分損失。我只是提醒一下可以在組合使用編碼器方面進(jìn)行一些試驗和分析香椎，但是也受到了Ariya Hidayat等業(yè)內(nèi)其他人的好評漱竖。
總結(jié)來說，MozJPEG是一個初學(xué)者友好的網(wǎng)頁資源編碼器畜伐，速度相對較快馍惹，可以生成高質(zhì)量的圖像。而Guetzli則是一個資源密集型的編碼器，它在較大万矾、更高質(zhì)量的圖像上效果最好悼吱，是我建議給中高級用戶的一個好選擇。
