在为网站和其他数字媒体创建图像时,哪种文件格式会给你带来最佳效果? 你需要考虑速度与图像质量和规模。让我们深入了解每种图像格式的优缺点。

SVG

SVG是可缩放矢量图形。它非常实用,适用于除照片之外的任何类型的图像。这就是设计师更频繁地使用它的原因。

SVG是一种无损格式。这意味着它在压缩时不会丢失任何数据,呈现不同的颜色。最常用于网络上的图形和LOGO以及将在视网膜或其他高分辨率屏幕上查看的项目。

SVG的优点

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

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

从Adobe Illustrator或Sketch设计可导出复杂图形或者是草图

可以访问SVG文本

SVG很容易设计风格和脚本

现代浏览器支持SVG格式,并且面向未来

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

由于基于文本的格式,因此适合搜索

支持透明度

允许静止或动态图像

SVG的缺点

设计SVG可能会变得复杂

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

电子邮件客户端支持有限

PNG

PNG是便携式网络图形,是一种为网络设计的格式,提供JPG无法提供的东西—透明度。 这就是为什么PNG如此受欢迎,这种格式的图像元素可以很方便被上传到网站设计中。

有两种类型的PNG格式: PNG-8和PNG-24。 PNG-8使用更有限的调色板,只有256种颜色,透明度更好,保存尺寸更小。 PNG-24使用无限的调色板,保持透明度,但保存尺寸更大。 两种PNG类型都具有无损压缩。

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

PNG的优点

支持透明度

适用于带有文字的图像

PNG格式可以很好地呈现LOGO

包括搜索引擎的嵌入式文本说明

PNG-8文件很小,重量也是最轻

保存时不会存在没有锯齿状边缘

PNG的缺点

对于大型文件(如图像),文件大小会随着图像的尺寸设定而明显

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

不支持动画特效

PNG-24文件可能变大; 不太适合网络共享

JPG

JPG或Joint Photographic Experts Group联合图像专家小组,(JPEG)可能是最知名并且使用最广的图像格式。 这是大多数图像保存的默认选项,因为它几乎可以无限制地显示彩色照片。

JPG还提供了可以将图像压缩程度从0%(重压缩)到100%(无压缩)的能力。 大多数设计师选择60%到70%范围内。 图像在此压缩级别仍然看起来很好,但文件大小要小得多。

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

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

JPG的优点

非常适合高饱和度和摄影

易于减小文件大小

在电子邮件客户端中有很好的兼容性

JPG的缺点

没有透明度

文本在保存之后会出现锯齿状边缘

不支持动画特效

有损压缩格式

没有自动搜索元数据,必须包含alt信息

你应该使用什么格式呢?

既然你已经知道SVG与PNG和JPG之间存在哪些差异,你应该如何选择使用呢?现在可以通过几个问题来得到答案。

· 你需要矢量或光栅格式吗?

矢量:SVG

光栅:JPG或PNG

· 你需要透明度吗?

是的:SVG或PNG

不:JPG

· 你使用的是高彩色图像吗?

是的:JPG或PNG

不:SVG

· 这是一张大照片吗?

是的:JPG

不:PNG

· 图像是否包含文字?

是的:PNG

不:JPG

· 无损压缩对您来说很重要吗?

是的:SVG或PNG

不:JPG

· 是否需要更新和重新设计图形?

是的:SVG

否:PNG或JPG

· 用于用动画吗?

是的:SVG

不:JPG或PNG

结论

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

在选择文件类型时,考虑如何在项目中使用图像,以找到最适合你要完成的项目的文件类型。 你甚至可能会发现项目中包含使用所有三种文件类型的图像。

原文出处:design shack

小智LOGO翻译编辑整理