Firefox 65 にてWebP 画像がサポートされました。
WebP は Google が開発した画像フォーマット。拡張子は .webp。
WebP の読みは、ウェッピー という噂もありますが、チャッピーとかどこぞの魔法使いに似てるので却下。誰が何と言おうと ウェブピー。異論は認めません。
最近、試験的に .webp を使いはじめています。そこで使いながら気が付いたところや特徴を書き付けていきたいと思います。
Edge、Firefox、Chrome、Opera が対応しています。IE11 と Safari が未対応なので、代替の画像は必要です。
画質と容量
同じぐらいの画質で比較すると、.png より 30% 程度小さくなる感覚です。これは本当に大雑把な感想で、逆に 50% 増えることもありました。
PNG8 (47.9 KB)
WebP (37.8 KB)
PNG はグラデーションが段々になっていますが、滑らかな PNG24 にすると比較にならないほどファイルサイズが大きくなります。両方とも透過をサポートしますが CMYK には非対応。
WebP はどういった画像に向いているのかがわかりません。
.jpeg と .png は使い方に迷うことはありません。判断に迷う時でも、そういった画像というだけで判断基準が揺らぐわけではありません。WebP はそこがわからない。
個人的に風景等、.jpeg の延長と位置づけていますが、.png を変換しても画質の違いが感じられない綺麗な仕上がりになります。
ものすごくアップにして .png と比較すると、気持ちボヤッとした感じがするので、このあたりに高圧縮の秘訣があるのかもしれません。
実践では、どのみち .jpeg や .png は必要なので、WebP に変換してみてファイルサイズや画質の様子を見ながら採用しています。
<source srcset="nonsubject.webp" type="image/webp">
<img src="nonsubject.png" alt="">
</picture>
WebP にするメリットがなければ、.png のみ。
こうしておけば、未対応のブラウザにも画像は表示されます。
画像検索
-
Google 画像検索に WebP は表示されます。
設定の画像検索オプション から ファイル形式を指定するか、filetype:webp で絞り込めます。
自分のサイトの WebP を Google 画像検索で調べるとプレビューがぼやけていますが、ファイル形式を指定して検索すると、きっちり表示されるという謎の現象に遭遇しています。
-
Bing も同じ filetype:webp で検索できますが、検索結果には表示されません。
-
DuckDuckGo も同じですけど、そもそも、画像検索でファイルタイプの指定が効いていませんでした。WebP 画像は未発見。
WebP に変換
Google のエンコーダー、デコーダーはコマンドなので、ちょっと探してOnline JPG to WebP converter を利用させてもらっています。
JPG とありますが、GIF、PNG も変換できます。圧縮率の変更ができませんが、元画像と見分けがつかないくらいの画質になります。
Squoosh というのもありました。こちらのが良さそうですね。
SVG も変換できるので画質を損なわず出力できます。
.htaccess
AddType image/webp .webp
Firefox が対応したことで、WebP は定着しそうな雰囲気になってきました。ですが、全面的に取り入れるのはまだ控えるべきでしょう。
優れているといっても画像は画像です。見映えが良くなったり、ファイルサイズが劇的に小さくなったりはしません。IE11 と Safari のブラウザに対応させることのが大切ですし、<picture> で複数の画像を用意するより、当然 1 つのが効率的です。
free.arinco.org のアナリティクス調査では、Chrome 40%、次いで Safari 20%、さらに、Internet Explorer が 15% もの来訪者があるので、完全な入れ替えは絶対に不可です。
ソーシャルメディアの多くは WebP に対応していますが、他にも画像は記事と共に引用される可能性があるので、汎用性の高いフォーマットにしておく方が安全です。
リッチリザルトに役立つ Google の構造化データでさえ、まだ WebP はサポートされていません。
WebP の使いどころ (2019年4月3日追記)
WebP を使い続けて、おぼろげに見えてきた気がします。
JPEG に適した画像は、WebP でも向いているので、特に考えるところはないでしょう。
JPEG を WebP へ変換しても、元の画質以上にはならないので、ファイルサイズ縮小のためと割り切るか、直接出力するなら対応したエディタやプラグインを用意する必要があります。
PNG はファイルサイズが大きい場合に色数を少なくしていくと、ある時点で見た目を保てなくなり、それ以上サイズを減らすことが厳しくなります。(JPEG は画質を下げてもそれなりに見える)
そこで WebP にすれば、ファイルサイズを減らしても PNG のクッキリ感を残しながら、グラデーションのなめらかな変化も再現できます。
実際に作成していて PNG を破棄して WebP にするのは、このパターンが多いのに気付きました。ロゴなどは PNG のがシャープですが、OGP など縦横サイズを保とうとすると、あまりにもファイルサイズが大きくなってしまう時に採用しています。