本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。
JPEG 是Web上最常用的影像型別.數十年來，JPEG幾乎一直是編碼照片的正確選擇。用例就在名稱中：JPEG代表“聯合攝影專家組”，該委員會於1992年首次釋出了該標準。JPEG的副檔名為.jpg或.jpeg，儘管後者在現代用法中很少見。
雖然無失真壓縮是被動地儘可能壓縮影像資料，但JPEG的有失真壓縮尋找機會使壓縮更有效，對影像資料進行微小的，通常難以察覺的改變。JPEG將影像資料編碼為8乘8的畫素塊，並以演算法描述這些塊，而不是其中的單個畫素。
聽起來可能是一種學術上的區別：“GIF使用由畫素組成的網格，而JPEG使用由較小的畫素網格組成的網格。” 在實踐中，這種對塊的使用而不是畫素的使用意味著JPEG很適合於更常見的影像的使用情況：那種微妙的、分層的漸變，構成了現實世界的照片。
使用GIF風格的編碼來描述即使是非常簡單的單畫素梯度，也是非常冗長的。
第一行，第一列到第九列是#00CC00。第一行，第十列是#00BB00。第一行，第十一列是#00AA00。第一行，第十二列是#009900。第一行，第十三列是#008800。第一行，第十四列是#007700。第一行，第十五列是#006600。第一行，第十六列是#005500。
使用JPEG風格的編碼來描述一個梯度，效率要高得多。
使用JPEG風格的編碼來描述梯度，效率要高得多。
第一塊是#00CC00。第二塊是一個從#00CC00到#005500的梯度。
JPEG真正的閃光點是在量化影像中的 "高頻"細節水平，通常是難以察覺的。因此，將影像儲存為JPEG通常意味著以可測量的方式降低影像的質量，但不一定能看到。正如你所瞭解的，GIF風格的調色盤量化是一個相對簡單的操作：減少影像中的顏色數量會使檔案變小，但其方式很容易被人眼發現。
另一方面，JPEG在如何進行量化方面是很聰明的。JPEG的有失真壓縮試圖對影像源進行量化，其方式與我們自己的心理-視覺系統對我們周圍的世界進行量化的方式大致相同。實際上，JPEG 試圖拋棄我們首先不可能看到的細節，所以它可以偷偷地進行額外的壓縮。
人類心理視覺系統在處理你不斷接收的影像時做出了很大的貢獻。當我瞥一眼窗外的小花園時，我可以立即處理大量的資訊：例如，單個鮮豔的花朵很醒目。我立刻意識到土壤是灰濛濛的，葉子也開始下垂了——我的植物需要澆水。我看到但並沒有完全處理的是任何單個掉落葉子的精確形狀、大小、角度和綠色陰影。當然，我可以積極地尋找那種細節水平，但這只是太多的資訊以被動地接受的方式獲取，並沒有真正的好處。因此，我的心理視覺系統會進行一些自己的量化，將資訊濃縮為“葉子下垂”。
實際上，JPEG 的工作方式與此類似。如果在合理的範圍內執行，JPEG 的有失真壓縮會以我們自然的“有損”心理視覺系統無法察覺的方式降低影像中的細節水平，同時比僅使用無失真壓縮帶來更多的頻寬節省機會。
例如，JPEG 利用了我們的一個主要心理視覺弱點：我們的眼睛對亮度差異比色相差異更敏感。在應用任何壓縮之前，JPEG 使用一種稱為“離散餘弦變換”的過程將影像分割為不同的頻率——“圖層”，以某種方式表示亮度（brightness）和色度（color）或“亮度”和“色度”。
亮度圖層只進行最小的壓縮，丟棄了可能對人眼不太明顯的小細節。
色度圖層則被大幅度減少。JPEG 可以執行一種稱為“子取樣”的過程，而不是像 GIF 一樣簡單地量化色度圖層的調色盤。在子取樣過程中，色度圖層以較低的解析度儲存。當透過將低解析度色度圖層有效地伸展到亮度圖層上重新組合時，差異通常是不可察覺的。如果我們將原始影像源和 JPEG 一起進行比較，可能會注意到色相方面的細微差異，但只有在我們知道要尋找什麼時才能注意到。
話雖如此，JPEG 並不完美。儘管 JPEG 能夠巧妙地向我們偷偷傳遞壓縮資訊，但如果壓縮過度，它會變得非常明顯。
過度壓縮影像資料意味著細節級別會被進一步降低，超出了我們的心理視覺系統本來忽略的範圍，因此假象被打破，顯然可以看到細節丟失了。因為JPEG是基於塊進行壓縮的，所以這些塊之間的接縫可能會開始顯示出來。
漸進式JPEG
漸進式 JPEG (PJPEG) 有效地重新安排了渲染 JPEG 的過程。在傳輸過程中，"基準"JPEG從上到下進行渲染，而漸進式JPEG將渲染分成一組全尺寸的 "掃描"--類似於從上到下進行--每一次掃描都會提高影像的質量。整個影像立即出現，儘管是模糊的，並隨著傳輸的繼續而變得更加清晰。
在看起來可能只是技術差異，但從感知上來說，有一個巨大的好處：PJPEG可以立即提供完整尺寸的影像而不是空白，因此對於終端使用者來說，PJPEG可能比基線JPEG更快。此外，除了最小的影像之外，將影像編碼為PJPEG幾乎總是比基線JPEG具有更小的檔案大小——雖然不是很大，但每個位元組都有幫助。
然而，有一個微小的折衷方案：解碼PJPEG在客戶端更加複雜，這意味著在渲染過程中給瀏覽器和裝置的硬體帶來了更大的壓力。這種渲染開銷很難精確量化，但它非常小，除非是功率嚴重不足的裝置，否則不太可能被注意到。這是一個值得作出的權衡，總的來說，在將影像編碼為JPEG時，漸進式是一個明智的預設方法。
使用 JPG
你可能會對所有這些資訊感到有點不知所措。不過，對於你的日常工作來說，有一個好訊息：JPEG壓縮的更多技術細節被抽象化了，而是暴露為一個單一的 "質量 "quality：一個從0到100的整數。0提供了儘可能小的檔案大小，正如你所期望的那樣，提供了儘可能差的視覺質量。隨著你從0到100的進展，質量和檔案大小都會增加。當然，這個設定是主觀的--不是每一個工具都會以同樣的方式解釋 "75 "的值，而且感知質量總是根據影像的內容而變化。
為了理解這個壓縮設定是如何工作的，我們使用一個常見的用於最佳化影像檔案的基於Web的工具：Squoosh。
Squoosh由Chrome團隊維護，提供不同編碼和配置影像輸出方法的並排比較，配置選項範圍從0-100的全域性“質量”滑塊，到微調色度和亮度重取樣的詳細資訊。 “質量”數值越低，壓縮率越高，生成的檔案越小。
在這裡，當 "quality "設定為60時，檔案大小減少了79%。不要被這個標籤的含義所迷惑：大部分規模的質量差異對人眼來說是難以察覺的，即使進行並排比較也是如此。
要將你的源影像轉換為漸進式JPEG，請勾選 "高階選項 "下標有 "漸進式渲染 "的方框。這些配置選項中的一些幾乎可以肯定比一般的網路專案所需要的更深入，但它們可以為你提供一個近距離的觀察，看看你所學到的關於JPEG編碼的東西是如何在真實世界的使用案例中影響檔案大小和質量的。
實際上，儘管我們現在知道JPEG的內部結構是多麼複雜，但在實踐中並不需要太多的技巧，因為Squoosh只是眾多最佳化JPEG影像的方法之一，它們都使用類似的壓縮級別確定方法：介於0和100之間的一個整數。
確定影像的理想壓縮級別需要技巧，因為所有JPEG編碼的複雜性都被簡化為一個整數，尤其是在考慮到影像內容對結果影響如此之大時。就像思考眨眼或呼吸一樣，考慮JPEG壓縮設定會改變我們對它們的看法。
在寫完所有這些內容後，現在我手動地更仔細地看待了外面的景象——即使圖片本身沒有變化。這使得配置JPEG壓縮變得有些棘手：知道要尋找什麼型別的視覺缺陷。透過首先考慮影像壓縮，你將會更加關注單個葉子，我們會很敏銳地察覺到輕微模糊和偶發的壓縮痕跡。你越是在微調JPEG壓縮設定時尋找這些痕跡，就越有可能發現它們，而使用者很可能不會發現。即使該使用者完全知道該尋找什麼，他們也不太可能有意識到訪問的頁面採用了JPEG壓縮。
因此，避免因為尋找影像痕跡而放大影像或者過於仔細地觀察我們知道會出現痕跡的影像部分。對於使用者而言，微小的痕跡會與其有損的心理視覺系統通常會忽略的微小細節融為一體。實際上，即使你瞭解JPEG嘗試使用的技巧，除非您有意尋找它們，否則在瀏覽網路時您也不會注意到相同的痕跡。因此，通常情況下將JPEG壓縮級別輕微降低一點是安全的選擇——尤其是當該影像由於直接樣式或周圍佈局的限制而顯示的尺寸小於其內在尺寸時。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://web.dev/learn/images/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
