既存のWebサイトを簡単にWebPの画像に対応する方法

WebP画像とは

WebP画像とはGoogleが作成した画像フォーマットでJPEG画像よりファイルサイズを小さくできるため最近使用しているWebサイトが多くなってきている。

画像をWebPにするには主に以下の3つがある。

1. webpコマンドで画像を変換する

Homebrewの以下のコマンドでwebpをインストールする。

brew install webp

インストールが完了したら、cdで画像のあるディレクトリに移動して、以下のコマンドを実行するとwebp画像を生成できる。(数値の80は画質)

cwebp -q 80 foo.jpg -o foo.webp

cwebpの使い方と複数の画像をWebPに一括変換する方法

2. SquooshというWebアプリを使う

SquooshというWebアプリのページで画像をドラッグ&ドロップすればWebP画像に変換してダウンロードできる。

https://squoosh.app/

3. PhotoshopでWebP画像を書き出す

WebPShopというPhotoshopプラグインをインストールすればWebPで書き出すことができる。

逆に言うとプラグインがなければ現在はPhotoshopでWebPは書き出せない。

https://developers.google.com/speed/webp/docs/webpshop?hl=ja

既存のCSSにmodernizrを追加して上書き

現在はIEやSafariなどWebPに対応していないブラウザがある。

対応しているブラウザのみWebPが適用されるようにしたい場合はmodernizrでWeb非対応ブラウザのときにhtmlタグにclass="no-webp"が追加されるのを利用してCSS内のWebP画像をJPEG画像で上書きする。

modernizr 3.6.0 (Custom Build iwb.jp version)

.bnr {
  width: 200px;
  height: 50px;
  background-image: url(bnr.webp);
}
.no-webp .bnr {
  background-image: url(bnr.jpg);
}

Sassを使用する場合は以下の通り。

.bnr {
  background-image: url(bnr.webp);
  
  .no-webp & {
    background-image: url(bnr.jpg);
  }
}

ちなみにWeb対応ブラウザのときにhtmlタグにclass="webp"が追加されるが、以下のように既存のjpgにwebpを上書きしてはいけない。

これだとbnr.jpgを読み込んだあとにbnr.webpを読み込んでしまうため、WebP画像にする意味がなくなってしまう。

.bnr {
  width: 200px;
  height: 50px;
  background-image: url(bnr.jpg);
}
.webp .bnr {
  background-image: url(bnr.webp);
}

既存のimgタグをpictureで囲んで上書き

HTMLファイル内のimgタグの場合は既存のimgタグをpictureで囲んでsourceタグにwebpの指定を追加して上書きする。

以下のようにコードを書けばWebP対応ブラウザの場合はWebP、未対応ブラウザの場合はjpgで画像を表示する。

<picture>
  <source srcset="bnr.webp" type="image/webp">
  <source srcset="bnr.jpg" type="image/jpeg">
  <img src="bnr.jpg" width="200" height="50" alt="">
</picture>

既存のWebサイトを簡単にWebPの画像に対応するサンプル