PNG、JPEG、WebP、AVIF 到底怎么选？格式选错，压缩参数调半天也没用

同一张图片，换一种格式，体积可能差几倍；同一个“质量 80”，放在 JPEG、WebP 和 AVIF 上，也不是同一个画质。

很多人压缩图片时反复调整质量参数，却忽略了更早的一步：格式选错了，后面的优化可能都在做无用功。

最近在开发 Pixel Slim 图片工具时，我把 PNG、JPEG、WebP 和 AVIF 的处理链路重新梳理了一遍。

我发现，“哪种格式最好”是一个错误问题。更准确的问题应该是：这张图片有什么内容、是否需要透明、在哪里使用、由谁负责编码？

这篇文章不列一张看完仍不会选的参数表，而是从真实场景出发，把四种常见格式一次讲明白。

一、不要相信后缀，先看图片真正需要什么

文件名叫 banner.png，不代表它就适合 PNG；一张照片即使保存成 .png，内容仍然是连续色调和大量纹理。

选择格式之前，先回答四个问题：

格式选择不是按后缀转换，而是按内容和交付环境做决策。

#mermaid-svg-4MLM9BZ2s2YLYJQl{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-4MLM9BZ2s2YLYJQl .error-icon{fill:#552222;}#mermaid-svg-4MLM9BZ2s2YLYJQl .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-4MLM9BZ2s2YLYJQl .marker{fill:#333333;stroke:#333333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .marker.cross{stroke:#333333;}#mermaid-svg-4MLM9BZ2s2YLYJQl svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-4MLM9BZ2s2YLYJQl p{margin:0;}#mermaid-svg-4MLM9BZ2s2YLYJQl .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .cluster-label text{fill:#333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .cluster-label span{color:#333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .cluster-label span p{background-color:transparent;}#mermaid-svg-4MLM9BZ2s2YLYJQl .label text,#mermaid-svg-4MLM9BZ2s2YLYJQl span{fill:#333;color:#333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .node rect,#mermaid-svg-4MLM9BZ2s2YLYJQl .node circle,#mermaid-svg-4MLM9BZ2s2YLYJQl .node ellipse,#mermaid-svg-4MLM9BZ2s2YLYJQl .node polygon,#mermaid-svg-4MLM9BZ2s2YLYJQl .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-4MLM9BZ2s2YLYJQl .rough-node .label text,#mermaid-svg-4MLM9BZ2s2YLYJQl .node .label text,#mermaid-svg-4MLM9BZ2s2YLYJQl .image-shape .label,#mermaid-svg-4MLM9BZ2s2YLYJQl .icon-shape .label{text-anchor:middle;}#mermaid-svg-4MLM9BZ2s2YLYJQl .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-4MLM9BZ2s2YLYJQl .rough-node .label,#mermaid-svg-4MLM9BZ2s2YLYJQl .node .label,#mermaid-svg-4MLM9BZ2s2YLYJQl .image-shape .label,#mermaid-svg-4MLM9BZ2s2YLYJQl .icon-shape .label{text-align:center;}#mermaid-svg-4MLM9BZ2s2YLYJQl .node.clickable{cursor:pointer;}#mermaid-svg-4MLM9BZ2s2YLYJQl .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .arrowheadPath{fill:#333333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-4MLM9BZ2s2YLYJQl .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-4MLM9BZ2s2YLYJQl .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-4MLM9BZ2s2YLYJQl .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-4MLM9BZ2s2YLYJQl .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-4MLM9BZ2s2YLYJQl .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-4MLM9BZ2s2YLYJQl .cluster text{fill:#333;}#mermaid-svg-4MLM9BZ2s2YLYJQl .cluster span{color:#333;}#mermaid-svg-4MLM9BZ2s2YLYJQl div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-4MLM9BZ2s2YLYJQl .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-4MLM9BZ2s2YLYJQl rect.text{fill:none;stroke-width:0;}#mermaid-svg-4MLM9BZ2s2YLYJQl .icon-shape,#mermaid-svg-4MLM9BZ2s2YLYJQl .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-4MLM9BZ2s2YLYJQl .icon-shape p,#mermaid-svg-4MLM9BZ2s2YLYJQl .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-4MLM9BZ2s2YLYJQl .icon-shape .label rect,#mermaid-svg-4MLM9BZ2s2YLYJQl .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-4MLM9BZ2s2YLYJQl .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-4MLM9BZ2s2YLYJQl .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-4MLM9BZ2s2YLYJQl :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

是

是

否

是

否

否

是

是

否

否

是

否

开始选择输出格式

需要透明背景吗

必须像素级无损吗

优先 PNG

是否重视通用兼容与本地导出

优先 WebP

评估 AVIF

主体是照片或复杂渐变吗

是否要兼容旧软件与旧工作流

优先 JPEG

比较 WebP 与 AVIF

包含文字、线条或大面积纯色吗

比较 PNG 与无损 WebP

这张图不是绝对规则，但能覆盖大部分网页图片、文章配图、截图和电商素材。

二、JPEG：它没有过时，只是经常被用错

JPEG 最适合连续色调内容，例如：

• 相机照片；
• 人像和风景；
• 没有透明背景的商品图；
• 需要被大量旧软件、办公工具和社交平台读取的图片。

JPEG 使用有损压缩。它会优先丢弃人眼不容易察觉的高频信息，因此在照片上通常能获得不错的体积。

但它有三个明显边界。

1. 不支持透明通道

透明像素输出为 JPEG 前必须与某个背景色合成。如果直接把透明 Canvas 导出为 JPEG，不同实现可能得到黑色或其他非预期背景。

正确做法是先铺底色：

function drawForJpeg(context, image, width, height) {
context.fillStyle = '#ffffff';
context.fillRect(0, 0, width, height);
context.drawImage(image, 0, 0, width, height);
}

背景不是“消失了”，而是被永久替换成了白色。

2. 不适合文字、细线和界面截图

JPEG 的块状压缩和色度抽样容易在文字边缘产生毛刺、光晕或脏色。质量开得很高可以缓解，却可能失去体积优势。

3. 反复保存会累积损失

JPEG 每重新编码一次，都可能再次丢失信息。编辑过程中应保留原始文件，只在最终交付时编码，而不是下载、修改、再上传、再压缩。

所以，JPEG 不是“老旧格式”，它仍然是兼容性要求高的照片场景中非常可靠的选择。

三、PNG：真正的优势不是“清晰”，而是无损和透明

很多人看到图片模糊，就下意识转成 PNG。结果画面没有明显改善，文件却大了几倍。

原因很简单：PNG 不会凭空恢复已经丢失的细节。把低质量 JPEG 转成 PNG，只是把现有的压缩痕迹无损保存下来。

PNG 更适合这些内容：

• 透明 Logo 和贴纸素材；
• UI 截图、代码截图；
• 图标、线条、二维码；
• 颜色数量较少的插画；
• 必须保留每个像素的中间编辑素材。

PNG 的强项是：

• 支持 Alpha 透明通道；
• 使用无损压缩；
• 对大面积纯色和重复图形非常友好；
• 多次保存不会产生新的有损压缩痕迹。

但如果内容是高分辨率照片，PNG 往往会非常大。因为照片中相邻像素变化复杂，留给无损压缩算法的重复规律更少。

还有一个容易忽略的优化方向：颜色较少的图片可以使用调色板 PNG。它不是简单降低“质量”，而是减少可用颜色数量，通常很适合图标、图表和界面素材。

四、WebP：目前最实用的网页通用解

WebP 同时支持：

• 有损压缩；
• 无损压缩；
• Alpha 透明通道；
• 动画。

这让它成为很实用的网页默认格式。照片可以使用有损 WebP，透明素材可以使用带 Alpha 的 WebP，简单图形也可以选择无损模式。

对浏览器图片工具来说，WebP 还有一个现实优势：现代浏览器不仅能解码它，通常也能通过 Canvas 完成本地编码。

因此在我的尺寸修改工具中，如果用户上传 AVIF 并选择“原格式”，本地导出会安全回退到 WebP：

const browserEncodableTypes = new Set([
'image/jpeg',
'image/png',
'image/webp'
]);

function resolveBrowserMime(sourceType, format) {
if (format !== 'source') {
return format === 'jpeg' ? 'image/jpeg' : `image/${format}`;
}

return browserEncodableTypes.has(sourceType)
? sourceType
: 'image/webp';
}

这里的回退不是因为浏览器打不开 AVIF，而是因为“能解码”和“能通过 Canvas 编码”是两种不同能力。

WebP 也不是没有代价：一些旧版桌面软件、传统印刷流程和特殊上传系统对它的支持不如 JPEG、PNG 稳定。如果图片要离开网页环境，仍然要确认接收方能力。

五、AVIF：体积很有吸引力，但编码成本不能忽略

AVIF 常常能在照片、渐变和复杂纹理中取得很好的压缩效率，并支持透明、广色域和高动态范围等现代能力。

它适合：

• 对页面传输体积非常敏感的照片；
• 有服务端或构建流程统一生成资源的站点；
• 可以为不兼容环境提供回退格式的场景；
• 值得花更多编码时间换取更小体积的核心图片。

但 AVIF 的“文件更小”并不等于“任何地方都应该用”。

1. 编码通常更慢

更复杂的压缩会消耗更多 CPU 时间。批量生成 AVIF 时，如果把编码强度和并发都开得很高，可能明显增加服务端延迟和内存压力。

2. 本地导出能力不统一

浏览器能显示 AVIF，不代表 canvas.toBlob() 一定能输出 image/avif。前端工具不能只检查图片能否打开，还要验证最终 Blob 的真实 MIME 类型。

3. 工作流兼容性仍需确认

网站展示、现代浏览器和新系统通常没有问题，但部分旧软件、内容审核系统或第三方接口仍可能不接受 AVIF。

我的选择是：服务端压缩支持 AVIF，浏览器本地尺寸修改则使用 WebP 作为安全回退。不是追求格式名单越长越好，而是让每条处理链路都有可靠结果。

六、“质量 80”为什么不能跨格式比较

JPEG 质量 80、WebP 质量 80、AVIF 质量 80，并不代表三张图片具有相同的视觉质量。

质量参数通常只是某个编码器内部的控制量：

• 不同格式的算法不同；
• 不同编码器对同一个数值的映射不同；
• 图片内容不同，压缩结果也会不同；
• 文字截图与风景照片对误差的敏感位置不同。

所以不能用“全部格式固定质量 80，然后谁小选谁”来实现真正的智能压缩。这样比较的可能不是编码效率，而是谁牺牲了更多画质。

更合理的流程是：先生成候选结果，再在统一的视觉阈值内选择体积更小的文件。

#mermaid-svg-KcsNFOWyr4W9KKX5{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-KcsNFOWyr4W9KKX5 .error-icon{fill:#552222;}#mermaid-svg-KcsNFOWyr4W9KKX5 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-KcsNFOWyr4W9KKX5 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .marker.cross{stroke:#333333;}#mermaid-svg-KcsNFOWyr4W9KKX5 svg{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-KcsNFOWyr4W9KKX5 p{margin:0;}#mermaid-svg-KcsNFOWyr4W9KKX5 .label{font-family:\”trebuchet ms\”,verdana,arial,sans-serif;color:#333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .cluster-label text{fill:#333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .cluster-label span{color:#333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .cluster-label span p{background-color:transparent;}#mermaid-svg-KcsNFOWyr4W9KKX5 .label text,#mermaid-svg-KcsNFOWyr4W9KKX5 span{fill:#333;color:#333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .node rect,#mermaid-svg-KcsNFOWyr4W9KKX5 .node circle,#mermaid-svg-KcsNFOWyr4W9KKX5 .node ellipse,#mermaid-svg-KcsNFOWyr4W9KKX5 .node polygon,#mermaid-svg-KcsNFOWyr4W9KKX5 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-KcsNFOWyr4W9KKX5 .rough-node .label text,#mermaid-svg-KcsNFOWyr4W9KKX5 .node .label text,#mermaid-svg-KcsNFOWyr4W9KKX5 .image-shape .label,#mermaid-svg-KcsNFOWyr4W9KKX5 .icon-shape .label{text-anchor:middle;}#mermaid-svg-KcsNFOWyr4W9KKX5 .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-KcsNFOWyr4W9KKX5 .rough-node .label,#mermaid-svg-KcsNFOWyr4W9KKX5 .node .label,#mermaid-svg-KcsNFOWyr4W9KKX5 .image-shape .label,#mermaid-svg-KcsNFOWyr4W9KKX5 .icon-shape .label{text-align:center;}#mermaid-svg-KcsNFOWyr4W9KKX5 .node.clickable{cursor:pointer;}#mermaid-svg-KcsNFOWyr4W9KKX5 .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .arrowheadPath{fill:#333333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-KcsNFOWyr4W9KKX5 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-KcsNFOWyr4W9KKX5 .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-KcsNFOWyr4W9KKX5 .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-KcsNFOWyr4W9KKX5 .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-KcsNFOWyr4W9KKX5 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-KcsNFOWyr4W9KKX5 .cluster text{fill:#333;}#mermaid-svg-KcsNFOWyr4W9KKX5 .cluster span{color:#333;}#mermaid-svg-KcsNFOWyr4W9KKX5 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:\”trebuchet ms\”,verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-KcsNFOWyr4W9KKX5 .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-KcsNFOWyr4W9KKX5 rect.text{fill:none;stroke-width:0;}#mermaid-svg-KcsNFOWyr4W9KKX5 .icon-shape,#mermaid-svg-KcsNFOWyr4W9KKX5 .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-KcsNFOWyr4W9KKX5 .icon-shape p,#mermaid-svg-KcsNFOWyr4W9KKX5 .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-KcsNFOWyr4W9KKX5 .icon-shape .label rect,#mermaid-svg-KcsNFOWyr4W9KKX5 .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-KcsNFOWyr4W9KKX5 .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-KcsNFOWyr4W9KKX5 .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-KcsNFOWyr4W9KKX5 :root{–mermaid-font-family:\”trebuchet ms\”,verdana,arial,sans-serif;}

原格式

智能模式

否

是

读取原图与透明通道

用户选择原格式还是智能模式

只生成同格式候选

生成 JPEG WebP AVIF 或 PNG 候选

统一尺寸采样

在深色与浅色背景上比较视觉误差

达到保真度阈值吗

淘汰候选

保留可接受候选

选择体积最小结果

返回真实格式与文件名

透明图片要分别在深色和浅色背景上比较，是因为只在白色背景上看不出的透明边缘错误，放到深色页面上可能非常明显。

候选选择逻辑可以简化为：

function chooseSmallestAcceptable(results, allowedError) {
const acceptable = results.filter((result) => (
result.visualError <= allowedError
));

if (!acceptable.length) {
return results.toSorted(
(left, right) => left.visualError – right.visualError
)[0];
}

return acceptable.toSorted(
(left, right) => left.bytes – right.bytes
)[0];
}

它表达了一个重要原则：先满足画质底线，再比较文件体积。

七、浏览器可能悄悄把你的格式改成 PNG

前端使用 Canvas 导出时，还有一个非常隐蔽的问题。

你请求：

canvas.toBlob(callback, 'image/avif', 0.8);

不代表浏览器一定返回 AVIF。遇到不支持的编码类型时，浏览器可能回退为 PNG。因此不能根据自己传入的字符串决定下载后缀，必须检查 Blob 的真实类型。

function encodeCanvas(canvas, mimeType, quality) {
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (!blob) {
reject(new Error('图片编码失败'));
return;
}

if (blob.type !== mimeType) {
reject(new Error(`浏览器不支持编码 ${mimeType}`));
return;
}

resolve(blob);
}, mimeType, quality);
});
}

下载文件名也应该来自最终 MIME 类型，而不是上传文件的后缀。

否则就可能出现内容其实是 PNG，文件名却叫 .avif 的情况。浏览器也许还能通过内容识别打开它，但其他软件和接口很容易报错。

八、实际场景应该怎么选

如果你不想记格式原理，可以记住下面这些场景。

文章照片、博客封面

优先考虑 WebP；需要兼容传统工作流时使用 JPEG；有完整服务端生成与回退方案时再评估 AVIF。

UI 截图、代码截图

优先 PNG 或无损 WebP。不要为了追求很小的体积，把文字边缘压出明显噪点。

透明 Logo、贴纸和商品抠图

需要像素级无损或广泛编辑兼容时使用 PNG；主要用于网页展示时可以比较 WebP；对体积要求极高且交付环境明确时再尝试 AVIF。

相机照片归档

不要把 JPEG 批量转成 PNG，这只会增大体积。需要长期保留时应保存相机原片或原始 JPEG，而不是反复转码后的版本。

社交平台和办公文档

优先 JPEG 或 PNG。它们未必最小，但通常最省沟通成本。

网站性能优化

不要只准备一种现代格式。可以使用现代格式作为主资源，同时保留兼容回退，并让构建流程根据内容生成不同候选。

九、为什么“保持原格式”仍然应该是默认选项

既然现代格式更小，为什么工具不默认把所有图片转成 WebP 或 AVIF？

因为格式转换会改变交付属性：

• 透明通道可能丢失；
• 外部系统可能不接受新格式；
• 动画、多帧或元数据可能变化；
• 用户可能只想压缩，不想改变工作流。

因此 Pixel Slim 默认逐张沿用上传格式，只有用户显式选择“智能选择”时，才跨格式生成并比较候选：

function resolveCandidateFormats(selected, source, hasAlpha) {
if (selected !== 'auto') {
return [selected === 'source' ? source : selected];
}

if (hasAlpha) return ['webp', 'avif', 'png'];
if (source === 'jpeg') return ['webp', 'avif', 'jpeg'];

return ['webp', 'avif', 'jpeg'];
}

默认行为应该可预测，智能行为应该由用户明确触发。这比不加说明地自动改变文件格式更稳妥。

十、最后给出一套不会错得太离谱的原则

• 照片优先比较 JPEG、WebP 和 AVIF；
• 透明和无损需求优先考虑 PNG；
• 网页通用输出优先考虑 WebP；
• AVIF 适合有编码预算和回退能力的场景；
• 代码截图、二维码和细线图形不要盲目使用有损压缩；
• 不要跨格式比较相同的质量数字；
• 不要根据扩展名判断真实格式；
• Canvas 导出后必须检查 Blob MIME；
• 默认保留原格式，跨格式优化交给明确的智能模式。

结语

PNG、JPEG、WebP 和 AVIF 不是四个从旧到新的版本，也不是简单的“谁体积小谁最好”。它们解决的是不同问题。

真正有效的图片优化，应该先识别内容和交付环境，再确定候选格式，最后在同一视觉标准下比较体积。

格式选择决定方向，质量参数只是在这个方向上继续调整。方向选错了，滑块调得再细也没有意义。

以上实践来自我开发 Pixel Slim 图片工具时对压缩和尺寸调整链路的整理。在线体验：https://image.997728.xyz