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
