JPG、PNG、WebP、SVG图片格式区别与选择

格式选错，图片又大又模糊

同一张照片，用JPG可能200KB，用PNG可能超1MB，用WebP可能只要100KB。格式选错，不仅浪费带宽，还拖慢网页。我对比了JPG、PNG、WebP、SVG四种格式，帮你搞清楚什么场景该用什么。

JPG/JPEG：照片首选

JPG用得最多，有损压缩，适合照片和色彩丰富的图像。压缩率高体积小，兼容性极好，所有设备都支持。但多次编辑会累积质量损失，不支持透明度，不适合文字和图标。

PNG：需要透明度就选它

PNG无损压缩，支持透明度，网页设计里用得很多。不损失画质，适合文字、线条和图标。但体积通常比JPG大，不适合色彩丰富的照片，PNG-24文件可能非常大。

WebP：JPG和PNG的现代替代

WebP是Google推出的格式，同时支持有损/无损压缩和透明度。比JPG小25%-35%质量相当，比PNG小26%质量相当，还支持动画。但旧版浏览器不支持（IE完全不行），编辑工具支持不如JPG/PNG广泛，编码速度也较慢。

SVG：矢量图，无限缩放不失真

SVG跟上面三种位图格式本质不同——不是像素组成，而是数学公式描述图形。无限缩放不失真，体积通常很小，能用CSS和JavaScript操作，支持动画和交互，文本还能被搜索引擎索引。但不适合照片和复杂图像，复杂SVG可能有渲染性能问题。

四种格式对比

格式转换

实际工作中经常需要格式互转。图片格式转换工具支持JPG、PNG、WebP、BMP、ICO等格式互转，可以批量处理。

Apple设备拍的HEIC照片，用HEIC转换工具转成JPG或PNG就行。想试试AVIF格式，用AVIF转换工具。转换后体积还是大，再用图片压缩工具优化。

怎么选？跟着这个思路走

是照片还是图形？照片→JPG或WebP；图形→继续看。

需要透明度吗？需要→PNG或WebP；不需要→JPG或WebP。

需要无限缩放吗？需要→SVG；不需要→继续看。

需要兼容旧浏览器吗？需要→JPG或PNG；不需要→优先WebP。

是Logo或图标吗？是→SVG；否→根据上面的条件选。

照片用JPG/WebP，透明用PNG，矢量用SVG

用图片格式转换工具、HEIC转换工具、AVIF转换工具和图片压缩工具可以轻松转换格式和优化体积，所有操作在浏览器本地完成，图片不会上传到服务器。