2019年2月2日土曜日

Firefox が WebP 画像のフォーマットに対応

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 はグラデーションが段々になっています。WebP も透過をサポートしています。

WebP はどういった画像に向いているのかがわかりません。

.jpeg.png は使い方に迷うことはありません。判断に迷う時でも、そういった画像というだけで判断基準が揺らぐわけではありません。WebP はそこがわからない。

個人的に風景等、.jpeg の延長と位置づけていますが、.png を変換しても画質の違いが感じられない綺麗な仕上がりにもなります。

実践では、どのみち .jpeg.png は必要なので、WebP に変換してみてファイルサイズや画質の様子を見ながら採用しています。

<picture>
<source srcset="nonsubject.webp" type="image/webp">
<img src="nonsubject.png" alt="">
</picture>

WebP にするメリットがなければ、.png のみ。

こうしておけば、未対応のブラウザにも画像は表示されます。

画像検索

  • Google 画像検索に WebP は表示されます。

    設定の画像検索オプション から ファイル形式を指定するか、filetype:webp で絞り込めます。

  • Bing も同じ filetype:webp で検索できますが、検索結果には表示されません。

    Bing 高度な検索のキーワード

  • DuckDuckGo も同じですけど、そもそも、画像検索でファイルタイプの指定が効いていませんでした。WebP 画像は未発見。

    DuckDuckGo Search Syntax

WebP に変換

Google のエンコーダー、デコーダーはコマンドなので、ちょっと探してOnline JPG to WebP converter を利用させてもらっています。

JPG とありますが、GIF、PNG も変換できます。圧縮率の変更ができませんが、元画像と見分けがつかないくらいの画質になります。

Squoosh というのもありました。こちらのが良さそうですね。

.htaccess

AddType image/webp .webp

だだ、確定ではないようです。MIME タイプ - HTTP | MDN