写博客时，一篇教程放上几张截图很常见。如果每张图都直接用原始尺寸上传，文章的图片传输量就会跟着增加。对于个人站长，我更倾向于在上传时把尺寸和画质处理好，之后写文章直接复制链接。
上一篇介绍了映屿 Img 开源图床，这篇用一张真实的博客截图，演示怎样转成 WebP，以及尺寸、画质和无损压缩该怎么选。
先看图片内容，再决定怎么压缩
博客里常见的配图，可以先分成两种：
- 文字截图、代码截图：优先保证小字清楚，先裁掉无关区域，再考虑缩小尺寸。必要时保留原尺寸，尝试无损 WebP。
- 照片、封面和背景图：可以先试画质 80，再根据实际效果调整，不必把手机拍摄的大图原封不动放进正文。
这里的画质 80 只是起点，不代表“保留 80% 画质”，也不是所有图片都适用。图片本来已经模糊，调高参数也不能补回细节。
截图转 WebP，按这三步操作
下面以自己搭建的映屿 Img 为例。还没有搭建的，可以先看上一篇介绍；使用其他图片工具，也可以按相同思路调整。
第一步：选尺寸和画质
先设置好参数，再加入图片：
- 输出质量：先试 80。
- 最长边：第一次可以填 0，保留原尺寸；确定图片太大时，再试 1280 等尺寸。
- 无损压缩：想按画质 80 做有损压缩，需要取消勾选。开启无损时，不要把画质滑块当成有损压缩开关。
图片尺寸要结合博客正文宽度来选。例如正文里显示宽度约 640 像素的横向图片，可以先试 1280 像素宽，为高像素密度屏幕留一些余量。竖图的“最长边”通常是高度，不能直接当作宽度使用。
第二步：上传并查看对比
拖入 JPEG、PNG 或静态 WebP，等处理完成后，先看文件大小，再打开“局部对比”检查文字、细线和图标。
重点看文章里真正需要读者看清的地方，比如命令、报错信息和设置项。发现小字变糊，就提高画质或保留更大的尺寸；文字内容很多，也可以重新截取重点区域，减少整屏截图。
每次调整尽量重新使用原图，不要把已经有损压缩过的结果反复上传压缩。
第三步：复制链接，插入文章
处理结果可以复制直链、Markdown 或 HTML。用 Typecho 的 Markdown 编辑器时，选择 Markdown 格式，粘贴进正文即可，例如：
方括号里的文字简单描述图片内容即可，方便图片无法显示时阅读，也不要堆砌关键词。
同一张截图，实际能缩小多少？
这次取本站文章页面的一张 JPEG 格式截图，尺寸为 1914 × 780。把同一个原文件分别上传处理，结果如下。文件大小沿用上传结果显示的 KB，已经做过四舍五入。
| 处理方式 | 图片尺寸 | 文件大小 | 与原文件相比 |
|---|---|---|---|
| 原始 JPEG 截图 | 1914 × 780 | 90.8 KB | — |
| 无损 WebP，不缩小尺寸 | 1914 × 780 | 194.7 KB | 反而变大 |
| 有损 WebP，画质 80，不缩小尺寸 | 1914 × 780 | 47.9 KB | 约减少 47% |
| 有损 WebP，画质 80，最长边 1280 | 1280 × 522 | 27.5 KB | 约减少 70% |
原尺寸、画质 80 的 WebP：
最长边缩小到 1280、画质 80 的 WebP：
两张图可以点击放大查看。原尺寸方案保留了更多像素，缩小方案更省体积，但细小文字的阅读余量也会减少。具体选哪张，要以文章实际展示尺寸下能否看清为准。
想对照未增加有损压缩的版本，也可以打开同尺寸无损 WebP。它保留的是这张 JPEG 解码后的图像，不能恢复 JPEG 之前已经丢失的细节。
为什么无损 WebP 反而更大？
因为原文件本身就是已经压缩过的 JPEG。换成无损 WebP，需要保留它解码后的像素，文件大小未必比原来的有损 JPEG 小。
所以不要只看扩展名，也不要认为勾选“无损”就一定最省空间。这次的结果只是这一张 JPEG 截图的表现，PNG 截图、照片和其他图片可能得到不同结果。
我给博客配图时，会先保留一份原图，试一次合适尺寸的 WebP，再检查小字和文件大小。如果转完更大，或者清晰度不够，就重新选参数。图片能看清、体积合适，比追求一个固定压缩比例更实用。