巧用 ShareX + FFmpeg 实现本地化 WebP 截图,给博客服务器全面瘦身

巧用 ShareX 实现本地化 WebP 截图,给博客服务器全面瘦身

前言

最近在复查博客时,发现大量图片导致页面加载有些缓慢。为了提升访问速度,我决定将博客图片全面切换为 WebP 格式。

传统的做法是把原图传到服务器,由服务器或 CDN 进行 WebP 转换,但这会平白消耗服务器的 CPU 资源。折腾了一番后,我找到了一个更优雅的方案:利用 ShareX 自动调用本地内置的命令行工具,在截图瞬间直接完成 WebP 转换。这样既免去了服务器的开销,又能让我们在本地随心所欲地控制压缩参数,一举两得。

ShareX

为什么选择 WebP 格式?

WebP 是由 Google 推出的一种现代图像格式。根据官方数据:

  • 无损压缩:WebP 无损图片比 PNG 小约 26%。
  • 有损压缩:在同等 SSIM 质量指数下,WebP 有损图片比 JPEG 小 25% – 34%。
  • 透明度支持:WebP 完美支持 Alpha 通道(透明度)。有损模式下支持透明度时,其文件体积通常只有常规 PNG 的 1/3。

对于既要清晰度又要加载速度的个人博客来说,WebP 无疑是目前的最优解。

为什么是 ShareX?

在众多的工具中,我选择了开源、免费的截图神器 —— ShareX(目前在 GitHub 已收获近 40k Star)。选择它的理由非常纯粹:

  • 生态成熟:使用广泛,社区活跃,遇到问题很容易搜到教程。
  • 功能强大:自带优雅的截图、标注和自动化上传功能。
  • 动作(Actions)系统:支持强大的自定义动作,这是我们能实现自动化转换的核心所在。
  • 开箱即用:新版的 ShareX 已经默认自带了 ffmpeg.exe!我们完全不需要额外去下载、安装或配置复杂的系统环境变量,直接就能上手。

注:本文不再赘述 ShareX 的安装步骤(与普通软件无异),将直奔主题,分享几个实用的初始化设置以及核心的 WebP 适配方案。

ShareX 初始化与实用设置

打开 ShareX,其主界面非常直观。在正式配置 WebP 之前,我们可以先做一些体验优化:

  1. 个性化主题:在 应用程序设置 -> 主题 中,可以根据喜好修改主色调(比如充满科技感的暗黑模式)。
  2. 自定义快捷键:在 快捷键设置 中,为常用的截图方式配置顺手的组合键。
  3. 多区域截图(强烈推荐):在动作设置 -> 截图 -> 区域截图中,开启“使用多区域截图模式”。这样在截图时可以一次性框选多个不同的区域,用过都说好!

核心步骤:适配 WebP 自动化转换

要让 ShareX 在截图后自动调用 FFmpeg 转换为 WebP,我们需要配置一个“动作”。

1. 添加自定义动作

打开 任务设置 -> 动作,点击 添加,并按照以下参数进行配置:

  • 名称:输入一个你喜欢的名字(例如:输出 WebP)
  • 文件路径: 由于新版 ShareX 已经内置了 FFmpeg,你只需要直接指向它在 ShareX 目录下的位置即可:
    • 如果你使用的是默认安装路径,填入:C:\Program Files\ShareX\ffmpeg.exe
    • 如果更改了安装位置,请指向你 ShareX 安装根目录下的 ffmpeg.exe。
  • 参数(核心部分): 推荐使用以下参数(兼顾文字清晰度与极小体积):-i "$input" -vcodec libwebp -quality 70 "$output"
  • ⚠️ 技术避坑指南: 网上很多老教程会误导大家填写 "$input" -quality 50 -define WebP:lossless=true "$output"。 请注意,-define WebP:lossless=true 会强制启动完全无损压缩。一旦加上它,前面的 quality 50 就会失效,导致 FFmpeg 实际上一直在生成体积巨大的无损图片,违背了我们压缩体积的初衷。因此,博客截图建议直接使用上面的有损方案(quality 70 左右即可让文字边缘清晰且体积暴减)。
  • 输出文件扩展名:webp
  • 扩展名过滤:png
  • 隐藏窗口:必勾(否则每次截图都会弹出一个黑色的 CMD 窗口闪一下)。
  • 删除输入文件:建议勾选(转换成功后自动删除原始的 PNG 截图,只保留最终的 WebP 文件,保持文件夹整洁,不勾选此选项时,截图完毕转换后的webp图片会以同名文件储存在截图文件夹,后缀名为webp)。
 ShareX添加动作参数

2. 触发动作设置

配置好动作后,别忘了告诉 ShareX 在什么时候执行它。

回到 ShareX 主界面,在 “截图后的动作” 菜单中,确保勾选以下几项:

  1. 打开图像编辑器(可选):如果需要对截图进行标注(画红框、打马赛克),请勾选。
  2. 执行操作:必勾(这才会触发我们刚刚配置的 WebP 转换逻辑)。
  3. 将文件复制到剪贴板:必勾。
ShareX触发动作设置

终极大功告成!

现在你可以按下快捷键尝试截一张图了。

如果你开启了画图工具,标注完按下 Enter 键进入下一步。伴随着清脆的提示音,右下角会弹出转换成功的缩略图提示。此时,经过极致压缩的 WebP 图像文件已经静静地躺在你的剪贴板中了。

得益于 ShareX 内置 FFmpeg 的极客设计,我们不需要多装任何独立软件,就能享受秒开的图片加载体验,赶紧去试试吧!

上一篇 告别繁琐运维!Linux 必备全能一键脚本工具箱
下一篇 科技lion 又出神仙工具!KPanel 来了:不搞垄断、不乱改配置的轻量级 Web 面板

贱贱の爱

0篇 本周更新
0篇 本月更新
1个 用户数量

路过留痕

二等饼干: 二等饼干到此一游 小杰: 看看效果
路人甲: 我从山中来 旅行者: 年轻真好……
访客: 网站做得很棒! 小明: 天王盖地虎……
小红: 宝塔镇河妖 大神: 这个组件不错
萌新: 前排围观 老司机: 开车了开车了
留言