當我們在網際網路上瀏覽內容時，總會看到各種各樣的圖片，比如在你刷IT之家時，所看到的絕大部分圖片都是JPG格式的，這種圖片格式之所以在網際網路上廣受歡迎，是因為相比於PNG、GIF格式，它的體積相對較小，畢竟在上網時，用戶希望圖片加載得越快越好。
JPG格式的圖片體積相對較小，是因為它採用了一系列的壓縮算法，壓縮圖片弊端就是和原始的圖片相比，它犧牲掉了一些畫面細節，這些丟失的細節或許可被人的肉眼看出，或許以人的肉眼難以發現，對於這種通過犧牲畫面的精細程度來達到縮小體積的目的的壓縮算法，我們稱之為「有損壓縮」或者「破壞性壓縮」，今天，IT之家就和大家聊聊JPEG圖片壓縮的基本原理。
JPEG和JPG的關係
很多讀者可能會有這樣的疑惑，JPEG和JPG看起來如此相像，它們到底是不是同一種圖片格式？JPEG和JPG之間的關係到底是怎樣的？在回答這個問題之前，我們首先要了解，JPEG的來頭。
JPEG，全稱為「Joint Photographic Experts Group」，翻譯成中文，則是「聯合圖像專家小組」，這是一個成立於1986年的組織，1992年，該組織發布了「JPEG標準」，這是一種針對圖像的壓縮而制定的標準。
使用JPEG標準壓縮的圖片文件，被稱為「JEPG文件」，這種文件的擴展名通常是JPG、JPEG、JPE、JFIF以及JIF，在這些文件格式中，以JPG的使用最為廣泛。
如果這裡JPEG指的是聯合圖像專家小組，那JPEG與JPG則是制定壓縮標準的組織與採用該組織制定的壓縮標準壓縮成的圖片的一種的格式的關係；
如果JPEG指的是JPEG壓縮標準，那JPEG與JPG則是一種圖像的壓縮標準與採用該標準壓縮成的圖片的一種格式的關係；
如果JPEG指的是一張圖片文件的後綴名，那JPEG與JPG的關係則是採用JPEG標準壓縮的圖片的兩種不同的格式。
色彩空間轉換
要壓縮圖片，首先要知道這個圖片中都包含了些什麼內容，在對圖片的內容進行分解時，第一步就要進行色彩空間轉換。
所謂的色彩空間，指的是描述圖像的顏色的一組數值，比較常見的色彩空間有RGB、CMYK。
RGB，即是分別用三組數值，來表示紅、綠、藍，而紅、綠、藍三種顏色經過不同程度的配比，就會顯示出不同的顏色。通常RGB的色彩模型用於顯示屏的顯示。
CMYK，即是分別用四組數值，來表示青色、品紅、黃色和黑色，而青色、品紅、黃色和黑色四種顏色經過不同程度的配比，就會顯示出不同的顏色。通常CMYK的色彩模型用於印刷。
在JPEG壓縮圖像過程中，是怎麼用數值來表示圖像內容的呢？事實上，JPEG量化圖像的顏色時並非採用RGB模式，也非CMYK模式，而是YCbCr模式，其中，Y表示的是亮度，Cb表示的是彩度（藍），Cr表示的是彩度（紅）。那麼問題來了，為什麼JPEG在壓縮圖像時，不採用RGB和CMYK的色彩模型，而偏偏採用YCbCr這種看似奇葩的模式呢？這還要從人眼的工作機制談起。
我們的眼睛之所以能感知圖像，是因為人眼內含有視錐細胞和視杆細胞，其中，視錐細胞具有感知顏色的能力，而視杆細胞具有感知亮度的能力，通常，我們的眼睛中，視杆細胞數量相對較多，所以人眼對亮度的敏感程度要高於對色彩的敏感程度。就像你熄燈時，你可以在暗光下漸漸地看清周圍的事物，而對周圍事物的顏色，你可能就不那麼敏感了。
JPEG正是利用了人眼的這一特性，在壓縮圖像時，將亮度和顏色分開處理。
由於人眼對亮度很敏感，所以JPEG不會對亮度做太多改變，而人眼對顏色不甚敏感（科學研究表明，人眼大概可以區分出1000萬種不同的顏色，這種感知能力相比於電腦，就沒那麼精確了），所以在人眼開始察覺色彩不對了之前，JPEG對顏色進行壓縮處理，這樣就算圖像損失了部分細節，人眼也不太容易捕捉得到。
JPEG在壓縮圖像時所進行的色彩空間轉換，指的就是將RGB轉換為YCbCr。
縮減取樣
在YCbCr模型中，Cb通道和Cr通道中所包含的信息量遠遠少於Y通道中包含的信息量，同時，人眼對色彩的敏感程度有限，因此，JPEG的壓縮算法主要對Cb和Cr通道中的數據進行縮減取樣，取樣的比例可以是4:4:4（無縮減取樣）、4:2:2（在水平方向2的倍數中取樣）和4:2:0（在水平方向和垂直方向的2的倍數中取樣），其中，以4:2:0最為常見。
離散餘弦變換（DCT）
通常我們認為，在8*8像素的一塊方格裡，它裡面的像素往往非常相似，因此，當進行到這一步時，JPEG會將圖像分為一個又一個的8*8的像素塊。
▲一個8*8的像素塊，圖片來自維基百科
每一個像素塊都利用離散餘弦變換來編碼，法國數學家傅立葉告訴我們，幾乎所有的周期函數，都可以用一系列的「弦波」來表示，也就是說，靠著帶權重的一系列不同餘弦值的相加，就可以重構出我們的原圖。最後，每個8*8的像素塊都會通過特定的函數，來生成一個新的8*8的數字矩陣。
▲一個8*8的數字矩陣，圖片來自維基百科
量化
事情到這裡還沒算完，通過離散餘弦變換所得到的數字可不能被直接壓縮，他們還需要再處理一下，這就是量化。
量化的過程，實際上就是對DTC係數的一個優化過程，在一個8*8像素的區域中，每個像素點間的差異都很大時，它的弦波頻率就很高，我們稱之為高頻區，相反地，一個8*8像素的區域中，每個像素點間的差異很小，那它的弦波頻率就很低，我們稱之為低頻區，剛剛的DCT算法已經把哪裡頻率高、哪裡頻率低給整理出來了。
▲越接近左上，頻率越低，越接近右下，頻率越高。
人眼對高頻區（小範圍、高複雜度）的辨識能力較差，而對低頻區（大範圍、低複雜度）的辨識能力較好，因此JPEG就根據人眼的這一特徵將高頻區進行大幅的簡化和壓縮，量化的過程，實際上就是把頻率領域上的每個成分，除以一個特定的常數，然後將計算結果四捨五入，取一個整數，JPEG會將高頻區的成分通過算法，使其接近於0，然後四捨五入，取該成分的值為0，最後，我們大概會得到這樣一個矩陣：
▲圖片來源：維基百科
可以看到，這個矩陣中有很多連續的0，這就對壓縮非常有利了。
熵編碼
終於到了最後一步了，那就是壓縮，仔細觀察剛剛得到的最終的矩陣，可以看到，從左上角到右下角，連續的0的數量急劇上升，這種情況就要用熵編碼技術，對數據進行編碼。
JPEG從左上角開始，以Z字形來回穿梭，直至經歷了矩陣中的所有數字，到達右下角。
▲Z字形穿梭掃描的路徑，圖片來自維基百科
此時的編碼就變成了這樣：
當剩下的數字都是0，且過早結束的編碼，可以將連續的0的部分採用霍夫曼編碼表示為「EOB」，最後，這串編碼就成了這個樣子：
現在，我們就得到了JPEG的編碼了。通過一系列的處理，可以看到，圖像中的信息達到了壓縮和簡化的目的。這就是一幅原始圖像被壓縮為JPEG的大概過程。
圖片質量
在生成一張JPG圖像文件時，你通常需要設置圖像質量參數，這個參數的數值越大，圖像的質量也就越高，同時圖片文件的體積也就越大，相反地，數值越小，圖像的質量就越低，同時圖片文件的體積越小，下面是三張圖片：
▲圖片一
▲圖片二
▲圖片三
第一張圖片的質量參數是100，第二張圖片的質量參數是60，第三張圖片的質量參數是20，很容易可以看出，第一張圖片的細節較為豐富，第二張圖片的畫面中好像稍微有一些噪點，第三章圖片的直接可以看到大塊的馬賽克了。
代碼示例
現在你已經了解了JPEG算法的工作原理，如果你想更進一步地學習，那麼在GitHub中有這樣一個代碼示例，其作用就是進行JPEG壓縮，感興趣的同學可以查看和研究。點擊這裡
寫在最後
這篇文章的目標受眾是普通讀者，出於淺顯易懂的原則，這篇文章沒有對數學算法進行深入討論，也沒有對數學定義進行嚴格闡述，如果你是相關領域的從業人員或者相關專業的高校學生，那麼這篇文章可能不適合你。
在撰寫這篇文章時，筆者參考了維基百科和相關技術博客中的一些知識，若文中有定義錯誤或者事實錯誤，還請不吝賜教。
想看到更多這類內容？去APP商店搜 ，天天都有小歡喜。IT之家