- 原文鏈接 : Reducing JPG File size
- 原文作者 : Colt McAnlis
- 譯文出自 : 掘金翻譯計劃
- 譯者 : SHENXN
- 校對者: Galen, Hugo Xie
減少 JPG 文件大小
如果你是一個現代的開發者，無論你是網站開發、移動開發、還是一些奇怪的系統管理程序，你一定會使用 JPG 文件。JPG 是你工作的一部分，並且對於用戶體驗有着極其重要的作用。
爲什麼讓 JPG 文件儘量小這麼重要呢？由於 當今平均網頁體積與一個毀滅戰士遊戲（譯者注：一款經典網絡遊戲）相當，你應該自問頁面上那麼多字節都是從哪裏來的，怎樣做才能儘量削減它們（我不想從移動應用的大小開始講）。
雖然 JPG 壓縮令人印象深刻，但是如何進行壓縮將會極大地影響文件的體積。因此我總結了一些能幫助你最大程度減小文件體積並增強用戶體驗的技巧。
你應該使用一個優化工具
當你開始看 JPG 壓縮方法，以及 文件格式，你會開始意識到，和 PNG 文件一樣，JPG 文件在體積上有很大的改進空間。舉個例子，你可以嘗試比較用 Photoshop 直接保存的 JPG 文件和用 “儲存爲 web 所用格式“ 導出的文件之間的大小差異：
一個簡單的紅色正方形圖片減少了大約90%的體積。和 PNG 一樣，JPG 同樣支持一些數據塊，這就意味着圖片編輯器或是相機能夠插入非圖片信息。這就是爲什麼你的圖片分享服務知道你在哪裏吃的最後一個華夫餅，以及你使用什麼相機拍下了這張照片。如果你的應用程序不需要這些額外的信息，那直接從 JPG 文件中移除它們就能顯著改善文件的體積。
然而事實上，你可以在文件格式上做更多。
對於初學者而言，你可以使用一些像 JPEGMini 的工具，在不過度影響圖片保真度的情況下進行低質量壓縮，就像是 Mozilla 的 MOZJpeg（雖然 Mozilla 申明瞭他們的項目可能會影響兼容性）。
另外，jpegTran/cjpeg 試圖提供無損的體積優化。而 packJPG 會用一種更小的形式重新打包 JPG 數據，雖然這已經是一種不同的文件格式了，並且不再與 JPG 兼容（但如果你能在客戶端自己對文件進行解析，就會非常方便）。
此外，還有一大堆基於網頁的工具，但是我還沒有找到能比我列出來的這些工具更好用的（事實上，大多數這些基於網頁的工具在後端都只是使用了上述工具）。當然 ImageMagick 有它自己的 特性。
使用這些工具通常可以幫助你減少大約 15% 到 24% 的文件體積，這對於這樣小的投入來說已經是一個非常不錯的改進了。
尋找最理想的質量值
首先要聲明的是：你永遠都不應該把 JPG 文件的質量值設置爲 100。
JPG 文件的魅力在於你能夠使用一個標量來調節圖片的質量與文件大小的比例。問題在於你應該如何找到圖片的正確質量值。隨意給你一張圖片，你應該如何確定最理想的設置？
正如 imgmin 所指出的，75 到 100 的 JPG 壓縮等級只會給用戶帶去非常小的可感知的變化。
JPEG 文件的質量值在 100 到 75 之間變化通常只會對圖片質量造成非常微小的、很不明顯的改變，但是卻能顯著減小文件的尺寸。也就是說許多圖片在 75 的質量值時看起來依然很好，但卻只有 95 質量值時一半的文件大小。當質量值減小到 75 以下時，造成的視覺上的差異會擴大，而文件尺寸的節約會減少。
因此，75 的質量值顯然是一個很好的初始狀態。但是我們有一個更大的問題：我們不希望去手工設定每張圖片的質量值。
對於那些每天上傳和轉發成千上萬 JPG 文件的媒體應用來說，你不能期望某個人去手工調節所有圖片的參數。因此，大多數開發者會創建多組質量參數，並且依賴這些參數組來壓縮它們的圖片。
比如說，縮略圖的質量值可能是 35，因爲更小的圖片通常能掩蓋更多的壓縮損壞。而一個全屏的圖片也許又有一個不同的參數來用作音樂專輯的封面等等。
你可以看到這樣的方法存在於整個領域中：imgmin 項目進一步地顯示了大多數的大型網站都傾向於將他們 JPG 圖片的質量值設置在 75 上下波動。
Google 圖片 縮略圖: 74–76
Facebook 全尺寸圖片: 85
Yahoo 首頁 JPG: 69–91
YouTube 首頁 JPG: 70–82
Wikipedia 圖片: 80
Windows 動態背景: 82
Twitter 用戶 JPEG 圖片: 30–100
這裏的問題是選取的值不完美
通常憑空選取一個質量值並應用到整個系統中，會導致一些圖片能在損失極小質量的情況下被進一步壓縮，而另一些圖片則由於過度壓縮而看起來不那麼好。質量值應該是可變的，應該爲每一張圖片尋找其最理想的參數。
如果有一種方法可以測出壓縮對圖片的破壞程度呢？
如果你可以通過一個質量標準來判定當前的質量值是否最佳呢？
如果你可以在服務器上自動運行上述兩項任務呢？
有這樣的方法。
可以判定。
能夠自動運行。
這都要從精神性視覺誤差閾值 - Psychovisual Error Threshold 說起，這個閾值指示了在人類的眼睛可以察覺之前，一張圖片最多可以下降多少質量。
這個閾值有一些測量方法，尤其是 PSNR 和 SSIM 標準。每一個標準在進行測量時有一些細微差別，這就是爲什麼我更喜歡最新的 Butteraugli 項目。在使用一個圖片庫進行測試後，我發現這種標準在視覺質量方面對我來說更容易理解。
爲了實現，你需要寫一個簡單的腳本來：
- 將一個 JPG 文件保存爲多個不同質量值的版本
- 使用 Butteraugli 來測定它們的 精神性視覺誤差閾值
- 當輸出值大於 1.1 時停止
- 使用當前的質量值來儲存最終的圖片
最終的結果將是在不引入過大的精神性視覺誤差閾值（不造成易被察覺的視覺改變）的情況下最小的 JPG 文件。如下圖片的體積縮減了 170k，但是視覺上看起來仍然相同。
當然，你還可以進一步壓縮。也許你的目標是允許更多的視覺損失來節省帶寬，你可以很容易繼續壓縮，但這樣有些瘋狂。到目前爲止，Butteraugli 認爲任何高於 1.1 的結果都是“難看”的並且沒有試圖用一個權威的數值來定義這些圖片看起來究竟是怎麼樣的。所以你當然可以在輸出值到達 2.0 時（如下圖）停止腳本，但是到那時，你將難以確定你的圖片到底處於一種怎樣的視覺程度上。
模糊色度
人的眼睛在 YCbCr 顏色通道的圖片上對於視覺改變有更好的理解能力，因此可以假設在一個 8 x 8 的塊上沒有太多的視覺變化。而 JPG 如此強大的一個原因是，如果你能在 8 x 8 的塊上減少色度的變化，你就能更少地影響圖片的質量，同時更好地進行壓縮。最簡單的方法就是在顏色通道上高對比度的區域內進行中值過濾。樣例如下。
大多數圖片編輯軟件都不支持 YCbCr 色彩空間，一個小技巧是它們大多支持 LAB。L 通道代表亮度（與 Y 通道類似），而 A 通道和 B 通道代表 紅/綠色 以及 藍/黃色，與 Cb、Cr 通道類似。將你的圖片轉換到 LAB 格式，你將可以看到下列通道：
我們需要做的就是消除 A/B 通道中顏色的急劇轉換。這樣做可以給合成器更多的相似值。我們可以選中圖片中的高細節區域，並應用 1-3 個像素的模糊。最終的結果將會明顯消除圖像中的部分信息，但是卻不會過多地影響圖片的整體視覺效果。
這樣做的重點是，通過在圖片的 A/B 模式上進行細微的模糊操作，我們可以減少這些通道中的視覺變量，這樣的話，當 JPG 進行取樣操作時，你的圖片的 CbCr 通道中將含有更少的孤立信息。你可以在下圖中看到結果。
上面的圖片是我們的源文件，而下面的圖片中我們模糊了部分 Cb/Cr 數據，這使得文件體積減小了大約 50%。
考慮使用 WebP
對於現在的你來說，WebP 不應該還是什麼新聞了。我已經在之前推薦過它，因爲這真的是一個能給人留下深刻印象的編碼器。WebP 和 JPG 的對比數據顯示，WebP 可以在相同 SSIM（結構相似性）指標的情況下，節省大約 25% - 33% 的文件體積，這對於僅僅是轉換文件格式來說，已經節約了很多體積了。
無論你是一個網頁開發者，還是移動開發者，WebP 的支持程度和節約的空間，都給你足夠的理由來使用它。
“Science the shit out of it”（譯者注：出自電影《火星救援》經典臺詞，在此處表示用科學的方法去解決一些非常棘手的問題）
感謝 Mark，我給你寄了一些土豆，你收到的時候告訴我。(譯者注：Mark 是《火星救援》的男主，這句話應該是一個電影梗）
現代圖片壓縮過程的最大問題是，大多數工程師都只爲“某一文件”進行壓縮，也就是說，輸入像素數據，然後輸出指定格式的壓縮圖片。
完成，然後繼續其他工作。
但是這事實上只做了一半。現代應用程序將圖片用在不同的地方，且有着不同的用途。沒有一種單一的尺寸可以適用於所有的情況，並且這也許可以影響互聯網傳輸信息的方式。
這就是爲什麼 Facebook 的工程師辛苦找尋一種方法來優化現有的圖片壓縮策略。其成果是我互聯網上最最喜歡的文章，這將他們預覽圖片的體積減小到了每張 200 字節。
這個解決方案的魔力來源於在加載時發生的一個富有野心的模糊和縮放過程，以及對 JPG 數據頭（他們能夠在編碼器中將其移除並進行硬編碼）的深度分析。200 字節是瘋狂的。我從 Twitter 圖像編碼挑戰（它證實了《蒙娜麗莎》可以通過遺傳編程進行演化）之後就再也沒有見過如此瘋狂的事情了。這證明了僅僅在圖像編碼器領域內思考將會限制你在數據壓縮上做出真正瘋狂舉動的能力。
總結
最終，你的公司需要在自動設定質量值和手動優化圖片之間找到一個合適的中間點，甚至搞清楚如何進一步進行壓縮。這最終可以節約你們發送和儲存內容的成本，同時也可以節省用戶接收這些內容的成本。