AVIF 图片压缩
新一代图片格式 · 比 JPG 小 50% · Chrome 85+ 支持
新一代图片格式优化
新一代图片格式 · 比 JPG 小 50% · Chrome 85+ 支持
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,客户可直接在浏览器预览,无需下载解压,沟通效率翻倍。
| 维度 | 本工具 | 竞品 A (Squoosh) | 传统方法 (Photoshop) |
|---|---|---|---|
| 数据隐私 | 纯浏览器处理,图片不上传服务器 | 纯浏览器处理,图片不上传服务器 | 本地处理,无网络传输 |
| 处理速度 | 1-3 秒 | 3-10 秒 | 5-30 秒(含手动调整参数) |
| 离线可用 | 首次加载后完全离线 | 首次加载后完全离线 | 完全离线 |
| 大小限制 | 受浏览器内存限制(约 200MB 以内) | 受浏览器内存限制(约 200MB 以内) | 受本地硬件限制,通常无上限 |
| 收费 | 免费,无广告 | 免费,无广告 | 付费软件(订阅或买断) |
| 注册 | 无需注册 | 无需注册 | 需要 Adobe 账户 |
| 平台 | 浏览器(跨平台) | 浏览器(跨平台) | Windows / macOS 桌面端 |
| 批量处理 | 单张处理 | 单张处理 | 支持动作脚本批量处理 |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| input.png | output.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,兼容性更广 |
quality=100(对照片类输入)quality=50-75(照片类输入)AVIF 对照片使用有损编码时压缩率远高于 PNG 无损;quality=100 会保留所有细节但文件体积接近原图,失去 AVIF 优势
输入:带透明通道的 PNG → 输出:不勾选“保留透明度”输入:带透明通道的 PNG → 输出:勾选“保留透明度”AVIF 支持 Alpha 通道,但默认压缩可能丢弃透明信息导致白底;需显式保留才能正确还原半透明效果
quality=90(对 16×16 纯色图标)quality=30-50(对纯色/低色彩复杂度图像)纯色区域 AVIF 用无损/近无损编码即可,过高 quality 不会提升视觉质量但徒增文件体积
输入:已用 WebP 压缩过的图片(quality=80)输入:原始 PNG/JPEG 或高码率 WebP(quality>90)二次压缩有损格式会叠加失真,AVIF 对已压缩图片的优化空间极小,甚至可能因重编码导致画质下降
输入:sRGB 图片 → 输出:未指定色彩空间输入:sRGB 图片 → 输出:指定为 sRGB 或“自动检测”AVIF 默认使用 BT.709/BT.2020 色彩空间,若原图为 sRGB 且未转换,显示时可能偏灰或饱和度异常
在旧版 Safari/Edge 中打开 AVIF 显示空白使用 Chrome 85+/Firefox 93+/Safari 16.4+ 测试,或通过 <picture> 标签提供 fallbackAVIF 兼容性取决于浏览器版本,直接打开失败不代表工具输出有误;生产环境需用 <picture> 提供 JPEG/WebP 回退
输入: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。
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 个高频疑问
「压缩 / 优化」下的其他工具