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

2020-05-132021-08-14

サイト構築

Hugo

HTML

次世代画像フォーマット 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は中にあるsourceのsrcsetで指定された URL の中から、ブラウザがそれに対応していれば選択し、

対応していなければimgのsrcで指定された 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.html1{{ $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が表示されるようになります。

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

それでは