WebP画像の使い方

2020年夏のウェブ技術の見直しシリーズ第2段（第1段はこちら）として見直していたWebPの情報ですが、2022年2月にPhotoshopデスクトップ版でWebPがネイティブサポートされました。macOS Big Sur / iOS 14以降のSafariを含む最新のブラウザではWebPがサポートされています。導入しやすくなったいま、もう一度特徴をおさらいしておくと良さそうですね。

ということで、以下はWebPについてのまとめです。2020年7月の情報を2022年2月に更新しました。

なんでもかんでもWebPでいいわけではない

試しにUnsplash でランダムに10枚の写真を選んで、ImageOptimとcwebpコマンドラインツールでjpgとwebpに書き出してみました。結果、WebPのファイルサイズが小さくなる画像もあれば、JPEGのほうが小さくなる画像もありました。たまたまだと思いますが、5 : 5の結果でした。それぞれ得意なタイプの写真があるんですかね？

• WebPとJPEGの比較

結局、なんでもかんでもWebPで保存すればいいわけではなくて、画像の種類（写真、イラスト、アイコン）や特徴（グラデあり・なし、透過あり・なし、寸法など）によって使い分けるのが良さそうです。いろいろな画像で試してみて勘所をつかんでおくといいのかもしれませんね。

ちょっと手間がかかりますけど、WebPでも保存してみて、見た目とファイルサイズを比較しながら最適なフォーマットを選ぶのが良さそうです。画像数が多くて工数が問題になる場合は、全部の画像でできなかったとしても、たとえば、ページ上部で使う画像だけでもより細かく最適化するなんていう柔軟な対応もありかもしれません。

他にもCloudinary のようなイメージCDNを使えば、フォーマットの選出や最適化、サイズ調整やクロッピイングまで自動でやってくれるそうなので、予算をしっかり組んでお金で解決するのもありかもですね。Cloudninaryは開発者用のフリープランがあるので、近々検証してみようと思います（ToruさんにTwitter で教えてもらいました。ありがとう！）

画質をとるかファイルサイズをとるか、それとも自動化で妥協点を見つけるか…など、細かい判断が必要な場合もあると思います。その辺はプロジェクトの目的や、予算、スケジュールなど、もろもろを勘案してウェブ制作者としてのプロの判断が必要なんじゃないかなと思います。

ウェブサイトで使う画像フォーマットの選び方

WebPを選択肢の1つとして考える場合、どうやって画像フォーマットを選ぶのが良いのでしょうか？

もう少し検証が必要ですが、いまのところ以下の選び方が良いと考えています。

こんな感じでしょうか？

HTMLやCSSでWebP画像を使う方法

WebP画像をウェブサイトで使う場合、WebPをサポートしていないブラウザを考慮する必要があります。

HTMLで使う場合

picture要素を使えばブラウザが自動で判別をして画像を表示してくれます。

<picture>
  <source srcset="path/to/image.webp" type="image/webp">
  <img src="path/to/image.jpg" alt="わかりやすい画像の説明">
</picture>

picture要素をサポートしないIE11のようなブラウザの場合、pictureとsource要素が無視されてimg要素のみが読み込まれるので、上のように記述すれば自動的にJPEG画像が読み込まれます。

逆にpicture要素はサポートするけどWebPをサポートしないSafariの場合は、picture要素の仕様にあるように、ブラウザで表示できる画像を表示してくれます。

過去記事用に用意したページですが、動作の確認には以下のデモページをご覧ください。

デモはこちら

CSSで使う場合

CSSで使う場合は、Modernizr のようなJavaScriptのブラウザ機能検出ライブラリを使うのが便利です（または独自のJavaScriptなどで判別）。

Modernizrを使うと、WebPのサポートがない場合はno-webp、サポートがある場合はwebpというクラスをhtml要素に付与してくれます。

それを利用して、以下のようにサポートがある場合とない場合のCSSを記述します。

// WebPサポートがない場合
.no-webp .hero {
  background: url("image.jpg");
}

// WebPサポートがある場合
.webp .hero {
  background: url("image.webp");
}

動作の確認には以下のデモページをご覧ください。

デモはこちら

参考サイト

• A new image format for the Web  |  WebP  |  Google Developers
• Using WebP Images | CSS-Tricks
• A Complete Guide to Squoosh: What is it and how to use it? | Target Internet
• 画像圧縮ツールSquooshの使い方【tiny.pngとの比較も】 – Monkeypod
• Animated PNG (APNG) Maker

2020年7月27日に公開され、2022年2月17日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存