注明：本人原創翻譯，原版為Essential Image Optimization電子書，這里將其拆分為幾篇文章發布。另外，文中部分鏈接可能會因為“網絡”原因無法打開。不必著急，我會慢慢將其中一些比較好的內容翻譯過來發表，都會在這個“Web圖像技術深究”專題中。
目錄
- ?介紹
- 如何判斷我的圖像是否需要優化？
- 如何選擇正確的圖像格式？
- “素人”JPEG
- JPEG的壓縮模式
-
什么是WebP？
- WebP的表現如何？
- 誰在生產環境中使用WebP？
- WebP編碼如何執行？
- WebP的瀏覽器支持
- 如何將我的圖像轉換為WebP？
- 如何在我的操作系統上查看WebP圖像？
- 如何提供WebP？
- SVG優化
- 避免使用有損編解碼器重復壓縮圖像
-
減少不必要的圖像解碼和尺寸調整帶來的損耗
- 使用srcset提供HiDPI圖像
- 藝術化的響應
- 顏色管理
- 圖像拼合技術
- 延遲加載非關鍵圖像
- 避免<code>display: none;</code>的陷阱
- 圖像CDN服務對你有意義嗎？
- 緩存圖像資源
- 預加載關鍵圖像資源
- 圖像的網絡性能預算
- 最后的建議
- 附注
正文：
JPEG的壓縮模式（接上文）
使用JPEG優化編碼器
現代化的JPEG編碼器會嘗試生產出更小更高保真的JPEG文件，同時保持與現有瀏覽器以及圖像處理應用程序的兼容性。它們避免了在運行的系統中引入新的圖像格式而帶來一系列變化，并給圖像優化壓縮帶來質的變化。這里就有兩個這樣的編碼器，它們是MozJPEG和Guetzli。
簡單聊一下：你該使用哪個編碼器？
- 一般使用MozJPEG
- 如果你的核心關注點是圖像質量，而且不在乎相對較長的編碼時間，則使用Guetzli
- 如果你需要更好的可配置性:
- JPEGRecompress （底層使用了MozJPEG）
- JPEGMini：它類似于Guetzli會自動選擇最佳質量。但它不如Guetzli技術復雜，而且更快，其目標是在于更適用于網絡的最佳質量圖像。
- ImageOptim API（這里還有個免費的在線界面）：它的顏色處理機制是獨一無二的，您可以分開選擇顏色質量與整體質量。另外，它可以自動選擇色度抽樣級別，以便在屏幕截圖中保留高分辨率顏色，并避免了在自然照片中平滑色彩的字節浪費。
什么是MozJPEG？
MozJPEG是Mozilla開源提供的現代化的JPEG編碼器。它聲稱要去除JPEG文件的10％左右的體積。使用MozJPEG壓縮的JPEG文件可以跨瀏覽器顯示，并且還包括漸進式掃描優化、網格量化（丟棄最少壓縮的細節）以及一些優秀的量化預設等功能，可以幫助創建更平滑的高分辨率圖像（當然也可以使用ImageMagick，如果你愿意去瀏覽XML配置）。
MozJPEG不僅被ImageOptim所支持，并且還有一個可靠的可配置imagemin插件。以下是Gulp的簡單實現示例：
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：不同質量的文件體積與視覺相似度得分的比較。
我用來自jpeg-archive項目的jpeg-recompress來計算一個源圖像的SSIM（結構相似性）分數。SSIM是一種用于測量兩個圖像之間的相似性的方法，其中的分數就是一個圖像對比另一個圖像的“完美”相似測量值。
根據我的測量結果，MozJPEG的確是一個很好的選擇，它可以保持高視覺質量來壓縮網頁的圖像，同時減少文件的大小。對于中小型圖像，我發現MozJPEG（質量= 80-85）可以將文件大小減少30-40％，同時保持可接受的SSIM，在jpeg-turbo庫上可以提高了5-6％讀取速度。MozJPEG確實要比基線JPEG編碼更慢，但這不足以成為你放棄它的理由。
注意：如果您需要一個支持MozjPEG的工具，并包含配置支持，以及一些免費的圖像比較實用程序，請查看jpeg-recompress?！禬eb Performance in Action》的作者Jeremy Wagner提供了一種參考配置，如下：
jpeg-recompress --min 35 --max 70 --strip --method smallfry --loops 16 in.jpg out.jpg
什么是Guetzli？
Guetzli是一個來自谷歌的、有前景的、有些緩慢的感知型的JPEG編碼器，它會試圖找到一個人眼在視覺上無法區分差異但卻體積最小的JPEG文件。Guetzli會執行一系列感知測試，為最終的JPEG提出方案，并對每個方案進行評估。最終在其中選擇最高評分的提案作為最終輸出。
而為了測量圖像之間的差異，Guetzli使用Butteraugli，一種基于人類感知來測量圖像差異的模型（下面會介紹）。Guetzli可以考慮到其他JPEG編碼器沒有的幾個視覺屬性。例如，人眼所看到的綠光量與藍色的敏感度之間是存在關系的，因此綠色旁邊的藍色信息的編碼就會動態修改的更精準一些。
注意： 圖片文件的大小更多取決于你圖片的質量，而非使用的編解碼器。與通過切換編解碼器實現的文件大小節省相比，最低質量和最高質量JPEG之間的文件大小差異要更大的多。因此，設置最低可接受的質量非常重要。避免將您的質量設置得太高，并且不去關注它。
Guetzli 聲稱當在Butteraugli得到同樣的質量評分的情況下，和其他編碼器相比可以將數據體積再減小20-30％。使用Guetzli的一個大問題就是，它非常非常慢，目前只適用于靜態內容的優化。從它的說明中可以看出，Guetzli需要大量的內存（每百萬像素可能需要1分鐘+ 200MB的內存）。這里有一個很好的Guetzli實踐測試報告?？梢钥吹?，Guetzli可以作為你的靜態網站構建過程中圖片優化的理想拼圖，但是在按需執行時就并不合適了。
注意：當您將圖像優化作為靜態網站的構建過程的一部分時，Guetzli可能更加適用，或者在不需要按照要求執行圖像優化的情況時。
像ImageOptim這樣的工具，同樣支持Guetzli優化（在最新版本中）。
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'))
);
可以看到，為了節省些空間，使用Guetzli編碼一張3 x 3MP的圖像要花費近七分鐘的時間（并且伴隨著高CPU使用率）。但是為了存檔更高分辨率的照片，我認為付出些代價也是值得的。
Guetzli：不同質量的文件體積和視覺相似度得分的比較。
注意：建議在高質量圖像（例如未壓縮的圖像，PNG原圖或者100％質量（或無損）的JPEG）上使用Guetzli。雖然它可以在其他質量的圖像（例如質量為84或更低的JPEG）上工作，但結果可能較差。
使用Guetzli壓縮圖像是非常（非常）耗時的，可能會使你的用戶轉身而去，但是對于較大的圖像，這是值得的。我已經可以看到一些使用案例里，Guetzli可以僅僅保留文件大小的40％，同時保持了視覺的保真度。這使它非常適合存檔照片。在小到中等大小的圖像上，我仍然看到一些地方在應用（在10-15KB的范圍內），但是效果并不顯著。Guetzli可以在壓縮更小的圖像上引入更多的液化曲線失真。
您可能還對Eric Portis的這項研究感興趣，他將Guetzli與Cloudinary的自動壓縮功能進行了比較，并從中獲得了一些有效的不同數據點。
MozJPEG與Guetzli孰優孰劣？
比較不同的JPEG編碼器是很復雜的 —— 它需要比較壓縮圖像的質量、保真度以及最終文件大小等多項內容。正如圖像壓縮專家KornelLesiński指出的那樣，僅就單方面而非多個角度進行測試比較，很可能會導致一個無效的結論。
那Guetzli和MozJPEG比究竟如何呢？—— Kornel指出：
- Guetzli更適用于更高品質的圖像（butteraugli建議最好是
q=90以上，而MozJPEG更適宜處理q=75左右的圖像） - Guetzli壓縮速度要慢得多（都是生成了標準的JPEG，所以解碼速度是一樣很快的）
- MozJPEG不會自動選擇質量設置，但您可以使用外部工具找到最佳質量，例如jpeg-archive
存在多種方法，都可以用于測定壓縮圖像與原圖像的相似度或視覺感知差異度。一些圖像質量研究經常會使用像SSIM（結構相似性）這樣的方法。然而，Guetzli則是通過優化Butteraugli的方法來實現的。
Butteraugli
Butteraugli是一個來自Google的項目，它可以估算一個人可能會注意到兩個圖像的視覺降級（即心理視覺相似性）的點，并給出幾乎沒有區別的兩個圖像的比對分數。Butteraugli不僅給出一個標量的分數，而且還會計算出圖像差異水平的空間圖。所以當SSIM專注于計算圖像中差異的總和時，Butteraugli則更專注于差異最明顯的部分。
上圖是一個例子：使用Butteraugli找到用戶無法注意到視覺差異的最小質量閾值。并且縮小了65%的文件體積。
在真正的實施中，您將會制定一個圖像質量的目標，然后運行一些不同的圖像優化策略，查看您的Butteraugli分數，然后再找到合適的文件大小與質量級別的最佳平衡點。
總而言之，我花費了30分鐘來安裝Butteraugli到我的Mac上，包括安裝Bazel和編譯C++的源碼。使用它就非常簡單了：選擇兩個圖片（一個原圖和一個壓縮版本）進行比較，它就會給你一個比較分數。
Butteraugli與其他視覺相似度比較算法有什么不同？
[根據一位Guetzli項目成員的這條評論表明，Guetzli在Butteraugli得分最高，但在SSIM和MozJPEG得分也最差。其實，這是符合我自己對圖像優化策略的研究的。我會運行Butteraugli和一個Node模塊（如img-ssim）比較在使用了Guetzli、MozJPEG的之前和之后，源圖像和壓縮圖像的SSIM分數。
組合編碼器？
對于一些較大的圖像，我發現將Guetzli與MozJPEG中的無損壓縮（jpegtran，而不是cjpeg，避免丟掉了Guetzli完成的工作）結合起來使用，可以將文件大小再減少10~15%（總體55%），并且只有非常小的SSIM評分損失。我只是提醒一下可以在組合使用編碼器方面進行一些試驗和分析，但是也受到了Ariya Hidayat等業內其他人的好評。
總結來說，MozJPEG是一個初學者友好的網頁資源編碼器，速度相對較快，可以生成高質量的圖像。而Guetzli則是一個資源密集型的編碼器，它在較大、更高質量的圖像上效果最好，是我建議給中高級用戶的一個好選擇。
