このサイトはHugoで作成されている。
で、さきほど書いた8BitDo Microの記事で、スクリーンショットを貼り付ける必要があって、そのときにWebP対応もついでに行ったので、以下に方法を説明する。
まず、画像はassets/imagesフォルダに保存する前提とした。通常、画像は処理が不要なので、staticにおいておくのが（あるいは昔の？）Hugoでの作法だと思うが、今回はHugoに追加されたImage Processingの機能を使って、画像を加工する。
そのためにassets以下に保存することにした（Staticに置いていたら動かなかったので多分その必要がある……）。なお、Pageとセットでフォルダを作って格納していくスタイルもあるらしい。
ともあれ。実際に作成したのは以下のファイル。これをlayouts/shortcodesの下にscreenshot.htmlの名で格納しただけである。
{{- $images_asset_dir := "images/" }}
{{- $image_filename := .Get "filename" }}
{{- $image_alt := .Get "alt" }}
{{- $png := resources.Get ( printf "%s%s" $images_asset_dir $image_filename ) }}
{{ with $png }}
{{- $webp := .Process "webp" }}
<picture>
<source srcset="{{ $webp.RelPermalink }}" type="image/webp" />
<img src="{{ .RelPermalink }}" alt="{{ $image_alt }}">
</picture>
{{ else }}
<span style="color: red; font-weight: bold;">スクリーンショットの画像 {{ $image_filename }} が見つかりませんでした</span>
{{ end }}
これを行ったことでブログのMarkdown中で以下のように書くことで、WebP対応ブラウザでは優先してWebPを表示してくれるようになる。変換自体はHugoがやってくれる。
{{ < screenshot filename="スクリーンショット 2023-10-30 19.22.58.png" alt="8BitDo Micro Key Config 画面イメージ - 数字とシンボルキー類" > }}
特に説明の必要はないようなコードだが、一応説明するとフォルダ名とファイル名を結合して、そのパス名で参照してファイルのオブジェクトを取得してWebPに変換して、必要なHTMLコードを入力する、というものである。
（最初はエラーチェックなしにしていたが、ファイルがないとサイトの生成処理が落ちるようで、流石に問題だと思ったので、ファイルがないときはスクリーンショットの画像が見つからなかったと代わりに表示するようにした）
Image Processingで何ができるかは以下を参照されたい。かなりやりたいことできる気がする。AVIFが欲しい。 https://gohugo.io/content-management/image-processing/
なお、このサイトはCloudflare Pagesを用いて実装しているのだが、Hugoのバージョンを上げ忘れて本番環境ではなぜかImage Processingがエラーになる……みたいなハマり方をしたので、サーバー側にHugoがある場合はそちらのバージョンにも留意しよう。