Firefox Quantumがついに登場！FirefoxもWebPをサポートし、残るメジャーブラウザはSafariのみ未対応。
2019年1月29日に、Firefoxのバージョン65となる「Firefox Quantum」がリリースされました。
柔らかい曲線ときれいなグラデーションの背景が、新しい雰囲気を表現しているFirefoxのサイト
WebPへの対応は？Firefox Quantum (ver. 65) でチェックしてみよう
このブログで Firefox Quantum の最も気になるところといえば、WebPに対応したのかどうか、です。Firefoxにはナイトリービルドというベータ版が公開されており、そちらではすでにチェック済み（WebP対応されていた）なので、今回はリリースバージョンでのチェックになります。
結論 Firefox QuantumはWebP対応している
Firefox Quantum をダウンロードし、早速チェック！いま見ていただいているアイデアマンズブログは、すでにWebP対応を済ませています。実際に表示して、開発者ツールで見た画面がこちら。
開発者ツールで見ると、画像のタイプが WebP になっていることがわかる
ということで、Firefoxもついに正式に WebP対応が行われました！
なお、新しいFirefoxは高速化も実現されているとのことなので、ページ表示が爆速な体感でした。もちろん、アドオンがなにもはいっていないなども影響しますが、それでも「速い！」と思える速度が出ています。
WebPはどのぐらい軽くなるのか
WebPがどのぐらい軽くなるのかは、気になる方も多いと思います。画質とのトレードオフではありますが、画像フォーマットとして、JPEGよりも軽量なのが特徴の一つです。JPEGは1992年9月18日に登場し、すでに27年ものキャリアがある画像フォーマットです。日進月歩のITの世界で、イキのいいフォーマットがでてきても不思議ではありません。
では、実際にどのぐらい軽くなるのか見ていきます。上のFirefoxの開発者ツール画像の左側に表示されている、卓上カレンダーの画像はどのぐらい軽くなるのでしょうか。
この画像でも、約1/4弱のファイルサイズが軽くなる。
| ファイル名 | ファイルサイズ | 削減容量 | 削減割合 |
|---|---|---|---|
| JPEG画像(カレンダー画像) 2019-01-28-06-thumb-480xauto-873.jpg |
47.44KB | - | - |
| WebP化した同じ画像 | 34.83KB | -12.61KB | -27% |
| 透過PNG画像(このブログのロゴ) bloglogo02-png24.png |
35.19KB | - | - |
| WebP化した同じ画像 | 3.94KB | -31.25KB | -88% |
約23%近いファイル削減に成功しています。元画像のJPEGは、弊社の画像軽量化ツール「LightFile」で軽量化済みのものですので、そこからさらに約27%も削減できるのは驚異的です。まさにJPEGの限界を超えています。もちろん透過画像にも対応しているので、PNGやSVGにもWebPに変換できます。このブログのロゴも透過PNGなのですが、35.19KB -> 3.94KB という約88%のファイルサイズ削減を達成しています。
これだけのファイル削減効果があるので、表示速度の高速化はもちろん、CDNの転送量もグッとさげることができ、従量課金型のCDNであればコストダウンできるようになるのです。画像軽量化ツール「LightFile」でJPEG軽量化した段階で「転送料金が1/3から1/4」までコストダウンできている事例がありますので、WebPではさらにコストダウンできる可能性があります。
2019年1月31日時点でのWebP対応状況
JPGよりも軽量な画像フォーマットの WebP (ウェッピー)について、2019年1月31日時点でのブラウザ対応状況を調べてみました。
Mac Safari、iOS Safari がまだ対応予定なし...
Firefoxが対応したことにより、Apple Safari ( Mac / iOS )を除くほぼすべてのメジャーブラウザがWebPに対応したことになります。上図の赤枠部分が未対応なメジャーブラウザのSafariたちです。Safariはテスト段階ではWebP実装は対応済みなので、実装に技術的な問題はなさそうなんですが...。
Windows Edgeも対応済みですし、ChromeやAndroid系もすでに対応しています。日本のスマホはiPhoneのシェアが依然として高いですが、世界的にはiOSよりもAndroidの方がシェが伸びています。
WebPに対応するには、ユーザーエージェントやリクエストヘッダでの振り分けで対応
Safariではまだ表示ができないWebPなので、何かしらの振り分けが必要です。現状では、以下の2点で振り分けることができます。
- ユーザーエージェント
- リクエストヘッダ
CDN付きの画像軽量化サービスの場合は、サービス内で変換をかけ、レスポンスでWebPを返す様になっていることが多いです。Javascriptなどのクライアントサイドで実装する場合は、ユーザーエージェントを利用することもできます。
弊社でも、WebPにたった3ファイルで対応するやり方や、WebPに関する情報をまとめています。
- Webサイト全体をWebP対応する最低限の方法 | アイデアマンズブログ
- WebPってなに？Googleが作った新しい画像フォーマットは、軽くてアルファチャンネルもサポート！表示高速化するなら検討してみよう！ | アイデアマンズブログ
WebP対応を考えているけど、どうすればいいかわからない...
WebP対応をしたいけど、どうすればいいんだろう...。という方は、下のフォームよりお気軽にお問い合わせください。画像軽量化することで、表示高速化やCDNのコストダウンなど、得られるメリットは非常に多くあります。
参考リンク
メール無料相談
お聞きになりたいことはありませんか？ この記事の筆者 グロースハッカー能勢 がまずはメールで疑問やお悩みを伺います！ フォームよりお気軽にお寄せください。
担当サービス 画像最適化ツール LightFile
フォローしませんか？
次へ