PNG、JPEG 还是 WebP？一份图片格式优化实战指南

大多数人选择图片格式纯属意外。从 Figma 导出、在 Photoshop 里保存、或者直接截图——输出什么格式就用什么格式。然后丢进压缩工具，期待文件变小，却不明白为什么效果有时出人意料地差。

其实，格式选择比压缩参数更重要。JPEG 在质量 85 下压缩后，文件会比 PNG 在同样质量下小得多——不是压缩器更努力了，而是两者在底层编码图像数据的方式根本不同。在打开压缩工具之前先把格式选对，能省下比任何滑块调节更多的字节。

这篇教程先讲格式选择，再介绍具体的压缩、转换和调整尺寸工具与参数。所有工具都不需要注册账号。

在做任何事之前，先把格式选对

三种格式能覆盖几乎所有网页和日常使用场景：JPEG、PNG 和 WebP。说直接点：

JPEG 适合照片和具有连续色调渐变的图像——人像、风景、食物图。它的有损压缩专门利用了人眼对颜色和亮度感知的差异，所以 JPEG 照片在质量 80 下看起来和原图几乎没区别，文件却只有原来的一半左右。JPEG 处理平滑的色彩过渡效果很好，但碰到硬边缘（文字、Logo、图标）就会出现典型的块状失真。

PNG 适合截图、插画、Logo、图标，以及任何需要精确像素值或透明度的图像。PNG 是无损压缩——不会丢弃任何数据。这就是为什么同一张照片，PNG 版本永远比 JPEG 版本大。照片绝对不要用 PNG；有锐利边缘、透明背景或文字的图像，永远用 PNG。

WebP 适合所有场景，而且文件更小。WebP 处理照片时比 JPEG 小约 25–35%，处理图形时比 PNG 小约 26%，视觉质量相当。浏览器支持率现在已达 97%——2020 年 Safari 也加入了支持，它是最后一个补齐的。对于网页用途，在能用 WebP 的情况下，几乎没有理由继续用 JPEG 或 PNG。

实际决策树：面向网页输出，用 WebP。如果确实需要 PNG（透明背景、印刷级色彩精度），用 PNG。如果要发给别人后续编辑，照片用 JPEG，图形用 PNG。如果要发邮件或上传到不支持 WebP 的平台，照片退而求其次用 JPEG，其他用 PNG。

用 Squoosh 压缩：真正重要的那些参数

当你需要对单张图片进行精细压缩——主视觉图、产品图、作品集图——Squoosh 是最合适的工具。它由 Google Chrome 团队开发，完全基于 WebAssembly 运行，文件不会离开你的浏览器。

打开 Squoosh，拖入图片。界面分成左右两侧，左边是原图，右边是处理后的预览，中间有一条可拖动的分割线。在右侧面板选择输出格式，调整参数。

网页图片，从 WebP 质量 80 开始。这个设置覆盖绝大多数场景——与同质量的 JPEG 相比，文件尺寸会小得多，而视觉效果几乎没有差异。右下角会实时显示文件大小估算，拖动滑块就能看到变化。重点观察质量 75 到 85 之间：下调到 75 通常能省下相当多的字节，肉眼很难察觉；低于 70 之后，画质下降就会明显起来。质量 80 是大多数照片内容的甜蜜点。

包含文字、锐利线条或透明度的图像，把输出格式切换到 WebP（无损）。Squoosh 会提示文件比有损版本更大，但像素值得到完整保留。将结果与有损压缩对比，看看在你的实际展示尺寸下差异是否可见。

Squoosh 的”编辑”面板也支持调整尺寸。输入目标宽度（像素），或者点击百分比切换后输入 50% 来减半尺寸，然后开启长宽比锁定。照片调整尺寸用 Lanczos3 算法，它保留锐度的效果比双线性或盒型插值更好。图标或像素画放大时，用”最近邻”算法保留硬边缘，避免模糊。

Squoosh 有一个限制：不支持批量处理，每次只能处理一张图片。做特定图片的时候没问题，但要处理 40 张产品图就不够用了。

批量压缩，不用注册账号

当数量优先于单张精调时，TinyPNG 支持一次拖入最多 20 张图片，无需注册。把整个文件夹的图片拖到上传区域，它会并行处理。

TinyPNG 处理 PNG 文件的算法基于选择性颜色量化：将多达 1600 万种颜色减少到更小的调色板，再对结果做标准压缩。视觉差异通常肉眼不可察，PNG 文件普遍能缩小 60–80%，简单的大面积纯色图形甚至更多。

处理 JPEG 文件时，TinyPNG 会进行更激进的量化重新编码，并去除元数据（EXIF 数据、色彩配置文件、嵌入注释）。一张 3MB 的手机照片，处理后通常不超过 500KB。算法帮你做了画质决策，而且调校得相当准。

免费版每批 20 张，没有每日限额——每批都是独立的。处理完一批，再拖入下一批。200 张照片，就是 10 次拖放操作，虽然繁琐，但完全不需要账号或付费 API。

有一点需要说清楚：TinyPNG 会把文件上传到服务器，处理完后会删除，但如果你要压缩敏感图片（法律文件、医疗图像、私人材料），还是用 Squoosh 的本地处理更稳妥。产品图或博客配图，服务器处理是完全可以接受的权衡。

为特定平台调整尺寸

“调整到正确尺寸”听起来简单，但当你面对八个平台的八种推荐尺寸时就头大了。以下是常见场景的当前标准尺寸：

调整尺寸方面，压缩工具通常也支持此功能。Squoosh（在”编辑”面板中）和 ezGIF 都允许指定精确的像素尺寸。需要更多控制——比如按精确比例裁剪、在画布内重新定位内容——Photopea 是无需登录的最强选择。它在浏览器里加载了一个完整的类 Photoshop 编辑器，可以用画布大小、裁剪和图像大小等功能，操作方式和 Photoshop 一模一样，完全不需要账号。

转换 HEIC 和其他奇怪格式

iPhone 默认拍摄 HEIC 格式（有时写作 HEIF）。这是个很好的格式——比 JPEG 小，质量更好——但接受度还不够广泛。WordPress 会拒绝它，大多数浏览器无法显示，邮件客户端处理起来也参差不齐。

HEIC 转 JPEG，用 ezGIF 不需要注册。点开”Image Converter”标签，上传 HEIC 文件，选择 JPEG 作为输出，下载结果。转换本身没问题，不过 ezGIF 处理大批量时速度一般。

Convertio 支持相机 RAW 格式（CR2、NEF、ARW）、游戏纹理（DDS）以及 EXR 等 HDR 格式——这些是大多数图像工具默默跳过的类型。免费转换不需要账号，每天约 10 次，每个文件最大 100MB，足够偶尔使用。文件会上传到 Convertio 的服务器，处理敏感材料前请确认他们的隐私政策。

SVG 文件单独说一下：Figma 等设计工具导出的 SVG 里夹带了大量编辑器元数据、内联样式，数值精度高达小数点后 8 位。文件技术上没问题，但体积不必要地大。部署前，把它们丢进 SVGOMG——一个浏览器端 SVG 优化器。Figma 导出的文件通常能缩小 40–70%，全程在客户端处理。

常见场景的实战工作流

对大多数人来说，正确的工作流是这样的：

手机照片 → 上传网站：用 Squoosh 打开，输出格式设为 WebP，质量 80，调整宽度为 1200px。搞定。几乎任何照片都能压到 200KB 以内。

产品图（批量）：每次最多 20 张拖进 TinyPNG。下载，重复。不用转换格式，只是缩小体积。

截图 → 博客配图：Squoosh 或 TinyPNG 都行。深色界面的截图用无损 WebP 压缩效果尤其好。

iPhone HEIC → 可分享的 JPEG：ezGIF 图片转换器，输入 HEIC，输出 JPEG。

网站 Logo 或图标：有 SVG 的话，用 SVGOMG 优化。需要 PNG 的话，从设计工具导出后丢进 TinyPNG。

转换奇怪格式：Convertio，专门处理其他工具不支持的格式。

对大多数人来说，改善图片文件最立竿见影的一步是：网页输出从 JPEG 换成 WebP。第二步是在压缩之前先把图片调整到实际展示尺寸——没有必要传一张 3000px 宽的图，然后在页面上只显示 800px。这两步都是免费的，都是即时完成的，都不需要账号。

本文提到的工具都已通过 nologin.tools 目录的验证。HTTP Archive Web Almanac 的数据持续显示：图片是网页中体积最大的资源类型，而 WebP/AVIF 的采用率仍远低于浏览器本可支持的水平。技术上能做到的，和大多数网站实际做到的之间，依然存在巨大的鸿沟——而这个鸿沟只能一个文件一个文件地去填补。

如果你想了解这些工具在本文基础之外还能做什么，此前那篇图片压缩与转换工具指南对格式选择和工具权衡有更深入的探讨。