【学习图片】06：PNG

本文首发于微信公众号：大迁世界, 我的微信：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 已收录，有一线大厂面试完整考点、资料以及我的系列文章。