JPG、PNG、WebP、HEIC、GIF，这些图片格式，它们？
这篇内容依旧不讲复杂的知识，咱们就讲下在咱们生活中能利用上关于图片的相关知识，例如以下三个问题，你知道吗
- 照片、截图、透明图和动图，分别优先用什么格式？
- 为什么有的图片更小，有的反复保存以后会变糊？
- 图片打不开或者发出去变糊时，问题通常出在哪里？
下面这几种格式，是我们日常生活里最常碰到的。稍微了解一下，就能解决绝大多数图片场景的问题。
那问题来了——图片格式为什么会有这么多种？如果秦始皇复活了，能不能给统一一下？
| 格式 | 你通常会在哪里碰到 | 适合解决什么问题 |
|---|---|---|
| JPG / JPEG | 手机照片、聊天图片、网页照片 | 照片体积小、兼容性好 |
| PNG | 截图、界面、图标、透明底图片 | 保住文字和线条，支持透明 |
| WebP | 网站图片、网页另存图片 | 在网页上兼顾体积、画质和透明 |
| SVG | 图标、Logo、AI 设计稿导出 | 无限放大也不会糊，文件还很小 |
| GIF | 表情包、循环小动图、简单操作演示 | 跨软件播放短动画 |
答案是：还真不行，秦始皇来了都没用。
因为这些格式是用于不同的场景下的，接下来分组讲，先说生活里最常见、也最容易被搞混的一组：JPG 和 PNG。
JPG vs PNG：画质&透明
这两个格式看着差不多，其实核心区别就是有损 / 无损，加上透明 / 不透明。
| 对比维度 | JPG / JPEG | PNG |
|---|---|---|
| 压缩方式 | 有损压缩 | 无损压缩 |
| 画质表现 | 压缩时会丢掉一部分肉眼不太容易察觉的细节，压缩比越高、丢得越多，容易出现模糊、色块、细节丢失 | 不丢任何信息，画质始终跟原图一致 |
| 是否支持透明 | 不支持，透明区域会被填成纯色（通常是黑色或白色） | 支持透明通道 |
| 文件体积 | 小 | 相对大 |
| 常见用途 | 照片、聊天图（像微信等社交软件上，保存的图片，默认就是 JPG 格式） | 截图、抠图素材、Logo、产品图 |
首先记得一点：平时下载图片或者自己导出图片的时候，优先选 PNG。
原因很简单：PNG 是无损的，综合适用性更强，不管你后续要不要用到透明背景，选它都不会出错。JPG 的优势只在"体积更小"这一件事上，如果你不是特别在意存储空间，PNG 是更保险的选择。
划重点：不是说 JPG 不好，而是遇到"不确定选哪个"的场景，PNG 更不容易踩坑。
如何就是“透明”这个点尤其关键，你在网上看到的那些抠图素材、扣好的产品图，基本都是 PNG 格式，业就是背景是可以透明的，要是换成 JPG，原本透明的地方直接就会变成一块黑底或白色，没法直接叠加使用。
看上面这张图，原素材是 png 格式那张，我把 png 转成了 jpg 格式后，原本透明的背景就变成了黑色，右边部分就是我导入图片软件里面，jpg 的黑底就是会存在的，而 png 则是就只有主体显示。
为什么图片转发几次就糊了？
这里能顺手回答一个大家天天在微信上，或者一些网站保存的图片遇到的问题——为什么一张图反复保存、反复转发之后，会越来越糊？
答案就是，那张图大概率就是 jpg 格式，因为jpg 格式是有损处理
关键在"有损"这两个字上，它不是压缩一次就完事了，而是每保存一次，就再丢一次细节。你从朋友那儿收到一张图，保存下来是"压缩一次"
你再转发给别人，对方保存又"压缩一次"；如果这张图在不同群里传了五六轮，实际上已经被反复压缩了五六次，每次都在上一次已经丢失细节的基础上再丢一次。
这就跟复印复印件是一个道理，复印一次还能看清楚字，复印十次之后，字早就糊成一团了。
而微信默认发送图片时，为了省流量，本身就会先把图片压缩成 JPG 格式再发出去。所以你会发现，同一张图在微信里传的轮次越多，观感上就越糊，不是微信"技术不行"，而是每一轮转发都在做一次 JPG 压缩，损耗是累积的。
建议： 如果你要发的图片里有文字、图表、截图这类对清晰度要求高的内容，尽量选择原图发送或者通过邮件的形式发送。
如果想要深度了解下为啥网上有些图片会包浆，可以看下epcdiy老师的这期视频
其他格式
GIF：动图
聊完了 JPG 和 PNG，再简单说说 GIF。
你刷到的表情包、循环播放的小动图，基本都是 GIF 格式。它的原理说白了很简单：把好几张连续的静态图片，按顺序一张接一张地快速播放
跟小时候玩的"翻页动画书"是一个道理——每一页画得稍微有点不一样，快速翻页，看起来就像动起来了。
GIF 本质上就是把这些"一页一页"的图片打包存成一个文件，再规定好每张图片停留的时间和播放顺序，播放的时候就成了一个循环的小动画。
所以你会发现 GIF 一般文件都不大，但如果动图很长、很复杂，文件也会跟着变大，因为本质上你存的是好几十张甚至上百张图片的集合。
WebP：网页专用的"六边形战士"
前面聊完 JPG 和 PNG 的死对头关系——有损 vs 无损、不透明 vs 透明,你可能已经发现一个问题:这两个格式各有短板,JPG 不能透明,PNG 文件又偏大。
那有没有一个格式,能把两边的优点都占了?
还真有，那就是WebP。
WebP 是 Google 搞出来的格式,主要专门针对网页场景优化
| 能力 | JPG | PNG | WebP |
|---|---|---|---|
| 支持透明 | ❌ | ✅ | ✅ |
| 支持有损压缩(体积小) | ✅ | ❌ | ✅ |
| 支持无损压缩(画质好) | ❌ | ✅ | ✅ |
| 同画质下文件大小 | 中等 | 大 | 更小 |
简单说,WebP 相当于把 JPG 的"小"和 PNG 的"透明"这两个能力捏到了一起
而且压缩效率比它俩都高——同样的画质,WebP 通常能比 JPG 再小 25%-35% 左右,比 PNG 就更不用说了。
那为什么生活好像没怎么运用到它呢？
因为 WebP 是给网站用的,不是给你截图、发朋友那种日常场景设计的，而是主要给网页上用的
你在浏览网页的时候右键"另存图片",经常会发现存下来的格式就是 .webp
像咱们网站的图片用的就是 webp 格式，因为真的十分省空间
我印象很深刻，24年我刚开始做网站的那时候，还不知道 webp 这个格式，当时做的封面图啥的都是 png，然后经常一张图 1 m 左右，网站就加载特别特别慢
如何很多网友就评论说可以把图片格式换成 webp，会快很多，然后我去了解这个格式
一换成 webp 后，原本 1 m 的图片差不多变成了 100 kb 以内，是真的压缩了快十倍，当时真是给年幼的我来了一下冲击。
所以划重点：如果你是做网站、写公众号配图、要往网上传大量图片,WebP 一定是最优解，但如果只是日常截图、传照片给朋友,JPG/PNG 依旧够用,没必要特意折腾成 WebP。
HEIC：苹果专属格式
HEIC 格式，如果你用的是 iPhone,拍照默认存的就是这个格式，它是苹果主推的,压缩效率比 JPG 更高，同样画质下文件能小一半左右。
但它有个很现实的毛病:兼容性一般。你把 iPhone 拍的照片发到某些老旧的 Windows 电脑或者部分安卓设备上，是直接打不开。
解决办法很简单: iPhone 相机设置里有个选项叫"兼容性优先",打开以后拍照会自动存成 JPG,牺牲一点点效率,换来的是走到哪儿都能打开。
SVG：为什么 Logo 放大不会糊
前面说的 JPG、PNG、WebP、AVIF、HEIC,其实都属于同一个大类——位图(栅格图),说白了就是靠一个个像素点拼出来的图片。放大到一定程度,你就会看到那些方块状的锯齿,这是位图的天生局限。
SVG 不是这个逻辑。它是矢量图,存的不是"每个像素长什么样",而是一套数学公式和路径描述。
你随便找一个 SVG 文件,用记事本打开,看到的不是乱码,而是类似这样的东西:
但是如果你专门的 ui 软件、或者白板、甚至浏览器都可以直接识别出来具体的样式
这就是为什么有些 Logo、图标,不管放大到多大,边缘永远清晰锐利,不会糊。因为它根本不是在"放大像素",而是在"重新计算这条线该画在哪"。
也正因为存的是一段代码,而不是像素,SVG 才会有几个特别的用法:
图标库很多都是 SVG。 你去一些设计网站或图标库找图标,下载下来经常就是一段 SVG 代码,直接复制粘贴到网页里就能用,不用像图片一样上传文件。
数据图表也常用 SVG。 你在网上看到的那些可以交互、可以缩放还不糊的折线图、柱状图,很多背后都是用 SVG 画出来的——因为图表本质上就是"点、线、面"的组合,天生适合用公式描述。
小总结
聊了这么多格式,其实日常生活里不需要记住这么多技术细节,对于绝大数人只需要知道这些格式的主要用途就可以了
| 格式 | 适用场景 | 注意事项 |
|---|---|---|
| JPG | 手机拍照、发朋友、聊天图 | 反复转发会越来越糊,不支持透明 |
| PNG | 截图、文字图、抠图、透明素材 | 文件比 JPG 大,但无损、不踩坑 |
| WebP | 做网站、公众号配图、网页大量图片 | 日常截图发朋友没必要特意转 |
| GIF | 表情包、循环小动图 | 动图太长、太复杂,文件会跟着变大 |
| SVG | Logo、图标、数据图表 | 放大不糊,但画不出写实照片那种细节 |
| HEIC | iPhone 默认拍照格式 | 老设备可能打不开,记得开"兼容性优先" |
学到了！