跳到主要内容
酷算
工具类

图片格式转换器 · PNG JPG WebP AVIF 本地互转

本地处理 · 文件不上传

浏览器本地批量转换图片格式,支持 PNG/JPG/WebP/AVIF 互转、质量调节、透明转白底与等比缩放,文件不上传服务器,隐私安全。

工具介绍

支持 PNG、JPG、WebP、AVIF 四大主流格式之间的本地互转,可调节有损质量、透明区填白底、按最大宽度等比缩放。所有解码、缩放、编码都在浏览器 Canvas 中完成,文件不会离开设备,适合处理隐私照片、社交媒体素材与网页资源。单次最多 20 张、单文件 20MB 以内。

使用方法

  1. 点击「选择文件」并选择最多 20 张 PNG / JPG / WebP / AVIF 图片
  2. 在「目标格式」下拉中选择 PNG、JPG、WebP 或 AVIF
  3. 调节质量百分比(0-100,PNG 无损时该项不生效)
  4. 若目标是 JPG 且源图含透明通道,可勾选「透明转白底」并自选底色
  5. 如需缩放,在「最大宽度」填入目标像素(0 表示不缩放)
  6. 点击「开始转换」,等待进度走完,逐张点「下载」保存,或下批量 ZIP

计算公式

savingPercent = (originalSize - convertedSize) / originalSize × 100% ;  Canvas.toBlob(callback, mimeType, quality) 用于 PNG/JPG/WebP/AVIF 编码,quality ∈ [0, 1] ; AVIF 编/解码完全依赖浏览器原生支持（Chrome 90+ / Edge 90+ / Firefox 113+ / Safari 16.4+）,不引入任何 npm 依赖 ; 等比缩放公式 targetWidth = min(originalWidth, maxWidth) , targetHeight = originalHeight × targetWidth / originalWidth

常见场景

网页性能优化:PNG 截图转 WebP

把一组 800KB 的 PNG 教程截图批量转 WebP,质量 85,单张可压到 150-250KB,首屏 LCP 改善 30% 以上,且支持 alpha 通道无需填白底。

电商详情页:PNG 透明商品图转 JPG

把透明背景的商品图转 JPG,勾选「透明转白底」并选 #ffffff,单张体积下降 60-80%,详情页加载明显变快,且适配不支持透明的旧版浏览器。

AVIF 体验:同一图像直观对比

把 1MB 的 JPG 照片转 AVIF 质量 70,体积通常能压到 200-350KB(再省 30-50%)。注意旧 Safari/Firefox 解码 AVIF 仍有限制,适合用于 picture 标签的 source 回退方案。

常见问题

我的图片会上传到服务器吗?隐私如何保障?

不会。本工具完全在你的浏览器本地处理,文件通过 FileReader 读到内存,再用 Canvas 解码、编码,期间没有任何 fetch / XHR 上传请求,也没有引入任何外部 npm 包。关闭页面后所有数据会随浏览器内存释放。

为什么 PNG 转 WebP/AVIF 后文件能小 50% 以上?

PNG 是无损压缩,所有像素都被精确保留;WebP/AVIF 提供更高效的有损编码,通过感知模型剔除人眼不敏感的高频细节,所以照片类 PNG 通常能压到 PNG 的 30-50%,屏幕截图也能压到 50-70%。

JPG 转 PNG 后文件反而变大,什么场景该用哪种格式?

JPG 是有损 PNG 是无损,把已经丢过信息的 JPG 转成 PNG 不会找回画质却会把体积翻几倍。一般原则:照片用 JPG/WebP/AVIF;含文字/线条/透明的截图与图标用 PNG/WebP;需要极致压缩与现代浏览器支持时用 AVIF。

AVIF 格式是什么?哪些浏览器支持?兼容性如何?

AVIF 是基于 AV1 视频编码的下一代图片格式,通常比 WebP 再省 20-30% 体积。Chrome 85+、Edge 90+、Firefox 113+ 与 Safari 16.4+ 已原生支持解码;Chrome 90+ 与 Edge 90+ 原生支持 AVIF 编码。本工具完全依赖浏览器原生能力(零 npm 依赖),若 Canvas.toBlob 不支持 AVIF,UI 会标记为「当前浏览器暂不支持 AVIF 编码」。

PNG 有透明背景,转 JPG 后透明区域变成黑色怎么办?

JPG 不支持 alpha 通道,默认会把透明像素当作黑色渲染。本工具默认勾选「透明转白底」并预填 #ffffff,你也可以自定义任意 hex 颜色(如品牌色 #f5f5f5)。如果取消勾选,Canvas 会按默认行为绘制,因此 UI 会提示你确认。

质量 85 是怎么选的?设到 100 和 85 有什么区别?

85 是 JPEG/WebP 体积与画质平衡的甜区:90-100 区间几乎看不出画质提升,体积却可能多出 30-60%;70-85 之间肉眼难以分辨;低于 60 会出现块状色斑。摄影建议 85-92,普通配图 75-85,缩略图 60-70。

批量转换最多支持多少张?单张大小有限制吗?

单次最多 20 张、单文件不超过 20MB,这是为避免一次性吃光浏览器内存导致页面崩溃。处理过程串行,进度条实时显示当前完成度,超出数量或大小的文件会被自动标记跳过、不影响其余批次。

相关工具