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

Question

在构建网站或界面等时，何时应使用某些图像文件类型？

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

我知道PNG＆amp; GIF是无损的，而JPEG是有损的 但是，PNG与...之间的主要区别是什么？ GIF？
为什么我更喜欢一个呢？ 什么是SVG以及何时使用它？

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

Answer 1

Answer 2

JPEG对于所有类型的图像（甚至大多数）都不是最轻的。根据压缩级别，角和直线以及普通“填充”（纯色块）将显得模糊或具有伪影。它是一种有损格式，最适用于无法清楚看到文物的照片。直线（如图纸和漫画等）在PNG中非常好地压缩而且它是无损的。只有当您希望透明度在IE6中工作或者您想要动画时才应使用GIF。 GIF仅支持256色托盘，但也是无损的。

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

• GIF如果需要动画或透明度适用于IE6（注意，PNG透明度适用于IE6之后）
• 如果图像是照片，则为JPEG。
• PNG如果是漫画或其他绘图中的直线，或者是否需要具有透明度的宽色域（并且IE6不是因素）

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

Answer 3

我通常使用PNG，因为它似乎比GIF有一些优势。曾经有过对GIF的专利限制，但那些已经过期。

GIF适用于颜色有限的锐边线条艺术（如徽标）。这利用了格式的无损压缩，有利于均匀颜色的平坦区域和清晰的边缘（与JPEG相比，有利于平滑的渐变和更柔和的图像）。

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

鉴于GIF图像调色板一般限制为256色，它通常不用作数码摄影的格式。数码摄影师使用能够再现更多颜色的图像文件格式，例如TIFF，RAW或有损JPEG，更适合压缩照片。

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

Answer 4

JPEG在锐边等处的质量很差，因此它不适合大多数网页图形。它擅长拍照。

与GIF相比，PNG提供更好的压缩，更大的托盘和更多功能，包括透明度。它是无损的。

Answer 5

GIF限制为256色，不支持真正的透明度。您应该使用PNG而不是GIF，因为它提供了更好的压缩和功能。 PNG非常适合小型和简单的图像，如徽标，图标等。

JPEG可以通过照片等复杂图像进行更好的压缩。

Answer 6

png具有比gif更宽的颜色托盘，而gif是专用的，而png则不是。 gif可以做动画，普通png不能。浏览器只支持png-transparency大致比IE6更近，但是有一个Javascript修复了这个问题。两者都支持alpha透明度。 一般来说，我会说你应该使用png进行大多数webgraphics，同时使用jpeg进行照片，屏幕截图或类似的操作，因为png压缩在使用时效果不是很好。

Answer 7

基于每张图像256色调色板的GIF（至少在其基本版本中）。 PNG可以做“TrueColour”，即开箱即用的1670万种颜色。无损PNG比无损GIF压缩得更好。 GIF可以执行“二元”透明度（0％不透明度或100％不透明度）。 PNG可以处理Alpha透明胶片。

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

Answer 8

可以使用GIF图像显示真实颜色。可以准备具有256帧调色帧和0帧延迟的GIF动画，并将动画设置为仅显示一次。因此，所有帧都可以同时显示。最后，渲染出真彩色的GIF图像。

许多软件能够准备这样的GIF图像。但是，输出文件大小大于PNG文件。如果确实有必要，必须使用它。

Answer 9

主要区别在于GIF获得专利并得到更广泛的支持。 PNG是一种开放式规范，IE6不支持Alpha透明度。 IE7中的支持得到了改进，但并未完全修复。

就文件大小而言，GIF的默认颜色托盘较小，因此乍一看它们的文件大小往往较小。 PNG文件有一个较大的默认托盘，但是您可以缩小它们的颜色托盘，这样，当您这样做时，它们会导致文件大小小于GIF。问题再次出现在Internet Explorer中不支持此功能。

此外，由于PNG可以支持Alpha透明度，如果您想要除二进制透明度之外的透明度变体，它们是唯一的选择。

Answer 10

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

用于照片

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

webp-New format（来自Google）。潜力很大，尽管浏览器support并不是很好。

用于图标和图形

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

png-如果它涉及光栅图形（即在Photoshop中创建）。支持透明性，这在此用例中非常重要。

动画

svg-以及用于矢量图形的CSS动画。 svg的所有优势+ CSS动画的强大功能。

gif-仍然是最受支持的动画图像格式。

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

apng-不错的浏览器support（即没有IE，Edge），但是创建它并不像gif那样简单。

webp-即将使用mp4。 support不好

这是各种动画图像格式的不错的comparison。

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

Answer 11

GIF有8位（256色）调色板，其中PNG最多为24位调色板。因此，PNG可以支持更多颜色，当然算法支持压缩

Answer 12

如果您选择JPEG，并且您正在处理网站的图像，您可能需要考虑免费提供的Google Guetzli感知编码器。根据我的经验，对于固定质量，Guetzli生成比标准JPEG编码库更小的文件，同时保持与JPEG标准的完全兼容性（因此您的图像将具有与普通JPEG图像相同的兼容性）。

唯一的缺点是Guetzli需要很多的时间进行编码..但是当你为网站准备图像时，这只会做一次，而好处仍然是永远的！较小的图像下载时间较短，因此您的网站速度会在日常使用中增加。

Answer 13

@aarjithn指出，WebP是用于存储照片的编解码器。

这也是用于存储动画（动画图像序列）的编解码器。截至2020年，大多数主流浏览器均已开箱即用（compatibility table）支持。 WIC 的说明plugin可用。

与GIF相比，它具有优势，因为它基于视频编解码器VP8，并且具有比GIF更大的颜色范围，其中GIF限制为256种颜色，因此会将其扩展为2 ²⁴ = 16777216种颜色，仍然节省了大量空间。