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

 

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

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

今回は、

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

についてお話します。


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

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

<img src="example.webp">

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

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

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

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

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

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

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

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

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

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

関連記事

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

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


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

ここからは Hugo 本ブログで使用している静的サイトジェネレータ
公式サイト
の話になります。

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

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

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

img.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{{ $name := .Get "src" }}
{{ $extention := .Get "ext" | default "jpg" }}
{{ $alt := .Get "alt" }}
{{ $width := .Get "width" | default "auto" }}
{{ $minipath := printf "/posts/%s/%s.%s" .Page.File.ContentBaseName $name $extention }}
{{ $path := printf "content%s.webp" $minipath }}
{{- if (fileExists $path) -}}
    <picture>
        <source type="image/webp" srcset="{{ $minipath }}.webp">
        <img src="{{ $minipath }}" width={{ $width }} 
        alt={{ $alt }} title={{ $alt }}/>
    </picture>
{{- else -}}
    <img src="{{ $minipath }}" width={{ $width }}
    alt={{ $alt }} title={{ $alt }}/>
{{- 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が表示されるようになります。


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

それでは👋