本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。
光柵影像，如JPEG、GIF、PNG和WebP。
光柵影像可以被看作是一組畫素按畫素渲染二維網格的指令。常見的柵格影像格式包括 GIF (.gif)、JPEG (.jpg)、PNG (.png) 和 WebP (.webp)。每種影像格式壓縮和編碼這些指令的方式不同，導致檔案大小的巨大變化：以 JPEG 編碼的照片影像可能只有幾百千位元組，而同樣以 PNG 編碼的影像可能有幾兆位元組，而對終端使用者沒有任何明顯的質量差異。
如果柵格影像源超出其固有尺寸，它將出現失真、塊狀或模糊的情況：
事例地址：https://codepen.io/web-dot-de...
對於含有真實世界細節的影像，光柵影像是正確的工具。
就像選擇光柵影像和向量影像一樣，選擇適當型別的光柵影像最終取決於用例。當我們將光柵影像分解為其編碼時，我們實際上是在討論描述其內容的方法以及我們應用的壓縮方法（或沒有壓縮方法）。請記住，伺服器不會將影像以位元組流的形式傳送到瀏覽器，而是描述構成該影像的畫素網格的位元組的流，以便客戶端重新組合。
因此，為了更好地說明將畫素網格編碼為位元組流資料的過程，現在把自己想像成是一個瀏覽器。你有一張圖紙和一個蠟筆。我，作為網路伺服器，擁有完全相同的東西--但我已經用我的蠟筆在圖畫紙上填上了源影像。如果我給你傳送純文字資訊，我不能給你傳送影像本身，但我可以用我們共同理解的語言，用我們的 "畫素"網格和顏色的共同標準來傳達關於影像源的資訊。
從左上角開始。第一行，第一列是藍色的。第一行第二列是藍色的。第一行第三列是藍色的。第一行，第四列是紅色。
利用這些文字資訊，你就能完美地重現我在圖畫紙上的影像。
影像格式和它們以資料形式編碼的差異可以粗略地認為是這些資訊的格式化方式。例如，我給你傳送的資訊也可以輕易地表示為：
從左上角開始。第一行，第一至第三列是藍色。第一行，第四列是紅色。
這兩種描述方式都會導致相同的影像，但是第二種描述了相同的影像，字元數更少。這是一種無失真壓縮影像資料的方法：所有相同的資訊-因此，沒有視覺保真度的降低-但從我到你的位元組數更少-從伺服器到渲染引擎。這是影像資料的“執行長度編碼”的純語言等效物，其中資料被編碼為要重複的值和計數，而不是重複完整的值多次。
反過來，有失真壓縮，乍一看可能是不可行的-為什麼你會想讓你的影像看起來更糟糕？不過，事實並不完全如此，值得注意的是我們的眼睛也不完美。選擇正確的影像壓縮格式和設定，是在我們能夠感知的視覺細節水平和傳送到瀏覽器的資料量之間找到一個平衡。這兩個因素都是由我們源影像的內容決定的。
光柵影像格式是那些你作為一個開發者可能最熟悉的格式--GIF、JPEG、PNG、WebP，等等。在接下來的幾個模組中，你將瞭解到每種格式的功能。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://web.dev/learn/images/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
