[PR] 大手アパレルECサイトが導入する月額1万円〜ファイル数無制限の画像軽量化ツール「LightFile」

Firefox Quantumがついに登場!FirefoxもWebPをサポートし、残るメジャーブラウザはSafariのみ未対応。

2019年1月29日に、Firefoxのバージョン65となる「Firefox Quantum」がリリースされました。

2019-01-31-ff65-01.jpg柔らかい曲線ときれいなグラデーションの背景が、新しい雰囲気を表現しているFirefoxのサイト

WebPへの対応は?Firefox Quantum (ver. 65) でチェックしてみよう

このブログで Firefox Quantum の最も気になるところといえば、WebPに対応したのかどうか、です。Firefoxにはナイトリービルドというベータ版が公開されており、そちらではすでにチェック済み(WebP対応されていた)なので、今回はリリースバージョンでのチェックになります。

結論 Firefox QuantumはWebP対応している

Firefox Quantum をダウンロードし、早速チェック!いま見ていただいているアイデアマンズブログは、すでにWebP対応を済ませています。実際に表示して、開発者ツールで見た画面がこちら。

2019-01-31-ff65-03.jpg開発者ツールで見ると、画像のタイプが WebP になっていることがわかる

ということで、Firefoxもついに正式に WebP対応が行われました!

なお、新しいFirefoxは高速化も実現されているとのことなので、ページ表示が爆速な体感でした。もちろん、アドオンがなにもはいっていないなども影響しますが、それでも「速い!」と思える速度が出ています。

WebPはどのぐらい軽くなるのか

WebPがどのぐらい軽くなるのかは、気になる方も多いと思います。画質とのトレードオフではありますが、画像フォーマットとして、JPEGよりも軽量なのが特徴の一つです。JPEGは1992年9月18日に登場し、すでに27年ものキャリアがある画像フォーマットです。日進月歩のITの世界で、イキのいいフォーマットがでてきても不思議ではありません。

では、実際にどのぐらい軽くなるのか見ていきます。上のFirefoxの開発者ツール画像の左側に表示されている、卓上カレンダーの画像はどのぐらい軽くなるのでしょうか。

2019-01-28-06.jpgこの画像でも、約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日時点でのブラウザ対応状況を調べてみました。

2019-01-31-ff65-04.jpgMac Safari、iOS Safari がまだ対応予定なし...

Firefoxが対応したことにより、Apple Safari ( Mac / iOS )を除くほぼすべてのメジャーブラウザがWebPに対応したことになります。上図の赤枠部分が未対応なメジャーブラウザのSafariたちです。Safariはテスト段階ではWebP実装は対応済みなので、実装に技術的な問題はなさそうなんですが...。

Windows Edgeも対応済みですし、ChromeやAndroid系もすでに対応しています。日本のスマホはiPhoneのシェアが依然として高いですが、世界的にはiOSよりもAndroidの方がシェが伸びています。

WebPに対応するには、ユーザーエージェントやリクエストヘッダでの振り分けで対応

Safariではまだ表示ができないWebPなので、何かしらの振り分けが必要です。現状では、以下の2点で振り分けることができます。

  1. ユーザーエージェント
  2. リクエストヘッダ

CDN付きの画像軽量化サービスの場合は、サービス内で変換をかけ、レスポンスでWebPを返す様になっていることが多いです。Javascriptなどのクライアントサイドで実装する場合は、ユーザーエージェントを利用することもできます。

弊社でも、WebPにたった3ファイルで対応するやり方や、WebPに関する情報をまとめています。

WebP対応を考えているけど、どうすればいいかわからない...

WebP対応をしたいけど、どうすればいいんだろう...。という方は、下のフォームよりお気軽にお問い合わせください。画像軽量化することで、表示高速化やCDNのコストダウンなど、得られるメリットは非常に多くあります。

参考リンク

リクエストはこちらから

前へ前へ

画像軽量化は最短3日でスタート!導入時に開発が発生しない画像軽量化ツールって、実は意外と少ない。

次へ次へ

Can I use ... をGA連携で自分用にカスタマイズ