WebP 图片压缩
libwebp 引擎 · 比 JPG 小 25-35% · 兼容性广
libwebp 多档压缩
libwebp 引擎 · 比 JPG 小 25-35% · 兼容性广
95-100:肉眼无法区分,体积大。专业摄影 / 印刷。
80-90:⭐推荐⭐ 平衡体积与质量,网页 / 社交分享。
60-75:缩略图 / 预览图 / 移动端图。
40-55:极致压缩,明显有损,适合占位。
浏览器 JPEG 编码:使用 Chrome / Firefox 内置 libjpeg。无法启用 mozjpeg 的 trellis quantization 等高级优化,建议追求极致可用桌面 cjpeg -q 80。
了解工具定位 · 使用场景 · 对比优势
调整压缩质量参数,在保持视觉质量的同时大幅减小 WebP 图片体积。适合网站优化、电商图片批量处理、前端开发等需要压缩图片以提升加载速度的场景。纯浏览器端处理,原始图片不上传服务器。
运营人员每天需要上传数百张商品图片到店铺后台,原图每张 2-3MB 导致加载缓慢、流量超标。使用本工具批量拖入图片,选择 60% 质量档,单张压缩至 200-400KB,肉眼几乎看不出画质损失,且保持透明通道完整。上传后店铺首屏加载时间从 8 秒降到 2 秒,跳出率明显下降。
前端开发者在设计移动端活动页时,背景图、轮播图、icon 图共 30 多张,原始 PNG 总大小 15MB,严重影响 4G 网络下的首屏渲染。用本工具将所有图片转为 WebP 并统一压缩至 80% 质量,总大小降到 3MB 以内,页面在低端安卓机上也能 2 秒内加载完毕。
跨境电商卖家搭建 Shopify 独立站,产品详情页包含 10 张高清大图,每张 5MB 以上,海外用户访问时加载缓慢且消耗服务器带宽。使用本工具将图片压缩至 70% 质量,单张降至 500KB 左右,同时保留原始尺寸和 Exif 信息。页面加载速度提升 4 倍,Google PageSpeed 分数从 55 提升到 92。
内容编辑每天需发布 20+ 篇新闻,每篇配 3-5 张图片,原始 JPEG 每张 1-2MB,直接上传导致 CDN 流量激增。用本工具将所有配图转为 WebP 并压缩至 85% 质量,单张降至 150-300KB,同时保持文字边缘清晰。一个月节省 CDN 流量费用约 40%,且读者端加载无感知。
平面设计师需要将 50 张作品原图(每张 10MB+ 的 PSD 导出 PNG)压缩后上传到 Behance 或站酷,平台对单张图片有 5MB 限制。使用本工具选择 75% 质量档,压缩后每张 1-2MB,保留渐变和阴影细节,顺利通过平台上传限制,且作品集整体加载速度大幅提升。
| 维度 | 本工具 | Squoosh (Google) | 传统方法 (Photoshop/命令行) |
|---|---|---|---|
| 隐私与数据上传 | 纯浏览器端处理,图片不上传任何服务器 | 纯浏览器端处理,不上传服务器 | 依赖本地软件或命令行工具,无网络传输问题 |
| 处理速度 | 即时处理,通常 0.5-2 秒内完成 | 即时处理,速度与本工具接近 | 取决于图片大小和硬件,通常 3-10 秒;批量处理需脚本 |
| 离线可用性 | 需联网加载页面,加载后断开网络仍可使用 | 需联网加载页面,加载后断开网络仍可使用 | 完全离线,安装后无需网络 |
| 功能复杂度与学习成本 | 专注单图压缩,界面极简,零学习成本 | 提供更多高级参数(如降噪、锐化),有一定学习门槛 | 功能最全,但需手动调整参数或编写命令行,学习成本高 |
| 批量处理能力 | 单张处理,需手动重复操作 | 单张处理,需手动重复操作 | 支持批量脚本或动作录制,适合大量图片处理 |
| 平台与安装 | 无需安装,任何现代浏览器即可使用 | 无需安装,任何现代浏览器即可使用 | 需安装 Photoshop(付费)或 libwebp 命令行工具(需配置环境) |
上手步骤 · 输入输出 · 避坑提示
| 输入 | 输出 | 说明 |
|---|---|---|
| 一张 1920×1080 的 2.3MB PNG 截图 | 压缩后 320KB,质量 90%,肉眼无可见差异 | 典型场景:高分辨率截图,压缩比极高 |
| 一张 800×600 的 120KB JPEG 照片 | 压缩后 85KB,质量 80%,轻微细节损失 | 典型场景:已有损格式二次压缩,收益有限 |
| 一张 4000×3000 的 8.5MB 相机 RAW 转 TIFF | 压缩后 1.1MB,质量 75%,纹理细节保留较好 | 典型场景:大尺寸照片,平衡体积与画质 |
| 一张 1×1 像素的 42 字节纯白 PNG | 压缩后 38 字节,质量 100% | 边界 case:极小图片,压缩收益接近零 |
| 一张 10000×10000 的 25MB 工程图 | 压缩后 3.8MB,质量 85%,线条边缘锐利 | 边界 case:超大尺寸,浏览器内存占用高 |
| 一张带透明通道的 512×512 图标 PNG | 压缩后 28KB,质量 90%,透明度完整保留 | 边界 case:带 Alpha 通道,WebP 支持透明 |
| 一张 16×16 的 1.2KB 黑白 favicon | 压缩后 0.9KB,质量 80%,像素级无损 | 易错 case:极小图标,用户误以为能压到更小 |
| 一张 5MB 的 32 位深色渐变 PNG | 压缩后 1.6MB,质量 95%,渐变无条纹 | 易错 case:渐变图易产生色带,需高质量档 |
上传一张 quality=80 的 JPEG 图片,选择「无损」压缩模式对 JPEG 图片始终选择「有损」压缩模式,并适当调低 quality 值(如 75-85)libwebp 无损模式对 JPEG 输入不会进一步压缩,因为 JPEG 的 DCT 块结构已破坏了无损可压缩性;必须用有损模式才能利用 WebP 的预测编码减少文件体积
上传带透明背景的 PNG 图标,选择 quality=50 的有损压缩对带 alpha 通道的图片使用无损压缩,或选择「支持透明」的有损模式(WebP 有损+alpha 需要单独设置)WebP 有损压缩默认不保留 alpha 通道;即使保留,低 quality 会导致半透明边缘量化噪声,产生白边或锯齿
上传一张纯蓝色 100×100 的 PNG,选择 quality=60 有损压缩对纯色、渐变色或矢量风格图片使用无损压缩,文件体积通常比有损更小且无画质损失WebP 有损压缩基于块编码(类似 JPEG),在平坦区域会产生块效应和色带;无损模式对这类图片压缩率极高(甚至低于有损结果)
上传一张 4000×3000 的 RAW 转 JPEG 照片,使用默认 quality=80 压缩先降低分辨率(如缩放到 1920 宽),再使用 quality=75-85 压缩;或直接使用 quality=50-60 并接受轻微画质损失WebP 压缩效率与分辨率无关;高分辨率下即使 quality=80,文件体积仍可能很大。正确的流程是「先缩放,再压缩」
下载第一次压缩后的 WebP 文件,再次上传到工具选择 quality=70始终使用原始 PNG/JPEG 作为输入源,只压缩一次WebP 有损压缩是有损的;对已压缩的 WebP 再次压缩会累积两次量化误差,画质下降明显且文件体积未必更小
上传一张 5MB 的 JPEG 照片,选择无损压缩,期待输出 1MB对照片使用有损压缩(quality=75-85),通常可减小 25-35% 体积,画质肉眼不可察觉WebP 无损模式对照片的压缩率通常只有 5-15%,远不如有损模式;无损模式主要优势在图标、截图、UI 元素等
上传一张 16384×16384 像素的超大图,工具无响应先使用图片编辑工具将长宽缩放到 12000 像素以内,再上传压缩libwebp 编码器默认最大尺寸为 16383×16383 像素(2^14-1),超过此限制编码器会静默失败或崩溃
压缩后直接使用,发现照片颜色偏色或方向不对压缩前确认是否需要保留 EXIF 方向标签和 ICC 色彩配置文件;若需要,选择「保留元数据」选项(若工具支持)WebP 默认不保留 JPEG 的 EXIF 和 ICC 信息;丢失 ICC 配置会导致广色域照片在普通显示器上偏色,丢失方向标签会导致旋转信息丢失
公式推导 · 流程图解 · 依据出处
S = 1 - (Q_c / Q_o)
S — 压缩节省比例(0~1)Q_c — 压缩后文件大小(字节)Q_o — 原始文件大小(字节)原始图片 512 KB,压缩后 128 KB。则 Q_o = 524288,Q_c = 131072。S = 1 - (131072 / 524288) = 1 - 0.25 = 0.75。即节省 75% 空间,压缩比为 4:1。
适用于 libwebp 有损压缩(默认 quality=75)。无损模式(-lossless)下节省比例通常为 10%~30%,不适用于已压缩的 JPEG/PNG 二次压缩(增益极小)。
3 种主流语言 · 复制即用
from PIL import Image
import sys
# 使用 libwebp 的 Python 绑定(Pillow 内置)压缩 WebP
# 输入:任意格式图片 → 输出:多档质量 WebP
input_path = sys.argv[1] if len(sys.argv) > 1 else "input.png"
img = Image.open(input_path)
# 多档压缩:质量 80 / 60 / 40
for quality in [80, 60, 40]:
output_path = f"output_q{quality}.webp"
img.save(output_path, "WEBP", quality=quality)
print(f"Saved {output_path} (quality={quality})")
# 示例输出:
# Saved output_q80.webp (quality=80)
# Saved output_q60.webp (quality=60)
# Saved output_q40.webp (quality=40)package main
import (
"fmt"
"image"
_ "image/jpeg"
_ "image/png"
"os"
"golang.org/x/image/webp"
"golang.org/x/image/draw"
)
func main() {
// 读取源图片(JPEG/PNG)
f, _ := os.Open("input.jpg")
defer f.Close()
src, _, _ := image.Decode(f)
// 多档压缩:质量 90 / 70 / 50
for _, q := range []int{90, 70, 50} {
out, _ := os.Create(fmt.Sprintf("output_q%d.webp", q))
// 使用标准库的 webp 编码(Go 1.21+ 内置)
webp.Encode(out, src, &webp.Options{Quality: float32(q)})
out.Close()
fmt.Printf("Saved output_q%d.webp\n", q)
}
}const sharp = require('sharp');
const fs = require('fs');
// 使用 sharp(基于 libwebp)进行多档压缩
async function compressWebP(inputPath) {
const qualities = [80, 60, 40];
for (const quality of qualities) {
await sharp(inputPath)
.webp({ quality }) // 直接调用 libwebp
.toFile(`output_q${quality}.webp`);
console.log(`Saved output_q${quality}.webp`);
}
}
// 使用示例(需安装 sharp: npm install sharp)
compressWebP('input.jpg').catch(console.error);
// 输出:
// Saved output_q80.webp
// Saved output_q60.webp
// Saved output_q40.webp7 个高频疑问
「压缩 / 优化」下的其他工具