SVG、PNG、JPEG（JPG）、WebP 的区别
在写博客、做网页或设计时，选择合适的图片格式非常重要。
常见的几种格式是 SVG、PNG、JPEG (JPG) 和 WebP。
它们在原理、用途、体积和清晰度上都有明显不同。
一、位图与矢量图的区别
在理解这些格式前，先要明白两种图像类型：位图（Bitmap） 与 矢量图（Vector）。
| 对比项 | 位图（Bitmap） | 矢量图（Vector / SVG） |
|---|---|---|
| 构成原理 | 由像素点组成（每个像素记录颜色） | 由数学公式描述形状（路径、线条） |
| 放大效果 | 放大会失真、模糊 | 无限放大仍清晰 |
| 文件大小 | 取决于分辨率（像素越多文件越大） | 取决于图形复杂度 |
| 编辑方式 | 用 Photoshop、GIMP 等位图编辑器 | 用 Illustrator、Figma、Inkscape 等矢量工具 |
| 适合内容 | 照片、截图、自然图像 | 图标、Logo、插画、图表 |
🧩 一句话记住：
位图 = 像素拼出来的图
矢量图 = 公式画出来的图
二、基本概念
- SVG：矢量图，用代码（XML）描述形状。放大不会失真，适合图标、Logo、图表。
- PNG：无损位图，支持透明背景，适合截图、UI 元素、带文字的图片。
- JPEG (JPG)：有损位图，压缩率高，适合照片、风景等色彩复杂的图像。
- WebP：Google 推出的现代图片格式，支持透明与动画，体积更小，兼容性好。
三、核心对比表
| 特性 | SVG | PNG | JPEG | WebP |
|---|---|---|---|---|
| 图像类型 | 矢量 | 位图 | 位图 | 位图 |
| 是否可放大不失真 | ✅ | ❌ | ❌ | ❌ |
| 是否支持透明 | ✅ | ✅ | ❌ | ✅ |
| 压缩类型 | 文本描述 | 无损 | 有损 | 有损 / 无损皆可 |
| 适合内容 | 图标、Logo、图表 | UI、截图、带文字图片 | 照片、背景图 | 博客图片、封面、插画、网页图 |
| 文件体积 | 小（简单图） | 中 | 小（高压缩） | 更小（比 JPEG 小约 30%） |
| 动画支持 | ✅（CSS/JS 动画） | ✅（APNG） | ❌ | ✅（可替代 GIF） |
| 浏览器支持 | ✅ | ✅ | ✅ | ✅（现代浏览器全支持） |
四、快速选择指南
SVG：图标 / Logo / 简单插画
✅ 无限缩放、体积小、可用 CSS 控制颜色PNG：界面元素 / 截图 / 需要透明背景的图
✅ 清晰无损
⚠️ 文件体积较大JPEG：照片 / 背景图 / 博客配图
✅ 文件小、加载快
⚠️ 有损压缩，不适合文字或锐利边缘WebP：博客图片 / 封面图 / 插画 / 动图
✅ 体积更小，支持透明与动画
⚠️ 旧浏览器（极少数）可能不支持
五、总结
SVG 用于图形，PNG 用于透明无损，JPEG 用于照片，WebP 兼顾全部。
- SVG：可无限放大，适合图标、Logo、图表。
- PNG：无损、支持透明，适合截图、UI 元素。
- JPEG：有损、体积小，适合照片和背景图。
- WebP：新一代格式，兼具透明 + 小体积 + 动画，网页首选。
📘 补充说明：WebP 是什么？
WebP 是 Google 推出的一种现代图片格式，目标是同时替代 JPEG、PNG、GIF。
它能在保持清晰度的同时显著减少体积，支持透明和动画。
| 特性 | WebP 表现 |
|---|---|
| 压缩方式 | 有损 / 无损皆可 |
| 透明通道 | ✅ 支持 |
| 动画 | ✅ 支持 |
| 兼容性 | ✅ Chrome / Firefox / Safari / Edge 全支持 |
| 文件大小 | 通常比 JPEG 小 25%～35% |
✅ 现代网站、博客封面、图片展示首选格式。
⚠️ 若要兼容旧浏览器，可用<picture>标签提供多格式：
html
<picture>
<source srcset="/img/photo.webp" type="image/webp">
<img src="/img/photo.jpg" alt="示例图片">
</picture>