图片过大是页面加载慢的头号原因。解决办法几乎总是两步：先把图片调成正确的尺寸，再压缩剩下的数据。两步都做，一张 4 MB 的照片就能变成 150 KB，在屏幕上看起来一模一样。
我们用实际数字来说话。
应该瞄准的目标大小
你不用靠猜。下面是让页面保持快速的实用体积预算：
- 主视觉／通栏 banner： 小于 200 KB，最好 ~100–150 KB。
- 文章内配图： 每张 80–150 KB。
- 缩略图／头像： 10–30 KB。
- logo 或图标（PNG/SVG）： 小于 30 KB，常常远低于此。
再看尺寸：
- 通栏主视觉： 1600–2000 px 宽对大多数布局绰绰有余（只有在为 Retina 优化且承受得起字节时才翻倍）。
- 栏内配图： 与你的正文宽度匹配——常见是 800–1200 px。
- 缩略图： 它实际显示的尺寸，比如 300–400 px。
如果一个页面上任何一张图超过约 300 KB，通常都是值得修正的失误。
第一步：缩到真实显示宽度
这是大家最爱跳过的一步，却是最大的杠杆。手机直出的照片常常宽 4000+ 像素。如果它显示在 800 像素的栏目里，你就多传了 25 倍于屏幕所能显示的像素——而像素数量对文件大小的影响超过一切。
用图片尺寸调整工具把图片缩到它实际出现的宽度。按像素或百分比缩放，锁定宽高比，让高质量缩小算法保持边缘干净。
单是调对尺寸，往往就能在你压缩一个字节之前先砍掉 80–90% 的文件大小。
第二步：压缩剩下的数据
现在压缩这些正确尺寸内部的数据。
- 照片（JPG/WebP）： 把质量滑块设到 75–85。这对大多数图像是视觉无损的，同时把体积压得很狠。
- PNG（截图、图形）： 图片压缩工具会把它们缩到 256 色调色板，通常省 60–80% 而看不出变化，并保留透明。
压缩工具还会把输出限制在原始大小以内——绝不会返回更大的文件——而且它有个可选的宽度上限，所以你其实可以一遍搞定两步：把上限设成目标宽度，直接压缩。整个文件夹批量处理，打包成 ZIP 下载。
顺便选对格式
如果你的图片将提供给现代浏览器，把照片转成 WebP 通常能在相同质量下比 JPEG 再省 25–35%。纯色图形保持 PNG（或 WebP）。别把照片存成 PNG——那是经典的臃肿失误，轻轻松松就是 5–10 倍的代价。
一套实际的工作流
给一篇有五张照片的博客文章：
- 把每张缩到你的栏目宽度（比如 1200 px）。
- 用质量 80 压缩，或转成 WebP。
- 确认每张落在约 150 KB 以内。
- 挑一张放大到 100% 检查局部，确认画质稳住了。
原本总共 20 MB 的五张照片，会落到 600 KB 左右——页面从卡顿变成一眨眼就加载完。
隐私且可离线
上面每一步都用 Canvas 和 WebAssembly 完全在你的浏览器里运行。没有任何图片上传到服务器，首次访问之后工具就被缓存，可以离线使用。你完全可以在没有网络的情况下优化一整篇文章的图片，而且什么都不离开你的机器。