JPG、PNG、WebP图片格式有什么区别，到底该怎么选 | 图叮AI

一个做公众号的朋友去年踩过一个坑。她设计师交来的图是PNG，几张图加起来二十多兆，文章加载半天出不来，读者直接划走。她问我「图能不能小点又不糊」。我说能，你换个格式就行。她这才意识到，原来同一张图，存成什么格式，体积能差好几倍。

JPG、PNG、WebP这三个名字大家天天见，但真要说清它们差在哪、什么时候用哪个，很多人答不上来。这篇就把这件事讲明白，纯讲格式，跟具体工具无关。

先理解一个核心区别：有损还是无损

要分清这三种格式，第一刀要砍在「压缩方式」上。

JPG是有损压缩。 意思是它为了把文件变小，会主动扔掉一些人眼不太容易察觉的图像信息。扔一点，文件小一截，画质降一点点。压缩程度可以调，压得狠了，你会在天空、纯色区域看到一块块的杂色，这就是「压坏了」。JPG最致命的一点是：每次重新保存都会再损一次，反复编辑保存，画质会越来越差。

PNG是无损压缩。 它把文件变小的同时，一个像素的信息都不丢，解开后和原图分毫不差。代价是体积通常比JPG大。我那个朋友的图发糊不是因为PNG，是PNG太大加载慢——这俩是两码事。

WebP两种都能干。 它是个比较新的格式，既支持有损也支持无损。在同样画质下，它一般比JPG和PNG都更小。这是它最大的卖点。

第二个关键区别：能不能透明

这一点直接决定了你某些场景只能用某个格式。

PNG支持透明背景。 你抠出来一个商品、一个人物，背景是透明的，存成PNG，放到任何颜色的背景上都服帖。这是PNG的看家本领，做logo、做需要叠放的素材，基本都用它。

JPG不支持透明。 你把一张透明背景的图存成JPG，透明的地方会自动变成白底（或黑底）。这是新手常踩的坑——明明抠好了透明图，存成JPG一发出去背景全白了。所以凡是要保留透明的，别用JPG。

WebP也支持透明。 这是它比JPG强的地方，既能像JPG那样压得小，又能像PNG那样保留透明。

第三个区别：体积，这是WebP存在的理由

在网页、电商、社交媒体这些对加载速度敏感的场景，图片体积是大事。图太大，页面打开慢，用户等不及就走了。

同一张照片，JPG可能200KB，PNG可能800KB，WebP在画质接近的情况下，往往能压到比JPG还小。一个商品详情页几十张图，换成WebP，整页的体积能砍下来一大块，加载快很多。这就是为什么这几年WebP越来越普及，很多网站和电商平台都默认用它。

但WebP也有个现实小麻烦：一些很老的软件、老系统可能不认它，双击打不开，或者发给别人对方看不了。所以它更适合放在网页上，而不是当成通用的交付格式发给客户。

那到底怎么选，给你一张决策思路

不用背规则，按用途走就行。

照片、没有透明要求、要传到网上： 优先WebP，体积小加载快。如果对方环境老旧、怕打不开，退回JPG也行。

需要透明背景（抠好的图、logo、要叠放的素材）： PNG最稳妥，兼容性最好。如果确定只在网页用、也想要小体积，WebP带透明也可以。

要反复编辑、保存很多次的工作文件： 别用JPG，它越存越糊。中途用PNG，或者直接用编辑软件自己的工程格式，最后导出再转成你要的格式。

截图、文字图、纯色块多的图： PNG更合适，因为这类图边缘锐利，JPG的有损压缩容易在文字边缘产生杂边。

顺带说个常被问到的事实

很多人会发现，现在用一些AI修图工具出来的结果，下载下来是WebP格式的。比如你用图叮AI这类网页工具抠完图、修完图，导出的图片就可能是WebP。这是因为WebP体积小、又支持透明，适合网页场景，所以不少工具默认用它输出——这是个顺带的事实，不是说这些工具是「格式转换器」。

要单纯地把一张JPG转成WebP、或者反过来，那是另一类专门的格式转换工具干的事，跟AI修图是两回事，别搞混。如果你确实需要转格式，去找专门的转换工具就好。

收个尾

我那个公众号朋友的事，最后的解法很简单：让设计师把交付图从PNG换成WebP，二十多兆压到三四兆，文章秒开，画质肉眼看不出区别。问题从头到尾不在图美不美，在格式选得对不对。

JPG、PNG、WebP没有谁绝对最好，它们是为不同场景生的。把「有损还是无损」「要不要透明」「在不在意体积和兼容」这三个问题问清楚，每次该选哪个就一目了然了。下次再存图，先停一秒想想这张图要拿去干嘛，再决定存成什么格式。

同一张图，格式不同，体积和用途也不同