WebP画像の使い方(2020年夏)

Advertisement

2020年夏のウェブ技術の見直しシリーズ第2段(第1段はこちら)。Safari 14でWebPがサポートされる ので、WebPについての情報を見直しています。

WebPの紹介ページ にはWebPの可逆画像(lossless)はPNGとくらべて26%、非可逆画像(lossy)はJPEGと比べて25–34%もファイルサイズを小さくできるとあって「Safariでもサポートされるし、もう画像はWebPで保存しとけばいいんじゃないの」と思ってしまいそうですが、そんなこともなさそうです。

MozJPEGのほうが優秀な場合もあるよなんていうブログ記事 もあったりして「もぉ、どっちなの?」ってなるわけです。

ということで、2020年7月時点でのWebPについてのまとめです。

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

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

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

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

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

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

WebPの特徴をおさらい

ここで、そんなWebPの特徴をおさらいしてみます。

  • 可逆圧縮でPNGよりも26%小さくできる場合がある
  • 非可逆圧縮でJPEGより25–34%小さくできる場合がある
  • PNGのように透過画像も扱える(アルファチャネルをサポート)
  • MozJPEGなど他の圧縮技術のほうが良い場合がある
  • SVGなど他のフォーマットのほうが良い場合がある
  • Chrome、Firefox、Edgeなどのブラウザでサポートされている
  • Safari 14でサポートされる(iOS 14、macOS 11に搭載される)

といった感じです。

他にも、WebPはアニメーションにも対応していますが、APNGのほうが良いというテスト結果 もあったりして、使うメリットがあるのか判断が難しいところです。

サンプル画像

WebPウェブサイトのギャラリー で、WebPと他のフォーマットの画像を比較できるサンプル画像が見られます。

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

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

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

写真 MozJPEGとWebPで書き出してファイルサイズと画質を比較する
ベクターのみの画像 SVGを使う
複雑なベクター画像 SVGで書き出してファイルサイズが大きくなる場合はPNG、JPEG、WebPでも書き出してみて比較する。サイズの差が少ない場合はSVGを使う。
比較的シンプルなイラスト PNGとWebPで書き出してファイルサイズと画質を比較する
テクスチャやグラデのあるイラスト JPEG、WebP、PNGで書き出してファイルサイズと画質を比較する
透過画像 PNGとWebPで書き出してファイルサイズと画質を比較する

こんな感じでしょうか?

WebP変換ツール

変換ツールはいろいろありますが、イチオシはGoogle Chrome Teamが作ったGUIツールのSquooshです。分割表示でオリジナルと圧縮後の画像を確認しながら細かい設定をできるのが良いです。細かく最適化する場合はSquoosh、バッチで処理したい場合はコマンドラインツールやGulpのワークフローに組み込んでやるのがいいかもしれません。

SafariがWebPをサポートすることになったので、ツールは今後もっと充実するかもしれませんね。

GUIツール

WebP画像の変換にはSquoosh というWebアプリが便利です。オリジナルと変換後の画像を画面上で比較できるので、画質とファイルサイズをより細かく最適化できます。書き出しの詳細オプションも設定できるのでかなり細かく最適化ができます。

Google Chrome Teamが実験的プロジェクトして作っているツールです。

Squooshを使うと以下の圧縮方式で画像を最適化できます。

OxiPNG、MozJPEG、WebP、Browser PNG、Browser JPEG、Browser BMP、Browser GIF、Browser TIFF、Browser JPEG 2000

コマンドラインツール

Homebrewにwebpというパッケージ があります。このツールをインストールすると以下のようなコマンドで画像をWebPに変換できます。

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

このコマンドではimage.jpgを80のクオリティでimage.webpというファイルに変換します。

Gulpで変換する場合

Gulpのワークフローに組み込む場合は、imagemin プラグインのimagemin-webp あたりを使うのがいいんですかね?Gulpなら上述の画像フォーマットの選び方もある程度までなら自動化できそうです。

Photoshopプラグイン

Photoshop向けにはGoogleが作ったWebPShopというプラグイン があります。僕は現在Affinity Designerをメインのグラフィックツールとして使っていてPhotoshopは使ってないのでテストできませんが…。

その他のツール

  • Sketch ではプラグインなしでWebPでエクスポートできます
  • Pixelmator Pro ではプラグインなしでWebPエクスポートができます
  • Figmaではプラグイン でWebPエクスポートできるみたいです
  • Adobe XDではまだサポートされてないみたいです
  • Affinity Designerではまだサポートされてません

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

2020年7月現在、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");
}

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

デモはこちら

画像の最適化はユーザ体験の向上にもつながる

画像の最適化はユーザ体験の向上にもつながるし、ウェブサイトの表示パフォーマンスの改善を通してSEOにも効く(はずな)ので、ウェブ制作者だったら重要視すべきだと思うわけです。

正直、面倒ではありますけど「こんなの面倒くさい…」なんて言ってられないんですよね。笑

ユーザージャーニーマップを描いて導線を最適化するのも大切ですけど、画像を最適化してユーザ体験を改善するのもすごく大切です。

画像の最適化はすごく地味で地道な作業ですが、こういった小さな積み重ねがユーザ体験を向上させるんだと思うと、不思議とやる気がでるんですよね。がんばろう👊🏻

参考サイト

更新情報

  • イメージCDNについてなんでもかんでもWebPでいいわけではないのセクションに段落を追加しました(2020/07/29)
  • ウェブサイトで使う画像フォーマットの選び方をテーブルにしました(2020/07/28)
  • Unsplashでランダムに選んだ写真10枚で比較をした結果を追加しました(2020/07/28)

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Twitter @rriver またはFacebook まで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です