Hugo项目批量将PNG/JPG转换为WebP的方法咨询

一、批量转换现有图片为WebP #

用cwebp工具（Google官方WebP转换工具）批量处理：

1. 安装cwebp
   • Ubuntu/Debian：sudo apt install webp
   • macOS：brew install webp
   • Windows：从WebP官方渠道下载二进制文件并配置到系统环境变量
2. 批量转换命令
   进入项目图片根目录（比如static/images），执行：

   find . -type f \( -name "*.png" -o -name "*.jpg" -o -name "*.jpeg" \) -exec cwebp -q 80 {} -o {}.webp \;
   

   说明：-q 80是质量参数（范围0-100），数值越高画质越好、文件体积越大，可按需调整。

二、修改Hugo模板，适配WebP展示 #

把你当前的特色图片代码改成<picture>标签，实现WebP优先加载+原图降级（兼容不支持WebP的浏览器）：

修改后的模板代码 #

<figure class="image-f">
  {{ with .Params.images }}
    {{ $originalImage := index . 0 }}
    {{ $webpImage := replace $originalImage ".png" ".webp" | replace ".jpg" ".webp" | replace ".jpeg" ".webp" }}
    <a href="{{ $.Permalink }}">
      <picture>
        <!-- 支持WebP的浏览器加载此资源 -->
        <source srcset="{{ $webpImage }}" type="image/webp">
        <!-- 降级方案：加载原图 -->
        <img loading="lazy" src="{{ $originalImage }}" alt="{{ $.Title }}">
      </picture>
    </a>
  {{ end }}
</figure>

说明：

• replace函数自动将原图的.png/.jpg/.jpeg扩展名替换为.webp
• 给img标签补充了alt属性（用文章标题填充），优化SEO和页面可访问性

三、可选：用Hugo资源管道自动生成WebP（更自动化） #

如果图片放在Hugo的assets目录下，可以用资源管道在构建时自动生成WebP，无需手动转换：

<figure class="image-f">
  {{ with .Params.images }}
    {{ $original := resources.Get (index . 0) }}
    {{ if $original }}
      {{ $webp := $original.Resize "1000x webp q80" }}
      <a href="{{ $.Permalink }}">
        <picture>
          <source srcset="{{ $webp.RelPermalink }}" type="image/webp">
          <img loading="lazy" src="{{ $original.RelPermalink }}" alt="{{ $.Title }}">
        </picture>
      </a>
    {{ end }}
  {{ end }}
</figure>

说明：

• Resize "1000x webp q80"表示生成最大宽度1000px、质量80的WebP图片
• Hugo会在构建时自动处理图片，生成的WebP文件会存放在public目录对应路径下

内容的提问来源于stack exchange，提问作者Nedjma Média