Pressly：逆向 docsmall 的无广告图片压缩站 | THW's Blog - 个人技术博客，编程开发与技术分享

前言#

目前提供在线图片压缩的网站不少，但要么得登录，要么有免费限额，要么满屏牛皮癣广告，再加上图片上传慢、下载更慢，体验一言难尽。

docsmall是我目前发现的最好用的在线压缩网站——支持 JPG / PNG / WebP 多种格式，完全在浏览器端完成压缩，不用上传服务器。无论速度还是效果都非常优秀。缺点嘛……就是接入了谷歌广告，而且还会反检测广告屏蔽器，只要检测到自己的广告被屏蔽就会无限弹窗提醒，非常影响体验。

我之前试着用 Kimi k2.7 从头 vibe coding 一个图片压缩站点，结果做出来的东西不仅压缩缓慢，内存占用更是离谱——一张 8MB 的图片丢进去压缩居然要占用 4GB 内存。跟 AI 来回扯皮半天，始终没能解决。

图片压缩看似简单，实际上相关的开源项目和算法工具已经满天飞了，效果参差不齐，很难判断该用哪个。既然正面硬刚不行，那就换个思路——我又想起了 docsmall：它效果出众，又完全在浏览器端完成压缩，所有逻辑都暴露在前端代码里，简直是一个天然的逆向对象。于是决定直接逆向它的实现，摸清底层调用方式，再让 AI 照着规格复刻。

抓包确认架构#

打开网站，F12 → Network，上传一张图片并点击压缩，观察请求列表——没有图片上传请求，唯一的网络请求只是按图片格式加载对应的 WASM JS 文件。纯前端压缩，实锤了。

拆解三个编码器#

在 Network 面板中筛选 .js 请求，很快锁定了三个核心编码器：

格式	WASM 文件	体积	来源
JPEG	`cdn.docsmall.com/wasm/cjpeg.min.js`	~1MB	Emscripten 编译的 mozjpeg
PNG	`cdn.docsmall.com/wasm/pngquant.min.js`	~800KB	pngquant 量化器
WebP	`docsmall.com/_nuxt/webp_enc_simd-DbPpnQ0e.js`	~500KB	libwebp，藏在 Nuxt 构建产物里

调用方式#

三个编码器的接口风格各不相同：

mozjpeg ：

1
const result = cjpeg(inputBytes, ["-quality", "75"]);
2
// result.data → Uint8Array

pngquant ：

1
const result = pngquant(inputBytes, { quality: "0-70" }, function(){});
2
// result.data → Uint8Array

libwebp ：

1
const encoder = await self.WebPEncWasm();
2
const result = encoder.encode(imageData.data, width, height, {
3
  quality: 75,
4
  method: 4,   // 编码速度/质量权衡 (0-6)
5
});

质量档位映射#

表面上只是从四档压缩级别里选了一个，但背后的参数映射远比想象中复杂：

级别	JPEG (quality)	PNG (quality)	WebP
轻微	85	0-100	75（固定）
标准	75	0-70	75（固定）
强力	50	0-40	75（固定）
极致	20	0-20	75（固定）

值得注意的是：WebP 实际只有 75 一档质量，四档按钮对它形同虚设；PNG 的 quality 是范围格式（如 0-70），与 JPEG 的单值逻辑截然不同。三种格式后面是三套完全不同的参数体系。

SIMD 检测#

WebP 编码器还有一个细节：加载前会检测浏览器是否支持 WASM SIMD 指令集，根据结果选择加载 SIMD 加速版或普通版：

1
async function supportsSIMD() {
2
  try {
3
    return WebAssembly.validate(new Uint8Array([
4
      0,97,115,109,1,0,0,0,1,5,1,96,0,1,123,3,2,1,0,10,10,1,8,0,65,0,253,15,253,98,11
5
    ]));
6
  } catch { return false; }
7
}