前端和运营经常要处理图片格式：上传前统一转 WebP 减小体积、把图标转 Base64 内联、把 PNG 转 JPG 去掉透明通道。这篇把常见格式的选型逻辑和转换场景讲清楚。
一、格式选型：什么场景用什么
二、Base64 是「编码」不是「格式」
Base64 把图片二进制编码成文本，好处是能直接嵌进 HTML/CSS/JSON，省一次 HTTP 请求；坏处是体积比原图大约 33%，只适合小图标、小图，不适合大图。前端常用来内联小图标、或把图片放进接口参数。
注意：Base64 体积膨胀约 1/3，所以「把大图转 Base64 内联」是不划算的，大图还是走文件或 CDN。
注意：Base64 体积膨胀约 1/3，所以「把大图转 Base64 内联」是不划算的，大图还是走文件或 CDN。
三、前端本地转换思路（Canvas）
浏览器里用 Canvas 就能做格式转换：
1.const img = await createImageBitmap(file);
2.const c = document.createElement('canvas');
3.c.width = img.width; c.height = img.height;
4.c.getContext('2d').drawImage(img, 0, 0);
5.// 转 WebP
6.const webp = await new Promise(r => c.toBlob(r, 'image/webp', 0.8));
7.// 转 Base64
8.const dataUrl = c.toDataURL('image/png');
toBlob/toDataURL 的 type 参数就是目标格式，quality 控制质量。JPG/PNG/WebP 都能这样转，HEIC 在部分浏览器可读、兼容性看环境（Safari 支持较好，Chrome 视系统解码能力而定）。
四、转换时的坑
- 转 JPG 丢透明通道，透明变白底；
- JPG 有损，反复转存累积损失；
- WebP 老环境不支持，落地前确认目标浏览器/软件；
- Base64 体积膨胀 1/3，别用在大图上；
- HEIC 兼容性因环境而异，跨平台建议统一先转 JPG。
五、批量转换的实践建议
批量统一转格式时（如一批 PNG 转 WebP），先拿一两张确认格式和效果，再全量转；转完抽查几张，确认透明、清晰度、体积都符合预期。
六、现成工具
日常批量转换、HEIC 转 JPG、图片转 Base64，不用自己写 Canvas，星点图片格式转换已经覆盖：JPG/PNG/WebP/HEIC/Base64 互转、批量处理、本地处理不上传。前端处理素材、运营整理图片都能省不少事。
总结：选型看「压缩/透明/兼容」三个维度，转换用 Canvas 本地做或交给现成工具，注意透明通道和重复压缩这两个坑即可。
星点图片格式转换：xingdian.net/app/image/convert