栅格图像可以被认为是用于渲染二维网格的一组逐像素指令。常见的栅格图像格式包括 GIF (.gif)、JPEG (.jpg)、PNG (.png) 和 WebP (.webp)。每种图像格式压缩和编码这些指令的方式各不相同，从而导致文件大小存在巨大差异：编码为 JPEG 的照片图像可能只有几百千字节，而编码为 PNG 的同一图像可能达到几兆字节，最终用户在质量上却看不出任何明显的差异。
栅格图像源如果缩放到超出其固有尺寸，则会出现失真、块状或模糊
对于包含真实世界细节水平的艺术作品，栅格图像是适合这项工作的工具。
就像在栅格图像和矢量图像之间进行选择一样，选择合适的栅格图像类型最终取决于用例。当我们把栅格图像分解成它们的编码时，我们真正谈论的是用于描述其内容的方法，以及我们正在应用的压缩方法（或不压缩方法）。请记住，服务器不会通过网络向浏览器发送图像，而是发送字节流，这些字节流描述构成该图像的像素网格，以供客户端重新组合。
因此，为了更好地可视化将像素网格编码为字节流数据的过程，我希望您想象自己充当 Web 浏览器。您有一张毫米方格纸和特定包装的品牌蜡笔。我作为 Web 服务器，拥有完全相同的东西——但我已经用我的蜡笔在方格纸上填充了一个源图像。如果我要向您发送纯文本消息，我无法发送图像本身，但我可以用我们都理解的语言，使用我们共享的“像素”网格和颜色标准来传达有关图像源的信息
从左上角开始。第一行，第一列是蓝色。第一行，第二列是蓝色。第一行，第三列是蓝色。第一行，第四列是红色。
使用此文本信息，您将能够完美地重现我在方格纸上拥有的图像。
图像格式的差异以及它们作为数据编码的方式可以粗略地认为是此信息的格式化方式。例如，我发送给您的信息也可以很容易地表达为
从左上角开始。第一行，第一列到第三列是蓝色。第一行，第四列是红色。
这两种描述中的任何一种都会产生相同的图像，但第二种描述设法用更少的字符描述相同的图像。这是一种无损压缩图像数据的方法：所有相同的信息——因此，视觉保真度没有降低——但是从我到您（从服务器到渲染引擎）通过网络传输的字节更少。这是图像数据的“行程长度编码”的通俗语言等效物，其中数据被编码为要重复的值和计数，而不是多次重复完整的值。
相反的，有损压缩，乍一看可能听起来像是一个不可能的开始——您为什么要让您的图像看起来更糟呢？但情况并非完全如此，值得记住的是，我们的眼睛也没有完美的保真度。为图像压缩选择正确的格式和设置是在我们能够感知的视觉细节水平与发送到浏览器的数据量之间找到平衡的一种练习。这两个因素都由我们源图像的内容决定。
栅格图像格式是作为开发人员的您可能最熟悉的格式——GIF、JPEG、PNG、WebP 等等。您将在接下来的几个模块中了解每种格式的功能。