图片格式互转:转成 PNG / JPEG / WebP 时到底发生了什么
把 PNG 转成 JPEG 看着是件小事,但每一次转换都在悄悄做几件事:透明通道怎么处理、元数据留不留、浏览器支不支持你选的格式。弄清这些,才不会交付一份"看着对、其实错"的文件。
转换到底做了哪几步
图片格式转换 的流程只有三步:
- 文件在浏览器里被读出来,显示成预览;
- 把像素画到一块内存里的画布上,尺寸与原图完全一致;
- 用你选的格式把画布重新编码,给出下载。
所以"转换"永远是一次完整的重新编码,由此带来两个直接结果:
- 尺寸不会变。 这个工具不做缩放。要减小像素尺寸,那是压缩工具里最大宽度的事。
- 元数据不保留。 输出只由像素构成,EXIF 里的拍摄设备、镜头、时间、GPS 位置、色彩描述、缩略图全部消失。放到网站上的图片这通常是好事(顺手去掉了定位信息),但如果你需要保留这些记录,格式转换工具就是错的工具。
导出的像素就来自屏幕上那张预览图,所以预览看到什么,下载就是什么——中间不会有旋转、裁切或翻转。
输出格式怎么选
下拉框里有 PNG、JPEG、WebP、BMP、GIF,但它们不等价:
- PNG 无损、支持 alpha(真正的半透明)。截图、界面图、logo、线稿、带文字的东西、以及后续还要编辑的图,都用它。照片存 PNG 体积很大。
- JPEG 有损、完全没有透明。适合对体积敏感的照片。每次重存都会掉一点质量,别把 JPEG 反复来回转。
- WebP 有损或无损都可、支持透明,同画质下通常比 JPEG 小不少。面向现代浏览器的网页就该优先用它。老软件可能打不开。
- BMP 是不压缩的老格式。从 BMP 转出很有用,转成 BMP 只会得到巨大文件,毫无收益。
- GIF 只有 256 色和单 bit 透明(硬边缘,没有柔和阴影),只在你确实需要一张极小的索引色图时才转。动图会丢动画——画布只有一帧,输出是静帧。
粗略法则:照片走 JPEG 或 WebP,带文字或带透明的图形走 PNG 或 WebP,其余都是兼容性问题。
BMP 和 GIF 这个坑
浏览器画布并不要求支持所有编码格式。当你要求的格式它编不了,浏览器会悄悄改用 PNG,下载下来的就是一张 PNG。
好在文件名是按浏览器实际产出的格式取的,所以后缀说的是真话,而页面上"输出格式"那一栏只显示你选的项。需要 BMP 或 GIF 时,请确认下载文件的后缀;某些浏览器与格式的组合,结果会是 PNG。
透明通道
透明能不能活下来,完全取决于目标格式:
- PNG → PNG、PNG → WebP:透明保留。
- PNG → JPEG:JPEG 没有 alpha 通道,透明区域会被填色。本工具不提供选择底色,不同浏览器默认也不同。别指望它。 需要特定背景就把图先合成到那个颜色上,或者交给 CSS。
- JPEG → PNG:JPEG 那块不透明矩形原样保留,转成 PNG 并不会"变出"透明。透明是在编辑器里把像素擦掉得到的,不是换格式换出来的。
常见误操作就是把 logo 从 JPEG 转 PNG "为了要透明"。文件变大了,照样不透明。
画质只会不变差,不会变好
转换不可能提升画质。一张已经有压缩噪点的 JPEG 转成 PNG,噪点会带着全尺寸保留下来——你付了 PNG 的体积,却拿不回丢掉的细节。有损转有损(JPEG → WebP)更是叠加损伤,所以中间产物要尽量高质量。
合理的顺序是:按最高质量修图 → 缩放 → 最后一步才做面向交付的编码。
转完检查这三件事
- 文件大小。 变大了,多半是把照片转成了 PNG,或者把已压缩的文件转成了 BMP。换格式或改用压缩。
- 边缘。 放大到 100% 看文字区和 logo 边缘。JPEG 处理平色边界很差,发虚就该改用 PNG 或 WebP。
- 透明。 把结果放到深色背景上打开。你以为会有透明却拿到一片白或黑,说明目标格式根本装不下 alpha。
批量怎么办
一张张转不适合几十上百个文件。图片批量处理 支持一次选多个 PNG、JPEG、WebP,可按像素或百分比缩放,还能选输出格式,最后打包成 ZIP——注意它输出 JPEG 时会把透明直接铺平到白色。
隐私
上面所有步骤都在你的浏览器标签页里完成:本地读取、本地画布、本地编码。图片不上传,所以无需账号、不排队,断网也能用。页面上唯一的外网请求是统计与广告脚本,跟你的图片无关。
相关指南
- 图片压缩怎么做才不变糊 — 质量、最大宽度,以及压缩为什么会变大
- 批量缩放与格式转换,先弄清这几点 — 一次处理多个文件
- 把多张截图拼成长图 — 合并文件而不是重编码