图片格式说明
了解各图片格式的特点与适用场景
平台支持 8 种主流图片格式。选择合适的格式可以在保证画质的同时大幅减少文件体积，提升加载速度。
格式速览对比
| 格式 | 压缩方式 | 透明 | 动画 | 适合场景 |
|---|---|---|---|---|
| PNG | 无损 | ✓ | — | Logo、图标、设计稿 |
| JPEG | 有损 | — | — | 照片、网页配图 |
| GIF | 无损 | ✓ | ✓ | 动图、表情包 |
| WebP | 有损 / 无损 | ✓ | ✓ | 网页图片（推荐） |
| SVG | 矢量（无损） | ✓ | — | Logo、图标、图形 |
| BMP | 未压缩 | — | — | Windows 本地图像 |
| TIFF | 无损（可选） | ✓ | — | 印刷输出、专业处理 |
| ICO | 无损 | ✓ | — | 网站 favicon |
PNG
便携式网络图形
无损压缩，支持透明背景
- 适用场景：Logo、图标、UI 设计稿、需要透明背景的图片
- 建议：对于简单的图形和文字类图片，PNG 是最佳选择
- 注意：照片类图片不建议使用 PNG，文件会非常大
JPEG
联合图像专家组
有损压缩，不支持透明，体积小
- 适用场景：照片、复杂图像、网页配图
- 建议：保存时选择 80-90% 质量可在体积和画质间取得良好平衡
- 注意：每次编辑后重新保存都会进一步损失画质
GIF
图形交换格式
支持动画和透明，颜色有限
- 适用场景：简单动画、表情包、小图标
- 建议：动画需求建议优先考虑 WebP，文件更小、色彩更丰富
- 注意：256 色限制会导致照片类图片颜色失真
WebP
现代图片格式
同时支持有损 / 无损压缩、透明和动画
- 适用场景：网页图片、需要优化加载速度的图片（强烈推荐）
- 建议：WebP 是目前网页图片的最优选择，兼容性已覆盖 95%+ 用户
- 注意：Internet Explorer 等老旧浏览器不支持，可通过
<picture>标签降级
SVG
可缩放矢量图形
矢量格式，用代码描述图形
- 适用场景：Logo、图标、插画、简单图形
- 建议：SVG 文件是纯文本格式，可直接在 HTML 中嵌入，无需额外请求
- 注意：SVG 不支持照片类复杂图像，文件会变得异常庞大
BMP
位图
未压缩的原始位图格式
- 适用场景：Windows 系统本地图像处理
- 建议：BMP 文件通常很大，上传前建议转换为 JPEG 或 PNG
- 注意：BMP 不支持透明通道
TIFF
标签图像文件
支持无损压缩和多图层
- 适用场景：专业图像处理、印刷输出、扫描存档
- 建议：用于网页展示时，建议先转换为 JPEG 或 WebP
- 注意：TIFF 文件通常较大，网页加载速度较慢
ICO
Windows 图标格式
用于网站 favicon 和程序图标
- 适用场景：网站 favicon、应用程序图标
- 建议：一个 ICO 文件可包含多种尺寸（16×16、32×32、48×48 等）
- 注意：仅用于图标用途，不适合存储普通图片
场景格式选择建议
| 使用场景 | 推荐格式 | 说明 |
|---|---|---|
| 网页配图 / 博客 | WebP > JPEG | WebP 体积更小，兼容性已足够 |
| Logo / 图标 | SVG / PNG | 矢量用 SVG，位图用 PNG |
| 照片 | JPEG / WebP | 兼顾画质与体积 |
| 动图 / 表情 | WebP > GIF | WebP 动画色彩更丰富、文件更小 |
| 设计稿 / UI 切图 | PNG | 无损、透明、边缘清晰 |
| 印刷输出 | TIFF | 画质最佳，支持 CMYK |
| 网站 favicon | ICO | 标准格式，多尺寸合一 |