操作步骤
- 添加原始截图,将最大宽度和目标大小先设为 0。
- 比较 PNG 与 WebP 输出,检查小字、细线和高对比边缘。
- 在 100% 缩放下查看下载结果,再查看实际展示尺寸。
- 只有确实不需要原始分辨率时,才尝试缩小宽度。
截图的四种结果
原始首页截图为 1440 × 1200、450,313 字节。同尺寸 WebP 为 82,578 字节,而重新编码的 PNG 增至 927,696 字节。截图适合哪种格式仍需看文字细节。
| 版本 | 尺寸 | 字节数 |
|---|---|---|
| 原始 PNG | 1440 × 1200 | 450,313 |
| 重新编码 PNG | 1440 × 1200 | 927,696 |
| WebP | 1440 × 1200 | 82,578 |
| 缩小的 WebP | 1000 × 833 | 49,558 |

缩小宽度会先损失像素
宽度降为 1000 后,输出为 1000 × 833、49,558 字节,像素总量约少 51.8%。更小的文件不代表小字同样清晰;此例同尺寸 WebP 已低于 100KB,不必为了这个上限再缩小。
在最终显示环境检查
查看浅色文字、图标、斜线、按钮标签和细边框。网页缩放和高密度屏幕会影响视觉效果。需要存档或后续编辑时保留原始截图,压缩副本用于分享。
常见问题
文字模糊时先改哪个参数?
先恢复原始尺寸,再提高有损格式质量或改用 PNG,逐项比较。
PNG 的质量滑块能降低体积吗?
当前 PNG 编码不使用这个质量参数;它主要影响 JPG 和 WebP。