图片压缩完整指南：WebP 转换、质量参数调整与网页加载速度优化技巧

图片通常占网页总传输量的 50–70%，是影响加载速度最直接的因素。压缩图片不代表一定要牺牲画质——只要了解压缩原理、选对格式、调整正确的质量参数，多数情况下人眼几乎感受不到差异，但文件大小可以缩减 60–80%。

一、有损压缩 vs 无损压缩：原理与取舍

图片压缩分为两大类，选择哪一种取决于图片的用途：

类型	原理	代表格式	适用场景
有损压缩	舍弃人眼不易察觉的高频细节，压缩后无法完全还原	JPEG、WebP（有损模式）、AVIF	照片、写实风格插图、社交媒体
无损压缩	找出数据中的重复模式并编码，压缩后可完全还原	PNG、WebP（无损模式）、GIF	截图、Logo、图标、需要精确颜色的设计稿

常见误解：「PNG 一定比 JPEG 质量好」。质量和格式无关，和压缩类型有关。PNG 是无损格式，适合截图和图标；JPEG 是有损格式，适合照片。把照片存成 PNG 不会让它更清晰，只会让文件更大。

JPEG 和 WebP 有损模式都有一个 0–100 的质量参数。这个数字并非线性，而是对应不同程度的细节舍弃量：

一个实用的工作流程：从 80 开始，放大到 100% 检视是否出现明显色块或模糊边缘，若没有则继续降低，找到「刚好看不出压缩痕迹」的最低值。

在线图片工具：图片工具支持格式转换与压缩，可在浏览器本地处理，图片不会上传至服务器，适合处理含个人信息或机密内容的图片。

WebP 是 Google 在 2010 年推出的图片格式，目前主流浏览器（Chrome、Firefox、Safari 14+、Edge）均已支持。与传统格式相比：

如果你的用户不需要支持 IE（Internet Explorer 已于 2022 年终止支持），WebP 是照片和插图的最佳选择。需要支持透明背景但又想要更小的文件？WebP 无损模式是 PNG 的直接替代品。

首选 WebP 有损模式（质量 75–85），备选 JPEG（质量 80–85）。不要用 PNG——文件会大好几倍，且有损压缩的质量已足够。

首选 WebP 无损模式或 SVG（矢量图），备选 PNG。不要用 JPEG——锐利边缘和文字在 JPEG 有损压缩下会产生明显的模糊和色块。

首选 WebP（支持透明），备选 PNG。JPEG 不支持透明背景，存成 JPEG 后透明区域会变成白色或黑色。

WebP 动画比 GIF 小 64%（有损）至 19%（无损）。如果场景允许，优先考虑 CSS 动画或短视频（MP4），性能通常更好。

立即转换格式：使用图片工具可以将 JPEG、PNG 等格式一键转换为 WebP，并即时预览压缩后的效果与文件大小变化。

除了压缩，另一个常被忽略的优化是「分辨率适配」。在手机上显示一张 2400×1600 的图片是一种浪费——手机屏幕通常只显示 400px 宽，下载一张比显示尺寸大 6 倍的图片是多余的流量消耗。

HTML 的 srcset 属性可以让浏览器根据屏幕尺寸和分辨率自动选择最合适的图片：

PDF 文件过大，很多时候是因为里面的图片没有压缩。建议先将图片压缩到合适的质量（75–85），再嵌入 PDF，而不是嵌入原始大图后再依赖 PDF 工具压缩——后者的压缩效果通常不如预期。

PDF 大小处理：PDF 工具可以压缩 PDF 文件大小，适合需要缩减含图片的 PDF 文档的场合。