文章目录
1. JPEG/JPG
- 核心特点 ：有损压缩，丢弃人眼不敏感的色彩数据，压缩率高、体积小；支持百万级色彩，不支持透明通道；兼容性全平台通用。
- 优点：色彩还原好，适合色彩丰富的图像；体积远小于无损格式。
- 缺点：压缩会损失画质，放大后易出现马赛克；无透明效果。
- 前端适用场景 ：轮播图、商品详情图、文章配图、背景图等色彩丰富的摄影类图片。
2. PNG：细分 PNG-8 与 PNG-24
PNG 是无损压缩 格式，核心优势是支持透明通道，根据色彩深度分为 PNG-8 和 PNG-24 两个版本，适配不同需求：
（1）PNG-8
- 核心特点 ：基于索引色 ，仅支持 256 种颜色；无损压缩，体积更小；支持全透明（仅 0% 或 100% 透明度，无半透明效果）；兼容性极佳。
- 优点：体积比 PNG-24 小 30%-50%，适合色彩简单的图形。
- 缺点：色彩局限大，无法还原渐变、复杂色彩；不支持半透明。
- 前端适用场景：纯色图标、按钮、简单 Logo、低色彩的界面元素（如分割线、小装饰图）。
（2）PNG-24
- 核心特点 ：基于真彩色 ，支持约 1670 万种颜色；无损压缩，保留原图所有细节；支持 Alpha 通道（可实现 0%-100% 任意透明度的半透明效果）。
- 优点：画质无损，半透明效果可控，适合色彩丰富且需要透明的图形。
- 缺点：色彩丰富的图片体积会远大于 JPEG 和 PNG-8。
- 前端适用场景：需要半透明效果的复杂图标、渐变图形、界面弹窗背景、带透明边缘的配图。
3. GIF
- 核心特点 ：无损压缩 ，仅支持 256 色；支持简单动画 和全透明通道（无半透）；兼容性无门槛。
- 优点：体积小，支持动画，是前端早期动效的主流方案。
- 缺点：色彩局限大，画质粗糙；动画帧数和时长有限。
- 前端适用场景：加载动效（loading 图）、简单表情包、小图标动画（如按钮 hover 动效）。
4. BMP（位图格式）
- 核心特点 ：无损无压缩 （或可选低压缩），存储原始像素数据；支持真彩色，传统 BMP 不支持透明通道，部分扩展版本支持；文件体积极大（一张普通壁纸可达数 MB）。
- 优点：画质绝对无损，保留图像所有细节，适合高精度图像存储。
- 缺点：体积过大，加载速度慢；无压缩机制，完全不适合网页传输。
- 前端适用场景 ：几乎不在前端开发中直接使用，仅在特殊需求（如前端图像处理插件的临时缓存格式）下偶尔涉及；日常开发中优先替换为 PNG 或 WebP。
5. WebP
- 核心特点 ：谷歌推出的高效格式，支持有损/无损压缩 、透明通道 和动画；压缩率比 JPEG 高 25%-35%，比 PNG-24 小 40% 左右；现代浏览器（Chrome、Firefox、Edge 新版）均支持。
- 优点：兼顾画质和体积，是前端性能优化的首选图片格式。
- 缺点：老浏览器（如 IE）不支持，需做降级兼容。
- 前端适用场景 ：全场景性能优化 ，可替代 JPEG、PNG、GIF；比如首页大图、商品图、图标、简单动画，配合
picture标签做降级处理。
6. AVIF
- 核心特点：新一代高效格式，压缩率比 WebP 还高 20% 左右；支持 HDR 色彩和透明通道；兼容性略逊于 WebP（需现代浏览器支持）。
- 优点：体积极致小，画质更好，适合高清大图。
- 缺点：兼容性一般，编码解码成本稍高。
- 前端适用场景：对图片体积要求极高的场景，如 4K 海报、高清壁纸、长页面的大幅背景图。
7. SVG
- 核心特点 ：矢量图格式 ，基于 XML 代码描述图形；无限缩放不失真；可通过 CSS/JS 控制样式和动画；体积小，可被搜索引擎索引。
- 优点：缩放无锯齿，代码可控性强，适合响应式设计。
- 缺点：复杂图形（如照片）的代码量会很大，渲染性能下降。
- 前端适用场景：图标系统（如 iconfont）、插画、数据可视化图表（如 ECharts 导出）、动态图形（如加载动画、页面装饰元素）。
总结
- 性能优先：优先用 WebP/AVIF ，通过
picture标签搭配 JPEG/PNG 做降级兼容。 - 透明需求：简单纯色图标选 PNG-8 ，需要半透明选 PNG-24 ，矢量图标直接用 SVG。
- 动效需求：简单动效用 GIF/WebP 动画 ，复杂动效用 SVG + JS/CSS。
- 避免陷阱：前端开发中禁用 BMP，用 PNG 或 WebP 替代。