本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。
PNG（Portable Network Graphics）與其他格式有一些不同之處，儘管它旨在取代GIF，但在多個方面與GIF類似。PNG還使用無失真壓縮，這意味著影像資料將被壓縮而不會失去視覺保真度。影像的調色盤可以被量化為“索引顏色”，PNG使用的調色盤與GIF一樣僅限於256種顏色。而更常見的“真彩色”PNG可以包含許多，許多種顏色，最多可達1600萬種。
PNG和GIF都支援透明度，不過有一個重要區別。GIF將透明度視為二進位制命題——畫素要麼是不透明的顏色，要麼是完全透明的。PNG支援“alpha通道”透明度，這意味著每個畫素可以被設定為0（完全透明）到255（完全不透明）之間的透明度級別。
實際上，PNG中的少量量化和無失真壓縮意味著將影像儲存為PNG不會導致視覺質量下降。但是，與更現代的面向Web的編碼相比，這總會導致檔案大小過大。PNG的傳輸大小几乎從來不是拍攝內容的正確選擇。因此，在涉及攝影內容時，PNG 不是正確的選擇。
在過去，PNG在很大程度上被廣泛應用於一個用例，即作為唯一支援半透明的光柵編碼格式。如今，PNG只應被考慮用於需要半透明的簡單藝術作品，比如包含投影的公司標誌，並應與支援半透明的更現代格式（如WebP）進行仔細比較。
與GIF類似，PNG在解決在可擴充套件性和檔案大小方面更適合使用SVG的用例。因此，有時會看到PNG被用作UI元素的備選版本，這是因為在極少數不支援SVG的瀏覽器中，這是一種可行的替代方法，但這種情況越來越少見。
實際上，PNG是維護源影像大小合理的“規範”版本的明智選擇，它可以儲存在本地開發環境中或提交到專案儲存庫中，以便將來需要編輯或重新儲存該影像為替代格式的版本。
但值得注意的是，儘管編碼是標準化的，不同的編輯工具具有不同的編碼方法，有些方法比其他方法更有效。在任何情況下傳輸PNG檔案之前，請務必使用Squoosh或ImageOptim等工具對檔案進行處理。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://web.dev/learn/images/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
