WebPを使ってみる

iOS Safariの14.0からWebP形式の画像をサポートしているそうなので、WebP形式の画像の作成方法とサイトでの使用方法について試してみます。

対応ブラウザ

対応ブラウザはこちら
IE11とMacのSafariは非対応、iOS Safariは14.0以降のみの対応で、それ以外のブラウザは対応しているようです。

作成方法

WebP形式の画像ですが、Googleから生成するツールが提供されているようなのでそちらを試してみます。

まずはダウンロードページから、使用環境に応じたファイルをダウンロードします。
今回使用するのはWindows環境のため「libwebp-1.1.0-windows-x64.zip」をダウンロードしました。
また、Macの場合はHomebrewでもインストールできるようです。

ダウンロードしたファイル内でツールがいくつか種類が用意されているようですが、今回は「cwebp」と「dwebp」の2つを試してみます。

cwebp

cwebpはJPEGやPNG、TIFF形式の画像をWebP形式にエンコードするツールです。

先ほどダウンロードしたファイルを解凍して、コマンドプロンプトで解凍したファイル内にある「bin」フォルダに移動します。

cd 【解凍したファイルまでのパス】\bin

解凍したフォルダのルートに変換したいファイル(今回はphoto.png)を配置して、下記コマンドを実行します。

cwebp ../photo.png -o ../photo.webp

これでphoto.pngと同じディレクトリにphoto.webpが生成されました。
エンコード前後の比較のデモページ
他にもエンコード時のオプションがいつかありますが、詳しくは公式のガイドをご確認ください。

dwebp

dwebpはcwebpと逆で、WebP形式の画像をPNG形式にデコードするツールです。
ツールは先ほどと同じ「bin」フォルダ内にあるので、元のphoto.pngを削除した上で下記コマンドを実行してみます。

dwebp ../photo.webp -o ../photo.png

photo.webpと同じディレクトリにphoto.pngが生成されました。
デコード前後の比較のデモページ
デコード時のオプションについて詳しくは公式のガイドをご確認ください。

使い方

実際にWebP形式をサイトで使用する場合、対応していないブラウザで代替画像を表示する必要があります。
出し分ける方法はいくつかあるようですが、今回はHTMLとCSSで使用する方法をそれぞれ1つずつ試してみます。

pictureタグ

まずHTMLで出し分ける方法ですが、pictureタグを試してみます。

<picture>
	<source srcset="./cwebp/photo.webp" type="image/webp" />
	<source srcset="./origin/photo.png" type="image/png" />
	<img src="./origin/photo.png" />
</picture>

sourceタグのtype属性でMIMEタイプを指定しています。
pictureタグで使用するデモページ
IE11ではpictureタグをサポートしていませんが、imgタグで指定したソースが表示されるためポリフィルは入れていません。
画面サイズに応じて画像を出し分けたい場合など、pictureの機能を別途使用したい場合はポリフィルを適宜追加してください。

Modernizr

次にCSSで使用する場合ですが、Modernizrを使ってWebP形式に対応した環境かどうかを判別する方法を試してみます。

ダウンロードページで「Webp」のプラスアイコンをクリックして選択した状態で、ページ右上のBUILDをクリックします。
コードのコピペかダウンロードを選択できるので、BuildのDownloadをクリックしてダウンロードします。

ダウンロードしたファイルを読み込んで、背景画像のテスト用に要素を追加します。

<script src="./modernizr-custom.js"></script>

<div class="bg"></div>

Modernizrを読み込んだことで、ブラウザがWebPをサポートしている場合には.webp、サポートしていない場合は.no-webpがhtmlタグに追加されるようになったので、このclassを使ってCSS内で出し分けをします。

.bg {
	width: 800px;
	height: 533px;
}
.no-webp .bg {
  background-image: url(./origin/photo.png);
}
.webp .bg {
  background-image: url(./cwebp/photo.webp);
}

これでCSS内でも出し分けをすることができました。
Modernizrを使ったデモページ