图片压缩

JPG/PNG/WebP 浏览器内压缩

434 次访问
IMAGE COMPRESS · JPG / PNG / WebP / AVIF · 批量 / 滑动对比 / ZIP / 隐私本地

在线图片压缩

支持四大现代格式 · 质量 / 目标体积双调节 · 批量并行 · 滑动对比 · 浏览器本地处理

添 加 图 片

+
拖入图片 · 点击选择 · 粘贴 Ctrl+V
JPG / PNG / WebP / GIF / BMP / AVIF / HEIC · 支持多选 · 单张 ≤ 50 MB
所有压缩在浏览器本地完成,图片不会上传服务器

最 近 压 缩

本地缓存元数据 · 不存图
尚无压缩记录 · 开始第一次压缩后将自动保存到此

使 用 说 明

四大压缩模式
· JPG:照片首选,浏览器原生质量控制(0-1)
· WebP:Chrome / Firefox / Safari 14+ 通用,体积小 25-50%
· AVIF:Chrome 85+ / Safari 16+,体积小 30-60%
· PNG:浏览器原生 Canvas 不支持调质量,输出始终无损(仅尺寸缩放生效)
按质量 vs 按目标体积
· 按质量:固定质量 0-100,一次编码完成(快)
· 按目标体积:通过二分搜索质量值,逼近指定 KB(最多 8 轮),精度 ±5%
· 当原图过小、无法达到目标时,会用最小允许质量兜底(避免出现 1KB 噪点图)
批量与并行
· 默认 4 路并行压缩,多 CPU 核心机器加速明显
· 进度条实时刷新,每张图独立成败
· 完成后体积大于原图的自动保留原文件(可关闭)
格式转换示例
· JPG → WebP:体积减半,质量持平
· PNG → WebP保留透明(WebP 支持 alpha),体积减半
· PNG → JPG:透明区域用背景色填充(默认白)
· HEIC → JPG:依浏览器解码(Safari 原生支持)
· 选保持原格式:JPG/PNG/WebP/AVIF 各自回流(不再误转 JPG)
Alpha 透明度规则
· 支持 alpha 的输出:PNG / WebP / AVIF → 透明保留,不填背景
· 不支持 alpha 的输出:JPG → 用「透明转纯色」颜色填底
· 预览区有棋盘格背景,能直接看到透明区是否保留
质量上限说明
· 质量 100%:WebP/AVIF 自动走 lossless 模式(无损保 alpha)
· JPG 100%:仍是有损(色度量化最弱,体积大但不"无损")
· PNG:永远无损,质量条无效 → 想压 PNG 体积只能缩放尺寸或转 WebP
隐私承诺:所有处理在浏览器 Canvas API 完成,原图不离开你的设备。打包、下载、对比预览全本地完成;关闭页面即清空所有数据。

关于本工具

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

浏览器内压缩 JPG、PNG、WebP 图片,自由调节质量与尺寸,实时预览压缩前后效果。运营编辑批量处理公众号配图、设计师压缩作品集、电商卖家优化商品图,无需安装软件。图片不上传到任何服务器,全程在本地完成,隐私安全。

使用场景

📱

公众号配图压缩

公众号运营者每次发文需上传多张高清图,原图常超 5MB,上传慢且占用后台空间。用本工具将 JPG/PNG 压缩至 200KB 以内,画质肉眼无差别,单篇文章配图上传时间从 30 秒降至 3 秒,同时减少服务器存储成本。

🏢

电商详情页优化

淘宝/拼多多商家拍摄商品图常为 10MB+ 的 RAW 转 JPG,直接上传导致买家加载慢、跳出率高。将主图压缩至 500KB 以内,详情页加载速度提升 60%,同时保持白底图清晰度,减少因图片过大被平台降权的风险。

🎓

学术论文插图提交

期刊投稿要求图片单张 ≤ 2MB,但实验截图或显微照片原始 TIFF 文件常达 20-50MB。用本工具转为高压缩比 WebP 格式,文件缩至 1.5MB 以内,满足期刊要求的同时保留 300DPI 的出版级分辨率,避免因图片不合格被退修。

💻

个人博客加速

独立博主上传游记照片时,单张 4K 原图 8-12MB,导致移动端加载延迟。批量拖拽压缩至 300KB 的 WebP,首屏加载时间从 8 秒降至 1.2 秒,Google PageSpeed 分数从 45 分提升至 92 分,且不损失细节纹理。

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

维度本工具TinyPNGPhotoshop 另存为
数据隐私纯浏览器处理,文件不上传服务器需上传文件至服务器压缩本地处理,依赖本地软件
处理速度1-3 秒内完成3-10 秒(含上传下载时间)30 秒以上(需手动操作)
离线可用支持(浏览器内运行)不支持(需联网)支持(需安装软件)
文件大小限制无明确限制(受浏览器内存影响)单文件最大 5MB(免费版)无限制(取决于本地硬件)
收费模式完全免费免费版有限额,付费版 $0.009/张需购买订阅(约 $22.99/月)
批量处理单张处理支持批量上传(最多 20 张)支持批量(需动作脚本)
平台依赖任何现代浏览器(Chrome/Firefox/Edge)任何现代浏览器仅 Windows/macOS

使用指南

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

使用步骤

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

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

输入输出说明
一张 5MB 的 JPG 照片(4000×3000 像素)压缩后文件大小:1.2MB,格式:JPG,压缩率:76%典型场景:普通照片压缩,体积大幅减小
一张 200KB 的 PNG 截图(1920×1080 像素)压缩后文件大小:180KB,格式:PNG,压缩率:10%典型场景:PNG 截图压缩,体积变化较小
一张 10MB 的 WebP 图片(8000×6000 像素)压缩后文件大小:3.5MB,格式:WebP,压缩率:65%边界 case:大尺寸高分辨率图片压缩
一张 50KB 的 JPG 图标(64×64 像素)压缩后文件大小:48KB,格式:JPG,压缩率:4%边界 case:小文件压缩,效果不明显
一张 0.5MB 的已压缩 JPG(质量 85%)压缩后文件大小:0.48MB,格式:JPG,压缩率:4%易错 case:二次压缩已优化图片,收益低
一张 2MB 的 PNG 透明 logo(800×600 像素)压缩后文件大小:1.1MB,格式:PNG,压缩率:45%典型场景:带透明通道的 PNG 压缩
一张 15MB 的 BMP 位图(3000×2000 像素)不支持该格式,请转换为 JPG/PNG/WebP边界 case:输入非支持格式,工具拒绝处理

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

1. 用 PNG 压缩有透明通道的图片

错误
上传一张带透明背景的 PNG 图标,选择「最大压缩」后输出为 JPG
修复
保留 PNG 格式压缩,或确认不需要透明通道后再转 JPG

JPG 不支持透明通道,强制转换会导致透明区域变成默认黑色或白色背景,破坏原图视觉

2. 反复压缩同一张 JPG 以为能持续缩小

错误
第一次压缩后得到 80KB 图片,再次上传该 80KB 图片压缩,期望降到 40KB
修复
只对原始无损/高质量源文件压缩一次,不要对已压缩的 JPG 再次压缩

JPG 是有损格式,每次重压缩都会叠加质量损失,文件大小下降有限,画质却明显劣化

3. 把 WebP 转成 JPG 后体积反而变大

错误
将一张 30KB 的 WebP 图片上传并选择「转为 JPG 高质量」,得到 60KB 文件
修复
保持原格式压缩,或仅在目标平台不支持 WebP 时才转 JPG,并选择中等质量

WebP 压缩效率通常比 JPG 高 25-35%,强行转 JPG 且设置高质量会导致体积反弹

4. 上传超大图片(5000×5000px)后浏览器卡死

错误
直接拖入一张 8000×6000px 的 RAW 转 JPG(约 25MB)到浏览器
修复
先用系统自带工具或批量软件缩小分辨率(如 1920px 宽),再上传压缩

浏览器内压缩依赖客户端内存,超大尺寸图片会导致页面无响应或崩溃,且压缩后体积仍可能过大

5. 以为「无损压缩」能无限缩小文件

错误
上传一张 500KB 的 PNG 截图,勾选「无损」后期望压到 50KB
修复
理解无损压缩通常只能减少 10-30%(如 500KB→400KB),大幅缩小需用有损模式

无损压缩只去除冗余元数据或优化编码,不丢弃像素信息;文件大小受图像复杂度限制

6. 把压缩后的图片直接用于印刷

错误
将网页用的 72dpi、80% 压缩率的 JPG 发给印刷厂做 A4 宣传册
修复
印刷需 300dpi 以上且压缩率不低于 90%,或使用 TIFF/PNG 等无损格式

浏览器压缩默认面向屏幕显示,低 dpi 和高压缩率会导致印刷品出现锯齿和色块

7. 忽略 EXIF 信息被清除

错误
压缩后照片的拍摄时间、GPS 位置、相机型号全部丢失,无法用于归档
修复
压缩前确认是否需要保留 EXIF;需要则使用支持保留元数据的工具或单独备份

多数在线压缩工具为减小体积会剥离 EXIF 数据,对摄影爱好者和取证场景影响较大

工作原理

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

核心公式

CR = 1 - (S_compressed / S_original)

变量说明

  • CR — 压缩率,0~1 的小数
  • S_compressed — 压缩后文件大小(字节)
  • S_original — 原始文件大小(字节)

示例

一张 1920×1080 的 JPG 照片,原始大小 2.5 MB(2,621,440 字节)。经浏览器内压缩后,输出为 680 KB(696,320 字节)。CR = 1 - (696,320 / 2,621,440) = 1 - 0.2656 = 0.7344,即压缩率约 73.4%,文件减小了约 73%。

适用范围

适用于 JPG/PNG/WebP 格式的浏览器端有损压缩。压缩率受原始图片内容复杂度、编码器质量参数(0-100)影响,纯色区域可压缩 90%+,高噪点照片可能仅压缩 20-30%。

原理图

选择图片JPG / PNG / WebP浏览器内解码WASM 处理像素数据量化 / 色度抽样压缩后预览显示文件大小对比支持下载新文件质量 / 尺寸调节滑块实时调整参数重新编码按新参数生成输出实时更新预览无需重新上传所有处理在浏览器本地完成,图片不上传服务器
用户输入 本地处理 输出结果 调节反馈循环

开发者集成

3 种主流语言 · 复制即用

from PIL import Image
import io

# 打开图片
img = Image.open('input.jpg')

# 压缩为 JPEG,quality 范围 1-95,数值越低体积越小
buffer = io.BytesIO()
img.save(buffer, format='JPEG', quality=50, optimize=True)
compressed = buffer.getvalue()

print(f'原始大小: {img.fp.tell() if img.fp else "未知"} 字节')
print(f'压缩后大小: {len(compressed)} 字节')

# 保存到文件
with open('output.jpg', 'wb') as f:
    f.write(compressed)
package main

import (
	"image/jpeg"
	"os"
)

func main() {
	// 打开原始图片
	inFile, err := os.Open("input.jpg")
	if err != nil {
		panic(err)
	}
	defer inFile.Close()

	img, err := jpeg.Decode(inFile)
	if err != nil {
		panic(err)
	}

	// 创建输出文件
	outFile, err := os.Create("output.jpg")
	if err != nil {
		panic(err)
	}
	defer outFile.Close()

	// quality 参数 1-100,50 表示中等压缩
	err = jpeg.Encode(outFile, img, &jpeg.Options{Quality: 50})
	if err != nil {
		panic(err)
	}
}
// 浏览器端压缩(使用 Canvas API)
function compressImage(file, quality = 0.5) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        // 输出为 JPEG,quality 0-1
        canvas.toBlob((blob) => {
          resolve(blob);
        }, 'image/jpeg', quality);
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

// 使用示例
// const fileInput = document.querySelector('input[type="file"]');
// fileInput.addEventListener('change', async (e) => {
//   const compressed = await compressImage(e.target.files[0], 0.5);
//   console.log('压缩后大小:', compressed.size, '字节');
// });

常见问题

9 个高频疑问

图片压缩后质量变差了,怎么调高一点?
压缩必然有损,但可以控制程度。本工具默认用中等质量(约 80%),输出文件大小和画质取平衡。页面上的「质量」滑块(0-100)就是干这个的:值越高画质越好、文件越大。建议从 80 开始往下调,到画质可接受且体积达标为止。JPG 适合照片类,低于 60% 会有明显色块;PNG 压缩对纯色/图标影响较小,可压到 50% 仍可接受。
为什么我拖进去的 PNG 图片压缩后反而变大了?
PNG 是无损格式,本工具对有损压缩做了优化,但如果原图已经是高度压缩的 PNG(比如从截图工具直接保存的),再次压缩时,有损算法可能因为颜色抖动或元数据保留导致体积不降反升。解决办法:试试转成 JPG 或 WebP 格式再压缩;或者在设置里勾选「移除元数据」(EXIF、ICC 等),通常能再减 5-15% 体积。
压缩后图片的尺寸(宽高)会变吗?
默认不改变尺寸,只改变像素数据量(即降低每个像素的颜色精度)。如果希望缩小宽高,本工具不提供缩放功能——需要先在其他软件里缩放到目标尺寸,再拖进来压缩。注意:如果原图是 4000×3000 的大照片,即使质量降到 50%,文件可能仍有 1MB 以上,建议先缩小到 1920 宽再压缩。
这个工具能一次压缩多张图片吗?
可以。支持多选文件或批量拖拽,浏览器会自动排队处理。但受限于浏览器内存,建议一次不超过 20 张(单张 10MB 以内)。如果文件总数超过 50 张,分批操作更稳定——压缩完一批后点「全部下载」,再拖下一批。注意:批量下载时浏览器会弹出多个下载提示,需要依次确认,建议用 Chrome/Edge 最新版。
压缩后的图片在手机上打开颜色不对劲,怎么办?
颜色偏差通常是因为原图嵌入了 ICC 色彩配置文件(比如 sRGB 或 Adobe RGB),而本工具压缩时默认移除 ICC 以减小体积。手机浏览器/相册可能用默认色域显示,导致偏色。解决办法:在设置里取消勾选「移除 ICC 配置」,压缩后体积会稍大(约增加 10-30KB),但颜色能保持原样。如果原图就是 Adobe RGB,建议先转成 sRGB 再压缩。
压缩后的图片能直接用于微信公众号封面吗?
可以。微信公众号封面要求宽 900×500 像素、大小不超过 5MB。本工具压缩后通常能控制在 500KB 以内,完全满足。建议压缩前先把图片裁剪到 900×500(或 2:1 比例),然后拖进来用 70-80% 质量压缩一次。注意:如果原图是长截图或宽幅图,先裁切再压缩,否则压缩后宽高不变、体积可能还是偏大。
为什么我上传的 WebP 图片压缩后文件没变小?
WebP 本身已经是一种高效的压缩格式,本工具对 WebP 的再压缩空间有限。如果原图是用 WebP 的「无损」模式编码的(常见于 Google 转码工具),再次用有损压缩可能效果甚微,甚至因编码开销导致体积微增。建议:先确认原图是否是无损 WebP(右键属性看编码类型),如果是,转成 JPG 压缩后体积降幅会更明显。
工具说在浏览器内压缩,那会不会把我的原图上传到服务器?
不会。所有压缩处理都用浏览器的 Canvas API 和 WebAssembly 完成,图片数据从头到尾不离开本地设备。可以验证:打开浏览器开发者工具(F12)→ Network 标签,在点击「压缩」按钮后观察网络请求——没有任何图片文件外发。即使断网,工具也能正常工作。关闭页面后,所有临时数据从内存清除。
压缩后的图片能保留 EXIF 信息(拍摄时间、地点)吗?
默认不保留。EXIF 信息(包括 GPS 位置、相机型号、拍摄时间)在压缩过程中会被移除,因为浏览器 Canvas API 处理图片时会自动剥离元数据。如果必须保留 EXIF,建议改用桌面软件(如 Photoshop 的「存储为 Web 所用格式」并勾选保留元数据)。本工具的重点是减小体积,移除 EXIF 通常能再省 10-50KB。
选择 打开 +新窗口 esc关闭