您应该了解几个关键因素...
首先，压缩有两种类型：Lossless http://en.wikipedia.org/wiki/Lossless_data_compression and Lossy http://en.wikipedia.org/wiki/Lossy_compression.
-
Lossless意味着图像变小，但不影响质量。
-
Lossy意味着图像变得（甚至）更小，但会损害质量。如果您一遍又一遍地以有损格式保存图像，图像质量会变得越来越差。
还有不同的颜色深度（调色板）：索引颜色 http://en.wikipedia.org/wiki/Indexed_color and 直接上色 http://en.wikipedia.org/wiki/Color_depth#Direct_color.
-
Indexed意味着图像只能存储由作者控制的有限数量的颜色（通常为 256 种），称为颜色图
-
Direct意味着你可以存储很多数千并非作者直接选择的颜色
BMP- 无损/索引和直接
这是一种旧格式。它是无损的（保存时不会丢失图像数据），但也几乎没有压缩，这意味着保存为 BMP 会导致文件大小非常大。它可以同时具有索引和直接调色板，但这只是一个小小的安慰。文件大小太大，以至于没有人真正使用这种格式。
适合：没什么好处。 BMP 没有什么擅长的，也没有其他格式做得更好的。
GIF- 无损/仅索引
GIF 使用无损压缩，这意味着您可以反复保存图像而不会丢失任何数据。文件大小比 BMP 小得多，因为实际上使用了良好的压缩，但它只能存储索引调色板。这意味着对于大多数用例 https://webmasters.stackexchange.com/a/39904/7654，文件中最多只能有 256 种不同的颜色。这听起来像是一个很小的数额，确实如此。
GIF 图像也可以是动画的并且具有透明度。
适合：徽标、线条图和其他需要较小的简单图像。仅真正用于网站。
JPEG- 有损/直接
JPEG 图像旨在通过删除人眼不会注意到的信息来使详细的摄影图像尽可能小。因此，它是一种有损格式，并且一遍又一遍地保存同一文件将导致随着时间的推移丢失更多数据。它有数千种颜色的调色板，因此非常适合照片，但有损压缩意味着它对徽标和线条图不利：它们不仅看起来模糊，而且与 GIF 相比，此类图像的文件大小也更大！
适合：照片。还有渐变。
PNG-8- 无损/索引
PNG 是一种较新的格式，PNG-8（PNG 的索引版本）确实是 GIF 的良好替代品。然而遗憾的是，它有一些缺点：首先，它不能像 GIF 那样支持动画（它可以，但似乎只有 Firefox 支持它，不像 GIF 动画，每个浏览器都支持）。其次，它对 IE6 等旧版浏览器存在一些支持问题。第三，像Photoshop这样的重要软件对格式的实现很差。 （该死的 Adobe！）PNG-8 只能存储 256 种颜色，就像 GIF 一样。
优点：PNG-8 比 GIF 更好的主要特点是支持 Alpha 透明度。
PNG-24- 无损/直接
PNG-24 是一种出色的格式，它将无损编码与直接颜色（数千种颜色，就像 JPEG 一样）相结合。在这方面，它与 BMP 非常相似，只是 PNG 实际上压缩了图像，因此它会生成更小的文件。不幸的是，PNG-24 文件仍然比 JPEG（用于照片）和 GIF/PNG-8（用于徽标和图形）大，因此您仍然需要考虑是否真的想使用它。
尽管 PNG-24 在压缩的同时允许数千种颜色，但它们并不是要取代 JPEG 图像。保存为 PNG-24 的照片可能比同等的 JPEG 图像至少大 5 倍，而可见质量几乎没有改善。 （当然，如果您不关心文件大小并且希望获得最佳质量的图像，这可能是理想的结果。）
就像 PNG-8 一样，PNG-24 也支持 alpha 透明度。
SVG- 无损/矢量
目前越来越流行的一种文件类型是 SVG，它与上述所有文件类型的不同之处在于它是vector https://en.wikipedia.org/wiki/Vector_graphics文件格式（以上均为raster https://en.wikipedia.org/wiki/Raster_graphics）。这意味着它实际上由直线和曲线而不是像素组成。当您放大矢量图像时，您仍然会看到一条曲线或一条直线。当您放大光栅图像时，您将看到像素。
例如：
这意味着 SVG 非常适合您希望在 Retina 屏幕上或不同尺寸下保持清晰度的徽标和图标。这也意味着一个小的 SVG 徽标可以在更大的尺寸下使用，而不会降低图像质量——这需要一个单独的更大（就文件大小而言）的光栅格式文件。
SVG 文件大小通常很小，即使它们在视觉上非常大，这很棒。然而，值得记住的是，它确实取决于所使用形状的复杂性。 SVG 比光栅图像需要更多的计算能力，因为绘制曲线和直线时涉及数学计算。如果您的徽标特别复杂，它可能会降低用户计算机的速度，甚至文件大小会非常大。尽可能简化矢量形状非常重要。
此外，SVG 文件是用 XML 编写的，因此可以在文本编辑器中打开和编辑（！）。这意味着它的值可以动态操纵。例如，您可以使用 JavaScript 更改网站上 SVG 图标的颜色，就像更改某些文本一样（即不需要第二个图像），甚至可以为它们设置动画。
总而言之，它们最适合简单的平面形状，例如徽标或图形。
