【Hugo Pipes】長大な画像の自動リサイズ・WebP軽量化(Image Processing)

「スマートフォンで撮影した高解像度の写真をそのまま記事に載せたら、ページの表示速度が極端に遅くなってしまった…」
「記事一覧に並ぶサムネイル画像のアスペクト比（縦横比）やサイズがバラバラで、デザインが崩れてしまう…」

こうしたWeb運用でありがちな画像トラブルは、Hugoに内蔵されている画像処理機能 (Image Processing) を利用することで劇的に解決させることができます！
この強力な機能を使えば、巨大な元画像を自動的にリサイズしたり、画質を保ちながら次世代の軽量フォーマット（WebPなど）に変換して配信したりすることが可能になります。

画像編集ソフト（Photoshopなど）であらかじめ1枚ずつ縮小・トリミングしておく面倒な手間から、完全に解放されましょう！

1. なぜ画像処理が必要なのか？

例えば、最近のスマホで撮った写真は、1枚で 3MB〜5MB、サイズは 4000px を超えることもあります。
これをそのままWebサイトに載せると…

表示が遅い: 読者がイライラして離脱してしまいます。
パケットの無駄: スマホで見ている読者の通信量を無駄に消費します。
Googleの評価が下がる: ページの表示速度はSEO（検索順位）に大きく影響します。

Webサイト（特にブログ記事）であれば、横幅は 1200px 〜 1600px もあれば十分。容量も 200KB以下 が理想です。
これを自動でやってくれるのが Hugo Pipes です。

2. 準備: 画像の置き場所を変える

ここが最大のポイントです。
これまで画像は static フォルダに置いてきましたが、Hugoに加工させる画像は assets フォルダ に置く必要があります。

フォルダ	役割	加工
static/	そのまま配信するファイル（faviconなど）	❌ できない
assets/	Hugo Pipesで処理するファイル	✅ できる！

フォルダの作成

記事用の写真やアイキャッチ画像を入れるため、プロジェクト直下（一番上の階層）に assets/images/ というフォルダを作成しましょう。

（※テーマを動かすためのシステム画像などは themes/my-tutorial-theme/assets/images/ に入れますが、ブログ記事のコンテンツとして使う写真はプロジェクト直下の assets/ に追加していくのがセオリーです。）

3. 基本的な使い方 (Resize)

テンプレート（layoutsファイル）の中で、以下のように書きます。

{{/* 1. 画像を取得する */}}
{{ $original := resources.Get "images/my-photo.jpg" }}

{{/* 2. 画像が存在する場合のみ処理する */}}
{{ with $original }}
    {{/* 3. リサイズする (横幅800px) */}}
    {{ $resized := .Resize "800x" }}

    {{/* 4. 表示する */}}
    <img src="{{ $resized.RelPermalink }}" width="{{ $resized.Width }}" height="{{ $resized.Height }}">
{{ end }}

たったこれだけで、ビルド時に自動的に画像が生成されます！

💡 1枚の大きな画像から複数サイズのサムネイルを作る

この機能の最大のメリットは、「大元の高画質な画像（例: 巨大な2000pxの元画像）を assets に1枚だけ置いておけば、サイトのあらゆる場所でそれぞれ最適なサイズを自動生成できる」という点です。

例えば、

記事の最上部（アイキャッチ）: 迫力ある 1200x webp に自動リサイズ。
トップページ（記事一覧）: 負荷を軽くするため 500x300 webp に自動トリミング。
サイドバー（関連記事）: さらに小さい 200x200 webp に自動トリミング。

これらを、Photoshop等で一切手動リサイズすることなく、Hugo側だけで完結させることができます。デザイン側でサムネイルの比率を揃えたい時などにも非常に強力です。

4. 色々な加工メソッド

Hugoには .Resize 以外にも便利なメソッドがあります。

.Resize (リサイズ)

指定したサイズに変更します。アスペクト比（縦横比）は保持されます。

{{ .Resize "800x" }}      // 横幅800px (高さは自動)
{{ .Resize "x600" }}      // 高さ600px (横幅は自動)
{{ .Resize "800x600" }}   // 強制的に800x600 (歪みます)

.Fill (切り抜き)

指定したサイズに「中心を基準に」切り抜きます。サムネイルを正方形に揃えたい時に超便利です！

{{ .Fill "300x300" }}     // 300pxの正方形に切り抜く
{{ .Fill "300x300 Top" }} // 上部を基準に切り抜く (Center, Bottom, Left, Rightなども可)

.Fit (枠に収める)

指定したボックスサイズに収まるようにリサイズします。元の画像が切れることはありません。

{{ .Fit "800x800" }}      // 800x800の箱に収まる最大サイズにする

5. フォーマット変換と画質調整

Hugoは形式の変換もできます。JPGやWebPに変換して軽量化しましょう。

JPGに変換 (画質指定)

{{/* quality (q) を指定: 1〜100 */}}
{{ .Resize "800x jpg q80" }}

WebPに変換 (推奨！)

WebP（ウェッピー）は、画質を保ったままJPGよりさらに軽くできる、Googleが開発した次世代フォーマットです。

{{ .Resize "800x webp" }}

💡 TIPS: イラスト系のサイトには「ロスレス（無劣化）」指定がおすすめ
イラストや単色が多い画像（スクリーンショットなど）をWebPに変換した際、ノイズ（モスキートノイズ）が気になる場合があります。そのような時は、品質（Quality）に最高値の q100 を指定することで、ロスレス（無劣化）WebP として生成させることができます！

{{ .Resize "800x webp q100" }}

※ファイルサイズは少し大きくなりますが、JPGやPNGよりは軽く、かつ画質は元画像のまま完璧に保たれます。

6. 実践: どんな画像でもエラーにならない書き方

「assets にある画像は加工したいけど、static にある画像も今まで通り表示したい…」
そんな時は、テンプレートをこう書き換えると完璧です。

{{/* 画像パスが "http" で始まる場合はそのまま表示 (外部リンク) */}}
{{ if in .Params.image "http" }}
    <img src="{{ .Params.image }}" alt="{{ .Title }}">

{{/* それ以外の場合 */}}
{{ else }}
    {{/* まず assets から探す */}}
    {{ $image := resources.Get .Params.image }}

    {{/* assets にあれば加工して表示 */}}
    {{ with $image }}
        {{ $resized := .Resize "1200x webp" }}
        <img src="{{ $resized.RelPermalink }}" alt="{{ $.Title }}">
    
    {{/* assets になければ、static (従来のパス) としてそのまま表示 */}}
    {{ else }}
        <img src="{{ .Params.image | relURL }}" alt="{{ .Title }}">
    {{ end }}
{{ end }}

これなら、少しずつ assets に移行していくことができますね。

Hugoに画像加工を任せてページ表示速度を爆速にしよう

読者の離脱（直帰率の悪化）や、検索順位（SEO）の低下を招く「重たい画像」によるパフォーマンスの課題は、Hugo Pipesの機能（.Resize や .Fillなど）を使えばビルド時に完全に自動で解決されます。
特に次世代フォーマットである webp への自動変換は、画質を維持しつつ強力な軽量化をもたらします。加工する元画像は static ではなく必ず assets フォルダに置くというルールさえ覚えて実装すれば、手軽にサイトの表示パフォーマンスと読者の快適さを劇的に向上させることができます！