PNG与GIF与JPEG与SVG的比较

 

什么时候应该建立网站或界面等使用某些图像文件类型？

他们的优点和缺点是什么？

我知道PNG和GIF是无损的，而JPEG是有损的。
但是，PNG和GIF的主要区别是什么？
为什么我应该比另一个更喜欢？ 什么是SVG，我应该什么时候使用它？

如果你不关心每一个像素，你应该总是使用JPEG，因为它是“最轻”的一个？

你应该知道一些关键因素......

首先，有两种类型的压缩：无损和有损。

  • 无损意味着图像变小，但不影响质量。
  • 有损意味着图像制作（甚至）更小，但对质量不利。 如果您一次又一次地以有损格式保存图像，图像质量会逐渐恶化。

    • 也有不同的颜色深度（调色板）：索引颜色和直接颜色。

  • 索引意味着图像只能存储由作者控制的有限数量的颜色（通常为256），称为颜色映射
  • 直接意味着您可以存储数千种作者未直接选择的颜色

    • BMP - 无损/索引和直接

    这是一种旧格式。 它是无损的（保存时没有图像数据丢失），但也几乎没有压缩，这意味着保存为非常大的文件大小的BMP。 它可以具有索引和直接的调色板，但这是一个小小的安慰。 文件大小如此之大以至于没有人真的使用过这种格式。

    好：没什么。 没有任何BMP擅长或者没有通过其他格式做得更好。

    BMP与GIF

    GIF - 无损/仅索引

    GIF使用无损压缩，这意味着您可以一遍又一遍地保存图像，永不丢失任何数据。 文件大小比BMP小得多，因为实际使用的是良好的压缩，但它只能存储索引调色板。 这意味着对于大多数使用情况，文件中最多只能有256种不同的颜色。 这听起来像是一个小数目，而且是。

    GIF图像也可以制作成动画并具有透明度。

    适用于：标志，线条图和其他需要很小的简单图像。 只有真正用于网站。

    GIF vs JPEG

    JPEG - 有损/直接

    JPEG图像被设计成通过去除人眼不会注意到的信息来尽可能小地制作详细的照片图像。 因此，它是一种有损格式，并且反复保存相同的文件会导致更多数据随时间丢失。 它具有数千种颜色的调色板，对于照片来说非常适合，但是有损压缩意味着它对徽标和线条图很不利：它们不仅看起来模糊不清，而且与GIF相比，这些图像也将具有更大的文件大小！

    适用于：照片。 此外，渐变。

    JPEG与GIF

    PNG-8 - 无损/索引

    PNG是一种较新的格式，而PNG-8（PNG的索引版本）确实是GIF的好替代品。 然而令人遗憾的是，它有一些缺点：首先，它不能像GIF那样支持动画（可以，但只有Firefox似乎支持它，不像每个浏览器支持的GIF动画）。 其次，它对IE6等老式浏览器有一些支持问题。 第三，像Photoshop这样的重要软件的格式执行很差。 （该死的，Adobe！）PNG-8只能存储256种颜色，比如GIF。

    好处：PNG-8比GIF更好的主要是支持Alpha透明度。

    PNG-8与GIF

    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，它与上述不同之处在于它是矢量文件格式（以上都是栅格）。 这意味着它实际上由线条和曲线组成，而不是像素。 当您放大矢量图像时，仍然会看到一条曲线或一条线。 放大光栅图像时，会看到像素。

    例如：

    SVG vs PNG

    这意味着SVG非常适合您希望在Retina屏幕或不同尺寸下保持清晰度的徽标和图标。 这也意味着一个小的SVG标志可以在更大（更大）的尺寸下使用，而不会降低图像质量 - 这需要使用光栅格式的单独更大（文件大小）的文件。

    SVG文件大小通常很小，即使它们在视觉上非常大，这非常棒。 然而，值得铭记的是，它取决于所用形状的复杂性。 由于数学计算涉及绘制曲线和线条，因此SVG需要比光栅图像更多的计算能力。 如果您的标志特别复杂，可能会减慢用户的计算机速度，甚至会产生非常大的文件大小。 尽可能简化矢量形状非常重要。

    另外，SVG文件是用XML编写的，所以可以在文本编辑器（！）中打开和编辑。 这意味着它的值可以在飞行中被操纵。 例如，您可以使用JavaScript来更改网站上SVG图标的颜色，就像您对某些文本（即不需要第二张图像）或甚至为其设置动画效果一样。

    总之，它们最适合简单的平面形状，如标志或图形。

    我希望这有助于！

    对于各种图像（甚至大多数）来说，JPEG并不是最轻的。 取决于压缩级别，角落和直线以及简单的“填充”（纯色块）将显得模糊或产生伪影。 这是一种有损格式，适用于无法清晰看到伪影的照片。 直线（如图纸和漫画等）在PNG中压缩非常好，而且无损。 只有当您希望透明度在IE6中工作或您需要动画时才应使用GIF。 GIF仅支持256色调色板，但也是无损的。

    所以基本上这是一种决定图像格式的方法：

  • GIF如果需要动画或透明度适用于IE6（请注意，IE6后的PNG透明效果）
  • JPEG如果图像是照片。
  • 如果是漫画或其他绘图中的直线，或者需要透明度较宽的颜色范围（并且IE6不是一个因素），则为PNG;

    • 正如所评论的，如果您不确定哪些资格，可以尝试使用不同压缩比的每种格式，并权衡图片的质量和大小，并选择您认为最合适的一种。 我只是给出了经验法则。

    谷歌已经写得很好。 从选择正确的图像格式，你可以找到一个流程图来做出决定：

    选择合适的图像合成器

    链接地址: http://www.djcxy.com/p/62881.html

    上一篇: PNG vs. GIF vs. JPEG vs. SVG

    下一篇: size, or other benefit to JPEG sizes being multiples of 8px or 16px?