SVG、PNG还是JPG?论网络上各种图片格式的优劣

svg vs png vs jpg - design, chosen, sharing - SVG、PNG还是JPG?论网络上各种图片格式的优劣

在为网站或其他数字媒体设计图片的时候,你认为什么格式是最好的?你需要同时考虑到图片的质量和尺寸(影响加载速度)。一般来说,我们会选择SVG、PNG和JPG中的一种,那么你该如何选择这三种格式呢?

你可能曾经只知道用JPG格式,并且根据使用尺寸用72DPI导出。然而,在高分辨率屏幕、低分辨率屏幕、移动设备等各种场合下,这个工作就会更复杂。接下来,我们将为你分析这三种图片的优势与劣势,帮助你学会使用其他图片格式。

SVG

SVG的全称是Scalable Vector Graphics,即可放缩矢量图形,是一种应用性极高的图片格式。这也是目前设计师越来越热衷的图片格式。

由于SVG是矢量图形,因此在任何尺寸上都能有较好的表现,可以说在放缩能力上完胜任何其他图片格式。

同时,SVG是一种无损格式,也就是说在压缩的时候图像不会有任何损失。SVG可以包含无限多种颜色,目前在网站和其他项目中非常常见,被广泛用在Logo和插画中,在高分辨率的屏幕上和在被放大许多倍的场合下,SVG的清晰度也不会受到影响。

SVG的优势

  • SVG是矢量格式,在任何尺寸下都能出色渲染
  • 可以使用文字编辑器撰写少量代码来创建SVG
  • 可以使用Adobe Illustrator或Sketch等矢量编辑器输出复杂的SVG
  • SVG内的文本是可访问的
  • SVG可以轻松地和style和脚本组合使用
  • SVG被现代浏览器广泛支持,而且前景很好
  • SVG格式可以高度压缩,本身体积也不大
  • 由于文本可访问,SVG有利于搜索引擎收录
  • SVG支持透明度
  • SVG不仅支持静态图像,也支持动态的

SVG的劣势

  • 设计某些SVG可能很复杂
  • 某些非主流或低版本的浏览器不能很好地渲染SVG,或者根本不支持
  • 目前仅少数邮件客户端可支持SVG

更多SVG相关内容

 

PNG

PNG格式,全称为Portable Network Graphics,即便携式网络图形,是一种专为网站设计以补充JPG不支持的功能(透明度)而诞生的。支持透明度这一特性使得PNG格式成为网络上最热门的用于网络元素的图片格式,比如Logo或者图标。

PNG实际有两种格式,即PNG-8和PNG-24。PNG-8的可用颜色更少,仅支持256色,但某种程度上透明度支持更好,而且输出容量更小。PNG-24则支持无限多种颜色,支持透明度但容量较大。两种PNG格式都是无损压缩的。

尽管PNG格式和GIF格式有些相似,但PNG不支持动画。PNG格式在图标、小型图片和需要透明度的场合是最常用的。

PNG的优势

  • PNG格式支持透明度
  • PNG对图片上的文字有优化
  • PNG格式能很好地渲染Logo
  • PNG格式可以为搜索引擎提供嵌入式文字说明
  • PNG-8容量较小,是最轻量化的图片格式之一
  • PNG输出没有毛边

PNG的劣势

  • 作为照片等内容的载体时,在尺寸增加的时候,PNG的尺寸会迅速增加
  • 有些旧版本的邮件客户端不能很好地渲染PNG格式
  • PNG不支持动画
  • PNG-24格式可能很大,用于网络分享效果不佳

 

JPEG

JPEG(也可以是JPG),全称为Joint Photographic Experts Group,即联合图像专家组,可能是现在最知名的图片格式。它是大多数图片的默认存储格式,因为它支持无限色彩而对照片非常友好。

JPG提供了选择压缩比率的选项,可以从0%(重度压缩)到100%(不压缩)。大多数设计师会选择在60%到70%的压缩比率之间输出JPG,在这个压缩率下,图片的质量不会受到多少损害,但是尺寸却明显下降。

JPG采用有损压缩技术,即如果进行压缩,那么JPG无法保留全部的原始信息。因此,在JPG格式每次被重新保存之后,它的输出质量都会下降一点。

JPG格式是目前应用最广的图片格式,照片等含有大量颜色的图片基本会选择JPG格式。

JPG的优势

  • JPG非常适合颜色量大的图片或照片
  • JPG很容易降低图片容量
  • JPG在邮件客户端有良好的渲染支持

JPG的劣势

  • JPG不支持透明度
  • JPG上的文字会出现毛边
  • JPG不支持动画
  • JPG采用有损压缩技术
  • JPG无法为搜索引擎提供内置文字标签,只能外加alt标签

 

你应该用什么格式?

读完上面的文字,你应该就能大致了解SVG、PNG和JPG三种格式的区别。那么你该如何选择这三种格式呢?

你可以试着回答下面这些问题,并根据你的答案选择合适的格式:

你是否需要矢量图格式?

是:SVG

否:JPG或PNG

你是否需要透明度?

是:SVG或PNG

否:JPG

你是否需要大量颜色?

是:JPG或PNG

否:SVG

你是否要用大幅照片?

是:JPG或PNG

否:SVG

图片是否包含文字?

是:SVG或PNG

否:JPG

图片是否需要更新或重新部署?

是:SVG

否:JPG或PNG

你是否需要动画

是:SVG

否:JPG或PNG

 

总结

三种图片格式,不论是SVG、PNG还是JPG都是应用广泛而且非常实用的。尽管SVG格式的诞生是最晚的,并且在很多场合下是尺寸最小的,但不意味着它总是最合适的格式。

通过思考你的图片将如何使用以及用在哪里,以此决定使用什么格式,最终混合使用这三种格式可以将你的项目最大程度地优化。事实上,同时使用这三种格式的图片是非常普遍的做法。

SVG vs PNG vs JPG: Image Format Pros & Cons

微信打赏支付宝打赏

感谢您的支持!

文章来源:卡米雷特的小站www.kamilet.cn)转载请注明出处。

卡米雷特

视觉控&技术控,不断学习中!


您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注