【学习图片】04：光栅图像

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