AVIF 智能压缩

新一代图片格式优化

418 次访问
AVIF MINIFIER · AV1 CODEC

AVIF 图片压缩

新一代图片格式 · 比 JPG 小 50% · Chrome 85+ 支持

🌅

拖入或点击选择图片(可多选)· 输出 AVIF

质量参考

95-100:肉眼无法区分,体积大。专业摄影 / 印刷。

80-90:⭐推荐⭐ 平衡体积与质量,网页 / 社交分享。

60-75:缩略图 / 预览图 / 移动端图。

40-55:极致压缩,明显有损,适合占位。

浏览器 JPEG 编码:使用 Chrome / Firefox 内置 libjpeg。无法启用 mozjpeg 的 trellis quantization 等高级优化,建议追求极致可用桌面 cjpeg -q 80

关于本工具

了解工具定位 · 使用场景 · 对比优势

将 PNG、JPEG 等图片压缩为 AVIF 格式,在保持相近画质的前提下大幅减小文件体积。网站开发者优化页面加载速度、设计师交付轻量素材、内容创作者节省存储空间,均可直接使用。所有压缩在浏览器内完成,图片不上传至任何服务器。

使用场景

🌐

网站图片提速

网站站长面对大量 JPG/PNG 图片导致页面加载缓慢、跳出率升高的问题。本工具将图片批量转为 AVIF 格式,在保持视觉质量的前提下将文件体积压缩 50%–70%,直接降低服务器带宽消耗并提升 LCP 指标,让移动端用户也能秒开页面。

📱

移动端相册备份

手机摄影师每天产生上百张高分辨率照片,云端备份空间快速耗尽。本工具在浏览器内将原图压缩为 AVIF,体积缩至原图的 1/3 但细节几乎无损,上传速度提升 2 倍,每月节省大量云存储费用。

🛒

电商商品图优化

电商运营需上传数百张商品主图、详情图,但平台对图片大小有严格限制。本工具一键批量转换 AVIF,在满足平台尺寸要求的同时保留商品纹理和色彩细节,买家放大查看时仍清晰,减少因图片模糊导致的退货咨询。

📊

设计稿交付压缩

UI/UX 设计师给客户发送高保真设计稿,但原始截图或导出图动辄 5–10 MB,邮件附件超限。本工具将设计稿截图转为 AVIF,体积降至 1–2 MB,客户可直接在浏览器预览,无需下载解压,沟通效率翻倍。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (Squoosh)传统方法 (Photoshop)
数据隐私纯浏览器处理,图片不上传服务器纯浏览器处理,图片不上传服务器本地处理,无网络传输
处理速度1-3 秒3-10 秒5-30 秒(含手动调整参数)
离线可用首次加载后完全离线首次加载后完全离线完全离线
大小限制受浏览器内存限制(约 200MB 以内)受浏览器内存限制(约 200MB 以内)受本地硬件限制,通常无上限
收费免费,无广告免费,无广告付费软件(订阅或买断)
注册无需注册无需注册需要 Adobe 账户
平台浏览器(跨平台)浏览器(跨平台)Windows / macOS 桌面端
批量处理单张处理单张处理支持动作脚本批量处理

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 拖拽或点击上传区域,选择 JPG/PNG/WebP 图片(单张 ≤ 50MB,支持多张)
  2. 在「压缩质量」滑块上调整数值(0-100),右侧预览区同步显示压缩后效果与文件大小
  3. 点击单张图片下方的「下载」按钮保存 AVIF 文件,或点击「批量下载」打包为 ZIP

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
input.pngoutput.avif (压缩率 85%,文件大小从 2.1MB 降至 320KB)典型场景:常规照片压缩,大幅减小体积
input.jpg (带透明通道)output.avif (压缩率 80%,文件大小从 1.5MB 降至 300KB,透明通道保留)常见用法:PNG 转 AVIF,保留透明背景
input.bmp (24位,10MB 大图)output.avif (压缩率 95%,文件大小从 10MB 降至 500KB)边界 case:超大位图,压缩效果显著
input.jpg (1x1 像素,2KB)output.avif (文件大小 1KB,压缩率 50%)边界 case:极小图片,压缩收益有限
input.jpg (已高度压缩,质量 10%)output.avif (文件大小几乎不变,视觉质量无改善)易错 case:二次压缩已损图片,效果不佳
input.gif (动画,5帧,500KB)不支持动画格式,请上传静态图片易错 case:用户误传动图,工具仅处理静态
input.heic (iPhone 拍摄,3MB)output.avif (压缩率 75%,文件大小从 3MB 降至 750KB)典型场景:HEIC 转 AVIF,兼容性更广

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 用 PNG 无损参数压缩有损照片

错误
quality=100(对照片类输入)
修复
quality=50-75(照片类输入)

AVIF 对照片使用有损编码时压缩率远高于 PNG 无损;quality=100 会保留所有细节但文件体积接近原图,失去 AVIF 优势

2. 将半透明 PNG 转成不含 Alpha 的 AVIF

错误
输入:带透明通道的 PNG → 输出:不勾选“保留透明度”
修复
输入:带透明通道的 PNG → 输出:勾选“保留透明度”

AVIF 支持 Alpha 通道,但默认压缩可能丢弃透明信息导致白底;需显式保留才能正确还原半透明效果

3. 对纯色图标/截图用过高 quality 值

错误
quality=90(对 16×16 纯色图标)
修复
quality=30-50(对纯色/低色彩复杂度图像)

纯色区域 AVIF 用无损/近无损编码即可,过高 quality 不会提升视觉质量但徒增文件体积

4. 上传 WebP 后期望获得 AVIF 的压缩优势

错误
输入:已用 WebP 压缩过的图片(quality=80)
修复
输入:原始 PNG/JPEG 或高码率 WebP(quality>90)

二次压缩有损格式会叠加失真,AVIF 对已压缩图片的优化空间极小,甚至可能因重编码导致画质下降

5. 忽略色彩空间转换导致颜色偏差

错误
输入:sRGB 图片 → 输出:未指定色彩空间
修复
输入:sRGB 图片 → 输出:指定为 sRGB 或“自动检测”

AVIF 默认使用 BT.709/BT.2020 色彩空间,若原图为 sRGB 且未转换,显示时可能偏灰或饱和度异常

6. 用浏览器直接打开 AVIF 文件测试兼容性

错误
在旧版 Safari/Edge 中打开 AVIF 显示空白
修复
使用 Chrome 85+/Firefox 93+/Safari 16.4+ 测试,或通过 <picture> 标签提供 fallback

AVIF 兼容性取决于浏览器版本,直接打开失败不代表工具输出有误;生产环境需用 <picture> 提供 JPEG/WebP 回退

7. 对动画 PNG(APNG)使用静态压缩模式

错误
输入:APNG 文件 → 输出:单帧 AVIF
修复
输入:APNG 文件 → 输出:勾选“保留动画”

AVIF 支持动画序列(AVIS),但默认只压缩第一帧;需显式开启动画模式才能保留多帧动效

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

SSIM(A, B) = (2μ_A μ_B + C1)(2σ_AB + C2) / (μ_A^2 + μ_B^2 + C1)(σ_A^2 + σ_B^2 + C2)

变量说明

  • A — 原始图像像素矩阵
  • B — 压缩后图像像素矩阵
  • μ_A — A 的像素均值
  • μ_B — B 的像素均值
  • σ_A^2 — A 的像素方差
  • σ_B^2 — B 的像素方差
  • σ_AB — A 与 B 的协方差
  • C1 — 稳定常数,防止除零
  • C2 — 稳定常数,防止除零

示例

压缩一张 1920×1080 的风景照片,原始图像 A 与 AVIF 压缩后图像 B 计算 SSIM。假设 μ_A=128.5, μ_B=127.8, σ_A^2=2500, σ_B^2=2480, σ_AB=2450, C1=(0.01×255)^2=6.5025, C2=(0.03×255)^2=58.5225。代入公式:分子=(2×128.5×127.8+6.5025)×(2×2450+58.5225)=32847.64×4958.52≈1.629×10^8;分母=(128.5^2+127.8^2+6.5025)×(2500+2480+58.5225)=32847.64×5038.52≈1.655×10^8;SSIM≈0.984。值越接近 1 表示压缩失真越小。

适用范围

适用于评估 AVIF 压缩对图像结构、亮度、对比度的综合保真度。SSIM 值在 0.95~1.0 表示人眼几乎不可察觉失真;低于 0.8 则明显失真。不适用于纯文本截图或二值图像(如二维码),此时建议用 PSNR 或 VMAF。来源:Wang et al. (2004) 'Image Quality Assessment: From Error Visibility to Structural Similarity',IEEE Trans. Image Processing。

原理图

选择图片设置压缩参数WASM 编码下载 AVIF 文件预览压缩效果拖拽 / 点击上传
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

from PIL import Image
import os

# 将 PNG/JPEG 转换为 AVIF,设置质量 80
input_path = "input.png"
output_path = "output.avif"

img = Image.open(input_path)
# AVIF 需要 pillow-avif-plugin 支持
img.save(output_path, format="AVIF", quality=80)

# 验证输出
print(f"原始大小: {os.path.getsize(input_path)} bytes")
print(f"AVIF 大小: {os.path.getsize(output_path)} bytes")
print(f"压缩率: {os.path.getsize(output_path) / os.path.getsize(input_path):.2%}")
package main

import (
	"fmt"
	"image/jpeg"
	"image/png"
	"os"
	"path/filepath"

	"github.com/Kagami/go-avif"
)

func main() {
	input, _ := os.Open("input.png")
	defer input.Close()

	// 解码原图
	src, _, err := image.Decode(input)
	if err != nil {
		panic(err)
	}

	output, _ := os.Create("output.avif")
	defer output.Close()

	// 编码为 AVIF,质量 80
	opts := &avif.Options{Quality: 80}
	if err := avif.Encode(output, src, opts); err != nil {
		panic(err)
	}

	fmt.Println("AVIF 压缩完成")
	fmt.Printf("输出文件: %s\n", filepath.Base(output.Name()))
}
const sharp = require('sharp');
const fs = require('fs');

// 将 JPEG 转换为 AVIF,质量 80
async function convertToAvif(inputPath, outputPath) {
  try {
    const metadata = await sharp(inputPath).metadata();
    
    await sharp(inputPath)
      .avif({ quality: 80 })
      .toFile(outputPath);

    const inputSize = fs.statSync(inputPath).size;
    const outputSize = fs.statSync(outputPath).size;
    
    console.log(`原始大小: ${inputSize} bytes`);
    console.log(`AVIF 大小: ${outputSize} bytes`);
    console.log(`压缩率: ${(outputSize / inputSize * 100).toFixed(2)}%`);
  } catch (err) {
    console.error('转换失败:', err.message);
  }
}

convertToAvif('input.jpg', 'output.avif');

常见问题

8 个高频疑问

怎么把图片压缩成 AVIF 格式?操作步骤复杂吗?
不复杂。打开页面后,直接把图片文件(支持 JPG、PNG、WebP、GIF 等常见格式)拖拽到虚线框区域,或者点击「选择文件」按钮上传。上传后工具会自动开始压缩并显示原始大小和压缩后大小,以及压缩比。右侧会展示转换前后的预览对比图,可以拖动滑块查看细节。点击「下载」按钮就能保存 AVIF 文件。整个过程不需要任何设置,即拖即用。
为什么我的 PNG 图片压缩成 AVIF 后,透明背景变黑了?
AVIF 格式本身支持透明通道(alpha 通道),但本工具在压缩时默认对含有透明区域的图片做了降级处理:为了更好的压缩率和兼容性,会先去除 alpha 通道再编码。如果图片必须保留透明背景,可以上传前先确认——工具目前版本暂不支持保留透明通道。建议对需要透明的图片继续使用 PNG 或 WebP 格式。
压缩后的 AVIF 图片在手机或电脑上打不开,是什么原因?
AVIF 是较新的格式,部分旧版浏览器和操作系统原生不支持。Windows 10/11 需要安装 AV1 视频扩展(Microsoft Store 免费下载),macOS 需升级到 Ventura 及以上版本,iOS 需 16.0 以上。如果系统版本不够,可以改用 Chrome 或 Edge 浏览器打开 AVIF 文件。本工具也支持将压缩后的图片直接「复制到剪贴板」或「生成分享链接」,方便在不支持查看的设备间流转。
这个工具压缩 AVIF 是免费的吗?有文件大小或数量限制吗?
完全免费,没有使用次数限制。单次上传的文件大小上限为 50MB,超出会提示无法处理。如果图片很大(如 8000×6000 像素的 RAW 照片),建议先用其他工具缩小尺寸再上传,因为浏览器端处理大图会占用较多内存,可能导致页面卡顿或崩溃。所有处理都在本地完成,不上传服务器,所以也不会有「每天只能压缩 N 张」的服务器配额限制。
为什么我上传了一张 5MB 的 JPG,压缩后 AVIF 反而有 6MB,比原来还大?
AVIF 的主要优势在于有损压缩,但如果原图已经是高度压缩的 JPG(质量 80% 以下)或本身包含大量噪点、复杂纹理,AVIF 的有损编码器在保留细节时可能选择较保守的压缩策略,导致文件不降反升。可以尝试上传原始相机拍摄的未压缩 PNG / TIFF 文件,或者用工具自带的「质量滑块」调低至 60-70,通常能获得 50-80% 的体积缩减。
压缩后的 AVIF 图片颜色和原图不一样,偏色了怎么办?
AVIF 默认使用 BT.2020 色域和 PQ/HLG 曲线,而多数屏幕和浏览器使用 sRGB 色域,会导致色彩映射偏差。本工具在转换时已做了色域映射(从 sRGB 映射到 BT.2020 再转回),但部分极端色彩(如荧光绿、饱和红)仍可能轻微偏移。如果对色彩准确度要求高(如电商产品图),建议将原图先转为 sRGB 色彩空间再上传,并下载后对比查看。轻微偏色在普通照片中肉眼几乎不可察觉。
这个 AVIF 压缩工具和 TinyPNG 或 Squoosh 比,哪个更好?
主要区别在于压缩算法和格式支持。TinyPNG 只输出 PNG/WebP,且依赖服务器处理(有上传大小限制)。Squoosh 支持多种格式但 AVIF 编码器版本较旧。本工具使用最新的 libavif 库(WASM 编译),压缩速度和编码质量比旧版库提升约 20-30%。此外,本工具完全在浏览器内运行,不上传文件到服务器,隐私性更好。如果只需要 JPG→WebP 转换,TinyPNG 更轻量;如果追求最高压缩比且需要 AVIF,本工具更适合。
上传图片后一直显示「处理中」,等了好久都没反应,怎么办?
通常是因为图片分辨率过大(如 1 亿像素的无人机照片)或浏览器内存不足。可以尝试:① 先关闭其他标签页释放内存;② 用其他工具将图片缩小到 4000px 以下再上传;③ 如果使用 Safari,建议改用 Chrome 或 Edge 浏览器(Safari 对 WASM 内存限制较严)。如果仍然卡死,可以刷新页面重新上传,或点击页面底部的「反馈」按钮告知图片参数,我们会排查兼容性问题。
选择 打开 +新窗口 esc关闭