图片格式怎么选？JPG/PNG/WebP/GIF/SVG 区别一篇讲清

常见图片格式有哪些区别？

图片格式的区别集中在四点：有损还是无损、支不支持透明、能不能做动画、以及文件大小与设备兼容性。把常见的十种格式放在一起，差异一眼就清楚。

有损和无损是什么意思

有损是指为了减小体积，编码时丢掉人眼不易察觉的细节，JPG、WebP、AVIF、HEIC 都属此类，优点是体积小，代价是反复保存画质会逐次下降。无损则完整保留每个像素，PNG、TIFF、BMP 是典型，画质不损失但文件更大。一个常被忽略的点：把有损图转成无损格式，并不能让已经丢掉的细节回来。

透明和动画支持

需要透明背景，选 PNG、WebP、AVIF 或 SVG；JPG 和 BMP 不支持透明，转过去时透明区会被填成纯色。需要动图，常用 GIF，或体积更小、色彩更好的动态 WebP。SVG 是矢量格式，放大多少倍都不会变糊，但它不适合存照片。

JPG 和 PNG 怎么选？

一句话：拍的照片选 JPG，需要透明背景或锐利文字、线条的图选 PNG。这是日常碰到很频繁的一道选择题。

JPG 用有损压缩，特别擅长照片这种色彩连续过渡的画面，能在体积很小的情况下保持自然观感。PNG 是无损的，能完整保留锐利边缘并支持透明，所以截图、logo、带文字的图用它不会出现毛边。但反过来，用 PNG 存照片往往得不偿失——体积可能是同图 JPG 的好几倍，画质提升却看不出来。

• 选 JPG 的场景：手机照片、电商主图、发微信或网页的配图、需要小体积的图。
• 选 PNG 的场景：透明 logo、UI 图标、软件截图、带清晰文字的图、需要多次编辑的中间稿。

边界要记住：PNG 转 JPG 会丢掉透明通道，原本透明的区域会被填成白色或你指定的背景色。需要保留透明，就别转 JPG。

一个直观的体量感受：一张 4000×3000 的照片，存成 PNG 常有十几 MB，转成 JPG 后多在 2~4 MB，画面差别肉眼基本看不出。想两种都试试，用图片格式转换切一下目标格式即可；嫌转完还大，再用压缩图片压一道。

WebP、AVIF 这些新格式值得用吗？

做网页配图值得用。WebP 在相近画质下，体积通常比 JPG 小 25%~35%，AVIF 还能再小一截，页面加载更快、更省流量，这也是越来越多网站改用它们的原因。

顾虑主要在兼容性。WebP 已被较新版本的主流浏览器普遍支持，日常网页放心用；AVIF 起步更晚，部分老环境还认不全。要把图发给别人、上传到不确定是否支持的平台，或者给老旧软件用，稳妥做法是转回 JPG 或 PNG。

• 适合 WebP/AVIF：自己网站的配图、追求加载速度、图片量大需要省流量。
• 先转回 JPG/PNG：发给客户/同事、上传到不支持的系统、需要长期通用归档。

需要批量在这几种格式间切换，格式转换支持 JPG、PNG、WebP、AVIF 互转，转换在浏览器本地完成、图片不上传。

GIF、SVG、ICO 这些特殊格式什么时候用？

它们各管一类专门需求，用对了很省事，用错了会踩坑。

• GIF：适合简单动图和表情包，胜在到处都能播。但它只支持 256 种颜色，存照片或复杂渐变会明显掉色，这种情况用动态 WebP 更好。
• SVG：矢量格式，由数学路径描述图形，放大任意倍都清晰，文件还很小，适合图标、logo、插画。它不适合照片这类位图内容；另外，来源不明的 SVG 可能内嵌脚本，从陌生渠道拿到的 SVG 别直接传上网站。
• ICO：网站标签页那个小图标（favicon）用的容器格式。一个少有人知的点：现代 ICO 可以直接内嵌一张 PNG，所以用格式转换把 PNG 转成 ICO 就能做 favicon，超过 256px 会自动缩放并保留透明。完整的制作、尺寸和放置位置可看Favicon 怎么制作和设置。

需要把矢量图用到位图场景（比如发微信、放进文档），可以把 SVG 转成 PNG 或 JPG；想做网站图标，则把方形 PNG 转成 ICO。这些方向都在格式转换工具里。

手机和印刷场景：HEIC、TIFF、BMP 怎么处理？

这三种格式平时不主动选，但常会遇到，处理思路是「自己留着可以，发出去先转通用格式」。

HEIC 是 iPhone 从 iOS 11 起的默认照片格式，画质好、体积小，但苹果生态之外兼容性较差，电脑或微信常打不开。发给别人前用 HEIC 转 JPG 转一下即可，详细缘由见HEIC 转 JPG 指南。

TIFF 多见于扫描和印刷，可无损存档，但体积很大，不适合在网上传播；要传阅或发图，转成 JPG 更轻便。BMP 几乎不压缩，同一张图体积往往比 JPG 大几十倍，是早期 Windows 软件的产物，遇到时转成 JPG 或 PNG 能省下大量空间。

转换格式能让画质变好吗？常见误区

不能。转换格式只改变图片的存储方式，不会凭空增加细节——这是很常见的一个误解。把一张已经压糊的 JPG 转成 PNG，画质不会变清晰，只是用无损方式把那张糊图原样存了下来，文件还更大了。

顺着这个原理，有几条实用结论：有损转无损补不回细节，所以别指望转 PNG 救回糊图；反复用 JPG 编辑保存会一次次掉质，需要多次改的图先用 PNG 当中间稿，定稿再导出 JPG；放大也不会让位图变清晰，真正能无限放大的只有 SVG 这类矢量格式。

• 想要更清晰：从源头拿更高分辨率的原图，而不是转格式。
• 想要更小：照片转 JPG/WebP，再用压缩图片或调整尺寸。
• 想要能放大不糊：用 SVG 矢量图，位图做不到。

一句话记牢：格式决定「怎么存」，分辨率和原始质量决定「有多清晰」。两者是两回事。

按用途选格式：一张速查表

与其记每种格式的参数，不如按「这张图要拿去干什么」倒推。下面这张速查表覆盖了大多数日常场景。

键值对速记：
照片：JPG（要更小用 WebP）
透明图：PNG（矢量用 SVG）
动图：GIF / 动态 WebP
图标：SVG（favicon 用 ICO）
苹果照片：转 JPG

拿不准时有个稳妥的默认：照片用 JPG、带透明用 PNG，先满足能用，之后想优化再互转。选完直接去图片格式转换切格式，整套都在浏览器本地完成、图片不上传；想系统了解各类工具怎么配合，可看在线图片工具完全指南。