本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。
理解GIF影像格式，同時解釋影像編碼的工作原理。
雖然在現代 Web 上不是特別有用，但 GIF（Graphics Interchange Format）為我們對影像編碼核心概念的介紹提供了基礎。
GIF 可以被認為是影像資料的一個包裝器。它有一個稱為 logical screen 的視口，到該視口的單獨的影像幀繪製，這有點像 Photoshop 文件中的圖層。這就是 GIF 支援它翻頁動畫的方式：一個幀被繪製到邏輯螢幕上，然後被另一個替換，再另一個取代。當然，當我們處理靜態GIF時，這種區別並不重要，它是由繪製在邏輯螢幕上的單幀組成的。
GIF 使用無損資料壓縮方法，如果你感興趣，可以看作是“Lempel–Ziv–Welch”演算法的變體。該演算法工作的細節在這裡不需要了解，但從高層次上看，它有點像“Uglifying” JavaScript，其中檔案中的重複字串被儲存到內部字典中，因此可以引用而不是每次出現時重複。
當然，該演算法並不像按數字塗色那麼簡單。它透過生成的顏色程式碼表再次查詢畫素顏色的重複序列，並建立一個可引用程式碼的第二張表。但是，在任何時候都不會丟失任何影像資料，而僅僅是以可以讀取而不改變它的方式進行排序和重新組織。
雖然GIF在技術上使用無失真壓縮，但它確實有一個嚴重影響影像質量的主要限制：將影像儲存為GIF總是會導致保真度降低，除非該影像已經使用256色或更少。
在GIF的邏輯螢幕上繪製的每一幀最多隻能包含256種顏色。GIF還支援 "索引透明"，一個透明的畫素將參考色表中一個透明 "顏色 "的索引。
將一個數值範圍縮小到一個較小的、近似的輸出值集合的做法被稱為量化，在學習影像編碼時你會經常看到這個術語。這種調色盤量化的結果通常很明顯。
為了更好地理解這個過程，回想一下你能夠從我的描述中重新建立的光柵影像網格。
這一次，在那張原始影像上增加一點細節：多幾個畫素，其中一個是稍微深一些的藍色。
如果沒有任何壓縮--可以這麼說--你可以把這個網格描述為：
第一行，第一列是#0000FF。第一行，第二列是#0000FF。第一行，第三列是#0000FF。第一行，第四列是#FF0000。第二行，第一列是#0000FF。第二行，第二列是#000085。第二行，第三列是#0000FF。第二行，第四列是#FF0000。
使用類似於GIF的無損資料壓縮和顏色索引的東西，你可以把它描述為:
A：#0000ff，B：#ff0000，C：#000085。第一行第一至三列是A，第一行第四列是B，第二行第一列是A，第二行第二列是C，第二行第三列是A，第二行第四列是B。
這種方法能夠在幾個地方簡化畫素對畫素的描述（"第1列到第3列是..."），並透過在開頭定義重複顏色的字典型別來節省一些字元。影像的可視度沒有改變。資訊已經壓縮，沒有任何損失。
正如你所看到的，單個深藍色畫素對我們編碼的大小產生了過大的影響。如果我把自己限制在一個量化的調色盤上，它可以被進一步減少：
A：#0000ff，B：#ff0000。第一行，第一至三列是A，第一行，第四列是B。
不幸的結果是，節省的位元組導致我們失去了畫素完美的精度。
當然，你，渲染引擎，不知道這一點——更深藍色畫素的細節被我編碼源影像時遺漏了。你按照我們關於手頭的顏色的共同理解恰好渲染了影像。
現在，在這個誇張的例子中，將三種顏色減少到兩種，使質量有了明顯的差別。在一個更大、更詳細的影像中，其效果可能不那麼明顯，但它們仍然是可見的。
當編碼為GIF時，像陰影這樣的微妙漸變變得斑駁，個別畫素與周圍環境形成鮮明對比：
實際上，無失真壓縮和調色盤量化的結合意味著GIF在現代Web開發中並不是很有用。無失真壓縮並不能有效減少檔案大小，減少調色盤意味著質量明顯下降。
歸根結底，GIF只是一種有效的格式，用於編碼簡單的影像，這些影像已經使用了有限的調色盤、硬邊緣而不是抗鋸齒、純色而不是漸變--所有的使用情況都是由其他格式更好地滿足的。更小、更有特色的PNG通常是光柵影像的更好選擇，儘管兩者在檔案大小和視覺保真度方面都遠遜於SVG，而在圖示或線條藝術等使用案例中，向量影像是最突出的。GIF最常見的現代用例是動畫，但有更有效的、更容易獲得的現代影片格式來滿足這一目的。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://web.dev/learn/images/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
