SVG vs PNG vs JPG：图像格式优点和缺点

在为线上网络和其他有关数字媒体（尤其是在网站设计项目中）创建图像时，哪种文件格式可以给你带来最佳的视觉效果呢？ 你必须同时考虑速度与图像质量和规模。 所以，你应该使用什么格式的图像文件呢：SVG vs PNG vs JPG？

曾经有一段时间你只需要使用一个尺寸合适的JPG来就可以适应72 dpi的空间。 但是这种情况现在很难实现了，随着高分辨率屏幕的普及，多种设备以及活泼的网站效果使得它成为一个更加复杂的过程。 所以让我们深入了解每种格式的优缺点！

SVG

SVG或者称之为可缩放矢量图形非常实用。 这就是设计师为什么更频繁地使用它的原因。

因为SVG是一种矢量格式，所以不管在什么分辨率和尺寸下它们都能保持很好的视觉输出，适用于除照片之外的任何类型的图像。

SVG实际上是一种无损格式 - 意味着它在压缩时不会丢失任何数据 - 并且可以呈现不同的颜色，最常用于网络上的图标和logo以及我们现在在视网膜屏或其他高分辨率屏幕上查看的项目很多都采用了这种文件格式。

SVG格式的优势：

· 矢量格式可以呈现任何大小而不降低其质量；

· 能够在代码或文本编辑器中创建简单的SVG渲染；

· 可以从Adobe Illustrator或Sketch设计和导出复杂图形

· 可以访问SVG文本；

· SVG很容易设计风格和脚本；

· 现代浏览器支持SVG格式，并且有很广阔的未来；

· 格式具有高度可压缩性和轻量级

· 由于基于文本的格式，因此有利于SEO；

· 支持透明度；

· 允许静止或动态图像。

SVG格式的劣势：

· 设计SVG可能会变得复杂；

· 无法在某些低版本的浏览器上呈现；

·  对于邮件客户来说，它的格式有限。

PNG

PNG，或者你可以称其为便携式网络图形，是一种为网站设计所准备的图片格式，可以提供JPG图像格式无法提供的东西 - 透明度。 仅此一点，就是为什么PNG如此受欢迎的原因，该格式的图像元素可以很方便被上传到网站设计中。

有两种类型的PNG格式——PNG-8和PNG-24。 PNG-8使用更有限的调色板，只有256种颜色，透明度更好，输出的尺寸更小。 PNG-24使用无限的调色板，保持透明度，但输出的尺寸更大，文件大小也更大。 两种PNG类型都可以无损压缩。

虽然PNG格式与GIF类似，但它们不支持动画。 此格式最常用于图标，小型静止图像或任何需要透明度的图像。

PNG格式的优势：

· 支持透明度；

· 适用于带有文字的图像；

· PNG格式可以很好地展示logo；

· 可以为了SEO的优化嵌入文本说明；

· PNG-8文件很小，重量最轻；

· 格式输出不会存在锯齿状边缘。

PNG格式的劣势：

· 对于大型文件（如图像），文件大小会随着图像的尺寸设定而明显；

· 一些较旧的电子邮件客户端无法呈现它们；

· 不支持动态效果；

· PNG-24文件可能会很大，不太适合用于共享。

JPEG

JPG或Joint Photographic Experts Group，就是我们所说的（JPEG）可能是最知名并且目前来说使用最广的图像格式了。 这是大多数图像保存的默认选项，因为它几乎可以无限制地显示彩色照片。

JPG还提供了可以将图像压缩程度从0％（重压缩）到100％（无压缩）的选项。 大多数设计师选择60％到70％的参数。 图像在此压缩级别仍然看起来很好，但文件大小要小得多。

JPG使用有损压缩，并且在压缩期间不保存原始数据。 每次重新保存照片并将其导出为JPG时，它都会降级。

JPG格式最常用于图像，摄影和任何具有大量颜色的东西。

JPEG格式的优势：

· 非常适合高色彩和摄影图像；

· 易于缩减文件大小；

· 在电子邮件客户端中能够很好的兼容。

JPEG格式的劣势：

· 没有透明度；

· 图像中的文本在存储后悔出现锯齿状边缘；

· 不支持动效；

· 有损格式；

· 没有有利于SEO的数据，必须通过添加alt标签来优化。

你应该使用什么格式？

现在你已经知道SVG与PNG和JPG之间存在哪些差异，你应该如何选择使用呢？

你可以试着问你自己几个问题来得到答案。

· 你需要矢量还是光栅格式？

矢量：svg

栅格：png或jpg

· 你需要透明度吗？

需要：png或svg

不需要：jpg

· 你需要一个高色值或颜色丰富的图像吗？

需要：png或jpg

不需要：svg

· 你要使用的是否是一个大图片？

是：jpg

不是：png

· 图像上需要保存文本内容吗？

需要：png

不需要：jpg

· 对于你来说无损和有损压缩是否重要？

重要：svg或png

不重要：jpg

· 是否需要更新和重新部署图形？

是：svg

否：png或jpg

· 是否需要动效输出？

是：svg

否：png或jpg

总结

所有三种图像格式 - SVG，PNG和JPG - 都具有实用和广泛的应用。 虽然SVG是最新的格式，并且通常可以保存到最小的文件大小，但对于不同的项目和需求，它并不总是最佳选择。

在选择文件类型时，考虑如何在项目中使用图像，以找到最适合你要完成的项目的文件类型。 你甚至可能会发现项目中经常会包含使用所有三种文件类型的图像（这实际上很常见！）。

图文来自：design shack 

由深圳网站建设公司-Clh翻译编辑整理