共计 1482 个字符，预计需要花费 4 分钟才能阅读完成。
本文首发于微信公众号：大迁世界, 我的微信：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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。