PNG、GIF、JPEG和SVG有哪些不同的用例？

Question

PNG、GIF、JPEG和SVG有哪些不同的用例？

imagesvgpngjpeggif

602

在构建网站或界面等时，应该何时使用特定的图像文件类型？

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

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

如果您不关心每个像素是否精确，那么是否应该总是使用JPEG，因为它是“最轻”的文件类型？

- Faruz

14个回答

48

JPEG并非适用于所有类型的图像（甚至大部分），因为角落、直线和纯色块填充取决于压缩级别，这些元素可能会出现模糊或伪影。它是一种有损格式，最适合于照片，其中你无法清晰地看到伪影。PNG对直线（如绘画和漫画等）进行了非常好的压缩，并且是无损的。只有当需要IE6中的透明度工作或动画效果时，才应使用GIF。GIF仅支持256色调色板，但也是无损的。

因此，以下是决定图像格式的方法：

如果需要动画或在IE6上需要透明度，请使用GIF（请注意，PNG透明度在IE6之后有效）
如果图像是照片，请使用JPEG。
如果需要直线（如漫画或其他绘画）或者需要广泛的颜色范围和透明度（并且IE6不是考虑因素），请使用PNG。

如果你不确定哪个格式最适合，请尝试使用不同的压缩比率，并比较图片的质量和大小，然后选择你认为最好的。我只是提供了一些经验准则。

- Earlz

3

好的回答，但我想补充一下：如果您不确定，可以尝试每个选项，看看图片效果和文件大小如何。 - Jesse Weigert

看到最后，你找出了问题并给出了很好的答案。谢谢。我不知道IE6的透明度问题，你让我有了很多思考。 - Faruz

GIF 已经过时了，我不建议在任何情况下使用它。对于动画效果，有许多现代方法可供选择（视频、Flash、JavaScript + SVG）。PNG 透明度也可以使用（虽然不完美，但与 GIF 相当），支持 IE 5.5 及以下版本。 - Tronic

IE 5.5和6实际上支持8位PNG透明度，就像GIF一样，只是不支持24位PNG的阿尔法通道透明度。 - Graham Conzett

1

@Tronic，这是真的，但这并不是“容易的”。 - Earlz

显示剩余3条评论

7

我通常选择PNG格式，因为它似乎比GIF有一些优势。以前对GIF有专利限制，但现在这些限制已经过期。

GIF适合带有有限颜色的锐利线条艺术（例如标志）。这利用了该格式的无损压缩，其有利于具有明确定义边缘的均匀颜色的平面区域（与JPEG相反，后者有利于平滑渐变和柔和的图像）。

GIF可用于小型动画和低分辨率电影片段。

鉴于GIF图像调色板的普遍限制为256种颜色，通常不将其用作数字摄影的格式。数字摄影师使用能够再现更大范围颜色的图像文件格式，如TIFF，RAW或有损JPEG，后者更适合压缩照片。

PNG格式是GIF图像的流行替代品，因为它使用更好的压缩技术并且没有256种颜色的限制，但PNG不支持动画。 MNG和APNG格式都源自PNG，支持动画，但使用较少。

- David Bridges

3

PNG也支持透明度，这对于网络图形来说非常重要。 - Tronic

5

JPEG 在锐利边缘等方面的质量较差，因此不适合大多数网页图形。它在照片方面表现出色。

与 GIF 相比，PNG 提供更好的压缩、更大的调色板和更多功能，包括透明度。而且它是无损的。

- Konrad Garus

5

GIF只支持256种颜色，并且不支持真正的透明度。你应该使用PNG代替GIF，因为它提供更好的压缩和功能。对于像标志、图标等小而简单的图片，PNG非常适合。

JPEG在处理复杂的图片，如照片时具有更好的压缩效果。

- Desintegr

4

截至2018年，我们有几种新的格式，更好地支持以前的格式，并使用视频而不是图像的一些聪明技巧。

对于照片：

JPG - 仍然是最广泛支持的图像格式。

WebP - 谷歌的新格式。具有很大的潜力，但浏览器支持并不太好。

对于图标和图形：

SVG - 尽可能使用。在视网膜屏幕上缩放良好，在文本编辑器中可编辑，并且如果在DOM中加载，则可以通过JS / CSS进行自定义。

PNG - 如果涉及光栅图形（即在Photoshop中创建时）。支持透明度，在这种情况下非常重要。

对于动画：

SVG - 加上矢量图形的CSS动画。所有SVG的优点+ CSS动画的强大功能。

GIF - 仍然是最广泛支持的动画图像格式。

mp4 - 如果动画图像实际上是短视频剪辑。Twitter / Whatsapp将gif转换为mp4。

apng - 良好的浏览器support（即没有IE，Edge），但创建它不像gif那么直截了当。

webp - 接近使用mp4。支持较差

这是各种动画图像格式的一个很好的比较。

最后，无论哪种格式，请确保对其进行优化-每种格式都有工具（例如SVGO，Guetzli，OptiPNG等），可以节省大量带宽。

- aarjithn

4

有一种方法可以使用GIF图像显示真实颜色。可以准备一个包含256个彩色调色板帧且帧延迟为0的GIF动画，并将动画设置为仅显示一次。因此，所有帧可以同时显示。最终，呈现出真正的彩色GIF图像。

许多软件都能够准备这样的GIF图像。但是，输出文件大小比PNG文件要大。只有在确实需要时才必须使用它。

编辑：正如@mwfarnley提到的，可能会出现问题。尽管如此，仍然存在可能的解决方法。可以在这里看到一个工作示例。最终呈现的图像如下所示：完整的彩色GIF图像。

- MTSan

许多显示GIF的应用程序都会有最小帧延迟，因此在实践中，一堆帧与0延迟不倾向于同时渲染，遗憾的是。例如，请参见https://webmasters.stackexchange.com/questions/26994/why-is-this-gifs-animation-speed-different-in-firefox-vs-ie#。 - mwfearnley

3

PNG拥有比GIF更广泛的色彩调色板，而GIF是专有的，而PNG不是。 GIF可以做动画，普通的PNG不能。 PNG透明度只被支持在IE6之后的大多数浏览器中，但是有一种JavaScript解决方案来解决这个问题。两者都支持Alpha透明度。总的来说，我建议您在大多数Web图形中使用PNG，而在照片、截图或类似情况下使用JPEG，因为PNG压缩效果不太好。

- HalloDu

3

基于每张图片256色的调色板（至少在基本版本中），GIF格式是一种图像格式。PNG可以实现“真彩色”，即直接支持1670万种颜色。无损压缩PNG比无损压缩的GIF更好。GIF可以实现“二进制”透明度（0%不透明或100%不透明）。PNG可以处理Alpha透明度。

总的来说，如果您不需要使用Alpha透明图像并且要支持IE6，那么在需要矢量插图等像素完美图像时，PNG可能是更好的选择。JPG对于照片来说是无与伦比的。

- Pekka

3

以下是包含WebP格式的更新答案：

JPEG：

JPEG文件格式是为了优化使用复杂颜色范围的照片和其他图像而创建的。
在保存JPEG时（例如在Photoshop中），您可以设置要实现的优化级别，从无损表示没有详细信息丢失到非常有损。
对于大多数网络应用程序而言，您可以将压缩设置为75％，而不会失去太多细节。

何时使用JPEG？任何时候都需要使用带有复杂色彩渐变的照片或图形，而您无法使用WebP时。

PNG

PNG主要是一种用于高质量计算机生成图像的无损位图图像格式。
与JPEG不同，它可以具有透明层。当您在网络上看到透明图像或图形时，通常是PNG。

何时使用PNG？任何时候都需要使用计算机生成的图形或带有透明度的图像。不建议将PNG用于常规照片，因为文件大小通常比等效的JPEG或WebP要大得多。

GIF：

GIF是一种支持图像和动画的256色图形格式。
很久以前，GIF经常用于简单图形，然后逐渐被JPEG和PNG取代。
GIF图像：文件大小低，质量也较低。它们几乎没有彩色深度，只有256种颜色可供使用。将其替换为SVG。
动态GIF：它们可以变得非常大非常快，可能会导致性能问题。将它们替换为视频。（例如Twitter将上传的所有动态GIF都转换为标准视频文件，然后共享这些视频文件，而不是动态GIF。）

何时使用GIF？对于Web应用程序，最好不要使用GIF！将GIF图像替换为SVG；将动画GIF替换为视频。

SVG

SVG是一种为Web本地设计的图形格式，描述线条、曲线、形状，允许浏览器实时绘制图形。
SVG可伸缩，意味着图形在任何尺寸下都看起来很好，从微小到极其大。
甚至可以对它们应用CSS。

何时使用SVG？任何时候都需要使用计算机生成的图形，可能需要缩放或需要响应 - 如图标、徽标或图表。

WebP

WebP是一个全新的无损和有损图像格式，具有透明度，专为网络而创建。
它旨在成为JPEG的替代品，因为它可以提供良好的压缩效果并支持透明度。
WebP被所有现代浏览器支持，但在旧版浏览器中不支持，因此现在使用它们需要使用旧的图像格式进行回退。

何时使用WebP？ 如果您知道您的受众将使用较新的浏览器，则可用于图像和计算机图形。如果您需要支持旧版浏览器，则提供回退到JPEG或PNG。

- Evan MJ

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chuck Le Butt · Accepted Answer

您需要了解几个关键因素...

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

无损表示图像变小，但不会影响质量。
有损表示图像变得更小，但会影响质量。如果您一遍又一遍地用有损格式保存图像，则图像质量会越来越差。

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

索引意味着图像只能存储有限数量的颜色（通常为256），由作者在称为“调色板”的东西中控制
直接意味着您可以存储许多未经作者直接选择的颜色

BMP - 无损/索引和直接

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

适用于：实际上没有什么好处。 BMP没有擅长的领域，也没有其他格式做得更好。

BMP vs GIF

GIF - 仅限无损/索引

GIF使用无损压缩，这意味着您可以保存图像而不会丢失任何数据。文件大小比BMP小得多，因为实际上使用了良好的压缩，但它只能存储索引调色板。这意味着对于大多数用例, 文件中最多只能有256种不同的颜色。听起来很少，确实如此。

GIF图像也可以是动画的，并具有透明度。

适用于：需要小的标志、线描和其他简单图像。仅在网站上使用。

GIF vs JPEG

JPEG - 有损压缩 / 直接压缩

JPEG 图像旨在通过删除人眼无法察觉的信息，使详细的照片图像尽可能小。因此，它是一种有损压缩格式，多次保存相同文件将导致随着时间的推移丢失更多数据。它具有数千种颜色的调色板，非常适合于照片，但有损压缩意味着对于标志和线条图形来说并不理想：它们不仅会显得模糊，而且与 GIF 相比，这些图像也会具有更大的文件大小！

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

JPEG vs GIF

PNG-8 - 无损压缩/索引

PNG是一种较新的格式，PNG-8（PNG的索引版本）是GIF的一个很好的替代品。但不幸的是，它有一些缺点：首先，它不能像GIF一样支持动画（虽然它可以，但只有Firefox似乎支持它，而GIF动画则被每个浏览器支持）。其次，它在旧版浏览器（如IE6）中存在一些支持问题。第三，重要的软件（如Photoshop）对该格式的实现非常差。（该死的Adobe！）PNG-8只能存储256种颜色，就像GIF一样。

适用于：PNG-8比GIF更好的主要是具有Alpha透明度支持。

PNG-8 vs 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非常适合于希望在Retina屏幕上保持锐度或在不同大小时保持锐度的标志和图标。这也意味着，即使是小的SVG标志也可以在更大的尺寸下使用，而不会降低图像质量——这需要使用文件大小更大的光栅格式单独处理。

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

另外，SVG文件是用XML编写的，因此可以在文本编辑器中打开和编辑(!)。这意味着其值可以动态地进行操作。例如，您可以使用JavaScript更改网站上SVG图标的颜色，就像处理一些文本一样（即无需第二个图像），甚至可以对其进行动画处理。

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