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
2. SquooshというWebアプリを使う
SquooshというWebアプリのページで画像をドラッグ&ドロップすればWebP画像に変換してダウンロードできる。
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>