前言

以下是 GIF、APNG、WebP（动态） 三种常见动态图片格式的简明对比，适用于前端、设计、开发等场景快速选型：

特性	GIF	APNG	WebP（动态）
全称	Graphics Interchange Format	Animated Portable Network Graphics	Web Picture (Animated)
颜色支持	最多 256 色（8-bit）	真彩色（24-bit） + 8-bit Alpha 透明	真彩色（24-bit） + 8-bit Alpha 透明
透明度	1-bit（全透/不透）	✅ 支持半透明	✅ 支持半透明
压缩方式	LZW（无损，但效率低）	Deflate（无损）	VP8/VP9（支持有损/无损）
文件体积	❌ 最大（尤其复杂动画）	中等（比 GIF 小，比 WebP 大）	✅ 最小（通常比 GIF 小 30%~70%）
画质	❌ 色彩失真、锯齿明显	✅ 高保真、无损	✅ 可控（有损/无损），色彩丰富
浏览器兼容性	✅ 全平台 100% 支持	✅ 现代浏览器支持（Chrome、Firefox、Safari ≥16.4、Edge）	✅ 广泛支持（Chrome、Edge、Firefox、Android；Safari ≥14） ❌ IE 不支持
是否开放标准	是（老旧）	✅ 是（PNG 官方扩展，2025 年正式纳入标准）	否（Google 主导，但事实标准）
典型用途	表情包、简单动效、邮件动图	UI 微交互、高保真图标动画、需无损场景	网页 Banner、商品动图、性能敏感场景

快速选型建议：

要最大兼容性（如邮件、老旧系统） → 用 GIF
要无损画质 + 透明 + 开放标准 → 用 APNG
要最小体积 + 最佳性能 + 现代 Web → 用 WebP

实践中常采用 WebP 为主 + GIF 为 fallback 的优雅降级策略：

<picture>
    <source srcset="anim.webp" type="image/webp">
    <img src="anim.gif" alt="动画">
</picture>

总结一句话：

GIF 是“兼容之王”，APNG 是“画质之选”，WebP 是“性能之王”。

webpmux

在 Windows 环境下安装 webpmux（Google 官方 WebP 工具集的一部分），有以下几种可靠方式。截至 2026 年，最简单、推荐的方法是使用 预编译二进制包 或通过 包管理器 安装。

Google 官方为 Windows 提供了现成的 .exe 工具包，包含 cwebp.exe、dwebp.exe、webpmux.exe 等。

下载与安装

下载地址
https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html

下载连接

https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.6.0-windows-x64.zip

解压 ZIP 文件
解压后进入 bin/ 目录，你会看到：

bin/
├── cwebp.exe
├── dwebp.exe
├── gif2webp.exe
├── webpmux.exe    ← 这就是你需要的！
└── ...

将 bin/ 目录加入系统 PATH（可选但推荐）

按 Win + S 搜索 “环境变量” → “编辑系统环境变量”
点击“环境变量” → 在“系统变量”中找到 Path → 编辑 → 新建
添加你解压后的 bin 文件夹完整路径，例如：
D:\Tools\libwebp-1.6.0-windows-x64\bin
重启终端（CMD / PowerShell）

验证安装

1	webpmux -version

应输出类似：

1.6.0

完成！现在你可以在任何目录使用 webpmux 命令。

使用示例

假设你有 frame1.png, frame2.png，想合成动画 WebP：

:: 先转成单帧 WebP
cwebp frame1.png -o f1.webp
cwebp frame2.png -o f2.webp
cwebp frame3.png -o f3.webp
cwebp frame4.png -o f4.webp

:: 合成动画（每帧 200ms，无限循环）
webpmux -frame f1.webp +200+0+0+1 -frame f2.webp +200+0+0+1 -frame f3.webp +200+0+0+1 -frame f4.webp +200+0+0+1 -loop 0 -o anim1.webp

webpmux -frame f1.webp +100+0+0+0 -frame f2.webp +100+0+0+0 -frame f3.webp +100+0+0+0 -frame f4.webp +100+0+0+0 -loop 0 -o anim2.webp

参数说明

+200+0+0+1 表示：

200：显示时间（毫秒）

0,0：X/Y 偏移（通常为 0）

1：混合模式（0= 后一帧和前一帧叠加，1=后一帧完全替换前一帧），所以一般我们都用1。

Electron

复制文件

your-electron-app/
├── main.js                 ← 主进程
├── package.json
├── assets/                 ← 存放你的 .exe 工具（不会被打包进 asar）
│   └── win/
│       ├── webpmux.exe
│       └── cwebp.exe
├── src/                    ← 渲染器代码
└── ...

设置资源目录

新版本

在electron-builder.json5中添加

{
    "extraResources": [
        "assets/win/**"
    ],
}

旧版本

在 package.json 中添加：

{
  "build": {
    "extraResources": [
      "assets/win/**"
    ]
  }
}

路径获取

// main.js（主进程）
const { app, BrowserWindow } = require('electron');
const { spawn } = require('child_process');
const path = require('path');

function getExePath(exeName) {
  if (app.isPackaged) {
    // 打包后：exe 在 resources/assets/win 目录
    return path.join(process.resourcesPath, 'assets', 'win', exeName);
  } else {
    // 开发环境：从项目根目录找
    return path.join(app.getAppPath(), 'assets', 'win', exeName);
  }
}

// 调用示例
function runWebPMux(args) {
  const exePath = getExePath('webpmux.exe');
  console.log('Executing:', exePath, args);

  const child = spawn(exePath, args, {
    cwd: app.getPath('temp') // 或指定工作目录
  });

  child.stdout.on('data', (data) => console.log(data.toString()));
  child.stderr.on('data', (data) => console.error(data.toString()));
  child.on('close', (code) => console.log(`webpmux exited with code ${code}`));
}

调用EXE

const {spawn} = require('child_process');

async function runExe(exePath: String, args: String[], showlog: boolean = false) {
    return new Promise<boolean>((resolve, _) => {
        const child = spawn(exePath, args);

        child.stdout.on('data', (data: String) => {
            if (showlog) {
                console.log(`stdout: ${data}`);
            }
        });

        child.stderr.on('data', (data: String) => {
            if (showlog) {
                console.error(`stderr: ${data}`);
            }
        });

        child.on('close', (code: number) => {
            if (code == 0) {
                resolve(true)
            } else {
                resolve(false)
            }
        });
    })
}

export {runExe}

调用示例

let cwebp_exe = getExePath("cwebp.exe")

async function test() {
    let sourcePath = "C:\\Users\\DELL\\Pictures\\icon_book_dili.png"
    let outputPath = "C:\\Users\\DELL\\Pictures\\icon_book_dili.webp"
    let result = await runExe(cwebp_exe, [sourcePath, "-o", outputPath])
    console.log(result)
}

test()

WebP转换

import {runExe} from "./z_run_exe_utils.ts";
import path from "node:path";

const os = require('os');
const fs = require('fs');

// 单张图片转换成webp
async function imgToWebp(cwebpPath: String, sourcePath: String, outputPath: String) {
    return await runExe(cwebpPath, [sourcePath, "-o", outputPath])
}

// 批量转换图片为webp动画
async function imgArrToWebp(
    cwebpPath: String,
    webpmuxPath: String,
    sourcePathArr: String[],
    outputPath: String,
    delay: number = 200
) {
    let webpArr = []
    // 新生成的WebP文件
    let webpNewArr = []


    const tempDir = os.tmpdir();
    for (let i = 0; i < sourcePathArr.length; i++) {
        let sourcePath = sourcePathArr[i]
        if (sourcePath.endsWith(".webp")) {
            webpArr.push(sourcePath)
        } else {
            let outputPath = path.join(tempDir, `${Date.now()}_${i}.webp`)
            let result = await imgToWebp(cwebpPath, sourcePathArr[i], outputPath)
            if (result) {
                webpArr.push(outputPath)
                webpNewArr.push(outputPath)
            }
        }

    }

    let args = []
    for (let i = 0; i < webpArr.length; i++) {
        args.push("-frame")
        args.push(webpArr[i])
        args.push(`+${delay}+0+0+1`)
    }

    args.push("-loop")
    args.push("0")
    args.push("-o")
    args.push(outputPath)

    // console.info("webpmux args:", args)
    let result = await runExe(webpmuxPath, args)
    for (let i = 0; i < webpNewArr.length; i++) {
        fs.unlink(webpNewArr[i], (err: any) => {
            if (err) {
                console.error('删除失败:', err);
                return;
            }
        });
    }
    return result
}

export {imgToWebp, imgArrToWebp}

我是码客，我是全栈工程师，我为自己代言。

常见的动态图片(GIF、APNG、WEBP)及Electron使用webpmux合成动态WebP

前言