ウェブサイトに WebP を導入する方法

次世代画像フォーマット WebP は、JPEG や PNG と比べると、画像の品質の割にはかなりファイルサイズを小さくできます。

しかし、ブラウザによっては対応していない場合もあるので、対応していない場合の処理の記述も必要となってきます。

今回は、

  • ウェブページ内で WebP を使う方法
  • Hugo での画像ショートコード例

についてお話します。


ウェブページ内で WebP を使う

ブラウザが対応していれば、

<img src="example.webp">

と普通にimgタグを使っても正しく表示されます。

しかし、ブラウザが対応していない場合は表示されません。

(ブラウザの対応状況はこちらで確認することができます。)

これに対処するために、pictureタグとsourceタグを使って、次のようにします。

1
<picture>
2
<source type="image/webp" srcset="example.png.webp">
3
<img src="example.png">
4
</picture>

pictureは中にあるsourcesrcsetで指定された URL の中から、ブラウザがそれに対応していれば選択し、

対応していなければimgsrcで指定された URL を選択します。

このimgタグは、普通のimgタグと同様に属性を付加できます。

1
<picture>
2
<source type="image/webp" srcset="example.png.webp">
3
<img class="example-img" src="example.png" alt="example" title="これは例です">
4
</picture>

こちらにスタイルを適用すれば、WebP で表示されている場合でもスタイルは適用されます。

  関連記事画像を最適化してウェブページの表示速度を上げよう
画像を最適化してウェブページの表示速度を上げよう

【Hugo】WebP に対応した画像ショートコードを作る

ここからは

の話になります。

さきほどのコードを画像の埋め込みのたびに書くというのは、重複部分が多すぎるため得策ではありません。

そこで Hugo のショートコードを利用します。

例えば、コードは次のようになります。

img.html
1
{{ $name := .Get "src" }}
2
{{ $extention := .Get "ext" | default "jpg" }}
3
{{ $alt := .Get "alt" }}
4
{{ $width := .Get "width" | default "auto" }}
5
{{ $minipath := printf "/posts/%s/%s.%s" .Page.File.ContentBaseName $name $extention }}
6
{{ $path := printf "content%s.webp" $minipath }}
7
{{- if (fileExists $path) -}}
8
<picture>
9
<source type="image/webp" srcset="{{ $minipath }}.webp">
10
<img src="{{ $minipath }}" width={{ $width }}
11
alt={{ $alt }} title={{ $alt }}/>
12
</picture>
13
{{- else -}}
14
<img src="{{ $minipath }}" width={{ $width }}
15
alt={{ $alt }} title={{ $alt }}/>
16
{{- end -}}

fileExists$pathが存在するかどうかを返す関数です。

これで、/posts以下のマークダウンファイル内で書かれたショートコードに、このコードが展開されます。

例えば、/posts/example/index.md内で

{{< img src=example ext=png alt=例 width=300 >}}

と書けば、

/posts/example/example.png.webpが存在し、ブラウザが対応していればこの画像が表示され、

ブラウザが対応していない、もしくはファイルが存在しなければ/posts/example/example.pngが表示されるようになります。


この記事がお役に立てたなら幸いです。

それでは👋