JPG、PNG、SVG到底要选哪个开发对接不再头疼

1、作为设计师，除了废寝忘食做设计，与开发对接无疑是最费心、最费力的事情，做不好不仅吃力不讨好，还耗费大量精力和头发，那设计师在图片设计导出中应该注意哪些问题才能更好适配移动端、网页端各种不同的端口，又有哪些工具可以让我们更加高效操作，减轻团队负担呢？常见格式的特点首先看看JPG、PNG、SVG、WebP这几种常见格式有什么特点，又适用于什么呢？从好几个不同的维度，我们大致归纳了不同格式各自的特点，但鱼与熊掌不可兼得，大多数时候某种格式它总有更适合使用的地方，那一起来来看看吧！JPGJPG 是一种有损光栅图像格式，这意味着每次保存压缩的 JPG 时，都会不可逆地留下一些信息。这就是为什么我们常见的

2、高糊图，常常都是JPG格式，但也是最好传播的。JPG 利用人眼感知的缺陷我们对亮度比对颜色更敏感因此它使用压缩算法来丢弃我们不擅长感知的信息，因此命名为“有损格式”。应用于给定图像的压缩量将与生成的文件的质量和大小直接相关。优点：文件大小最小最适合高品质照片兼容网络和任何设备缺点：压缩太多，图像质量会大大降低JPG 不支持透明背景JPG 的适用的地方JPG 最适合非移动照片和其他不需要透明背景的文件。我们要避免在彩色背景上使用 JPG。它适用于亮度和颜色压缩，所以 JPG 非常适用于图片和其他逼真或阴影图像，如绘画和 3D 渲染。这就是为什么它多年来一直是最流行的图片存储格式。出于同样的原因，

3、JPEG 对图形（例如徽标、几何图形、屏幕截图等）的处理效果不佳。可以从 JPG 中剥离元数据以减小文件大小。模糊图像或图像区域也会导致文件变小。JPG适合包含多种颜色的复杂图片压缩后会损失严重PNG该便携式网络图形也是一个光栅图像格式，它出现自1995年，是与JPG不同，因为它是一种无损格式，是目前最常见的无损格式，这意味着当一个文件保存和压缩，不会因压缩算法丢失任何信息。优点：能够拥有透明背景，以便在彩色背景上分层图像可以压缩而不会损失与 JPG 一样多的质量缺点：文件大小往往比 JPG 大不支持动画PNG的适用的地方PNG 非常适合用于线条图、徽标、图标和颜色很少的图像。另一方面，具有多

4、种颜色的图片和图像将导致文件大小过大。PNG 的另一个重要用途是当你需要使用透明背景时。在这种情况下，即使对于复杂的图片，仍然可以使用 PNG，因为 JPG 中不存在透明度功能。PNG 非常适合用于线条图、徽标、图标，或需要透明背景的图片SVG可缩放矢量图形或 SVG，是一种基于可扩展标记语言 (XML) 的二维图形矢量图像格式。它支持交互性和动画。可以使用绘图软件或任何文本编辑器创建和编辑 SVG 图像。SVG格式是UI设计师相当熟悉的格式了，开发交接我们离不开它。SVG格式使用文本来定义图像，让可以在不损失质量的情况下缩放图像。它与分辨率无关，鼓励在网页设计中使用 SVG 格式，因为它可以

5、更改以适应未来的变化。另一个优点是可以使用 GZIP 压缩轻松压缩SVG ，使文件缩小 50% 到 80%，而不会丢失任何信息。在软件方面，可以使用许多程序创建和操作 SVG 文件。其中包括Adobe Illustrator、其他 Adobe程序、Microsoft Visio和CorelDraw。SVG 因 Web 的当前状态而获得了很多关注。互联网变得越来越缓慢。第三方cookie、跟踪器、广告、javascript ，不必要代码的数量对速度有相当大的影响。如今对于用户来说，等待5秒已是极限，5g时代背景下更是如此。如果不想要大量的跳出率，必须考虑用户体验。等待不是一个积极的特征，这在很大

6、程度上取决于用户界面。随着网络变得越来越复杂，站点可能会变得臃肿，这不仅是因为代码层，还因为图像的大小。许多设计师和开发人员使用 PNG、JPG 和 GIF 来加载屏幕和登录页面，有时这可能没问题。但是，如果有机会用轻量级 SVG 替换它们，可能会看到加载时间、性能以及最重要的用户体验方面的改进。SVG 为日常网络用户提供了一种解脱。优点：文件大小小无限大小（矢量）而不会降低质量开发人员的灵活性（可以更改设置，包括颜色和大小）可以在矢量程序中进行编辑，例如AIS可以在 Microsoft Office 产品中支持图形可以动画缺点：图像质量和文件大小与颜色数量有关。图像中的颜色越多，图像越清晰，

7、但文件越大。图像中的颜色越少，图像越有颗粒感，但文件大小越小。我们只能使用 256 色的图像。简单图形图标或动图都很适合WebPWebP 是一种由 Google 开发的图像格式，它允许网页设计人员创建具有小文件大小的丰富图像的站点。优点：免费的存储空间：当图像占用更少的空间时，网络托管不会受到影响。更快的加载时间：缓慢的页面加载速度会对您的 SEO 排名产生负面影响。实现更快加载时间的一种方法是压缩图像，从而释放磁盘空间。完整性：WebP 结合了有损和无损压缩，以确保您获得两者的好处。兼容性：WebP虽然还没有通用的兼容性，但是Chrome和Opera用户仍然可以广泛使用WebP；Firefo

8、x 和 Safari 等浏览器可以使用 WebP，但需要插件。高质量：WebP 格式比 JPG 图像小约 30%，比 PNG 格式小近 25%。尽管如此，质量指数没有差异。缺点：并非所有浏览器都支持尽管 WebP 拥有大部分浏览器，但仍有一些不支持它（Internet Explorer 采用它的速度很慢，这是 Internet Explorer 的品牌）。有一种解决方法涉及在 HTML 中创建后备图像，但创建一个完整的其他文件作为备份有时会抵消首先使用 WebP 节省的所有额外存储空间。质量仍然下降与其说是 WebP 的缺点，不如说是所有有损压缩的缺点，图像质量仍然下降。对于大多数人来说，数量

9、可以忽略不计，但对于摄影或平面设计作品集等视觉网站，希望获得最大的视觉质量。JPEG 格式562 KB，WebP 格式416 KB ，小了 25%。比较图像格式文件大小与质量的图表，以结构相似性 (SSIM) 衡量。设计中的选择知道了以上四种常见图像格式类型，但运用在我们的设计中，才能发挥实际作用，用对了年终绩效蹭蹭涨，用不对又免不了被甲方爸爸一顿敲打，那么我们在进行设计中又应该如何进行选择呢？当我们需要图片时图片通常在有损压缩方面表现很好（取决于编码器的配置）。这使得JPG和WebP成为图片的不错选择，JPG 更兼容，但 WebP 可能提供更好的压缩。为了最大限度地提高质量并最大限度地减少下载时间，请考虑使用WebP 作为第一选择和 JPG 作为第二选择的回退。否则，JPEG 是兼容性的安全选择。当我们需要设计icon时对于图标等较小的图像，使用无损格式可以避免在尺寸受限的图像中丢失细节。虽然无损 WebP 是实现此目的的理想选择，但支持尚不广泛，因此 PNG 是更好的选择。如果图像包含少于 256 种颜色，GIF也是一种选择，尽管 PNG 通常使用其索引压缩选项 (PNG-8) 压缩得更小。如果可以使用矢量图形表示图标，请考