Hugoブログの画像をWebPに変換した方法（サイズ・アスペクト比変更なし）

ブログの表示速度を上げるために、assets/imagesフォルダ内の画像をWebPに自動変換する方法をまとめた。画像のサイズやアスペクト比は一切変更していない。

1. テンプレート（post_preview.html）の修正

最初は、以下のように直接front matterの画像をそのまま表示していた。

{{ if .Params.image }}    <img src="{{ .Params.image }}" alt="{{ .Title }}" class="img-title" />
{{ end }}

これだと画像ファイルがそのまま表示されるだけだから、Hugoのアセットパイプラインを使ってWebPに変換できるよう、テンプレートを以下のように修正した。

{{ with resources.Get (printf "images/%s" .Params.image) }}  {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
    <img src="{{ .RelPermalink }}" alt="{{ $.Title }}" class="img-title u-photo" style="max-width: 100%; height: auto;">
  {{ end }}
{{ end }}

ポイント:

• resources.Get で assets/images フォルダから画像を取得。
• .Resize (printf “%dx%d webp” .Width .Height) で「元のサイズそのまま」でWebPに変換。
• 出力されるimgタグはWebP画像へのリンクになる。

2. マークダウンファイルのfront matter修正

これまでは .md ファイルの画像指定が

image = "assets/images/nameoftheimage.jpg"

のようにパス込みだったが、新しい処理はファイル名だけを参照する。すべてのfront matterを

image = "nameoftheimage.jpg"

のように修正した。

3. 効果とメリット

• 記事で指定した画像はすべて自動でWebPに変換され、軽量化。
• サイズやアスペクト比は元画像のまま。見た目は全く変わらない。
• 一度テンプレートとfront matterを修正すれば、あとは新しい記事でも画像を指定するだけでOK。

4. 注意点・コツ

• 必ず assets/images フォルダ内に画像ファイルを用意すること。
• もし今後リサイズやトリミング等をしたい場合も、テンプレートの .Resize 部分を書き換えれば柔軟に対応できる。
• この方法で、面倒な手間なしにWebP画像を自動生成・配信でき、サイトのパフォーマンスがぐっと向上した。

この2ステップ（テンプレート修正とファイル名の統一）だけで、最新のWebP画像を自動配信できるHugoブログになった。作業量に対して効果は抜群だから、ぜひ試してみて欲しい。