WebPってなに？Googleが作った新しい画像フォーマットは、軽くてアルファチャンネルもサポート！表示高速化するなら検討してみよう！
Webで利用できる画像の種類はいくつかあります。Webで使えるというと、端的にいうとWebブラウザで表示できるかどうか、ということになるかと思います。
あなたのウェブサイトをWebP対応したらどのぐらいかわるのか、無料でチェックしてみよう！チェクしたいURLを入れるだけで、30秒以内にシュミレーション！
(2019年2月追記) こちらの記事でWebPの利用と、Googleのページスピード測定ツール PageSpeed Insights の関係を検証しました。平均 +3.2ポイント、最大 +22.6ポイントのスコア改善につながりました。
WebPは、軽くてキレイでアルファチャンネルをサポートする新しい画像フォーマット
WebPの開発は、Googleが行なっています。まずは、WikiPediaをみてみましょう。
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。ただし、競合各社の思惑もあってブラウザでの採用が進んでいないため、ウエブサイトでも採用が進んでいない。
もっとも特徴的なのは、非可逆圧縮でもアルファチャンネルを扱えることでしょう。これができるということは、GIFやPNGのように透過した画像を作ってもWebPで書き出せるということになります。JPGの欠点を補うことができます。
問題はサポートブラウザ、スマホ全盛のいま、InternetExplorerをどう考えるか
JPGと違い、サポートブラウザの種類が少ないのが現状です。そのため、導入する場合は、非対象ブラウザに対するアプローチを考える必要が出てきます。そのため、WebPの導入には以下の判断を求められます。
- ユーザーエージェントを判定して、WebP以外の画像を表示する
- 非対象ブラウザは切り捨てる
サポートブラウザは、まだまだ少ないのが現状です。
Webmasters interested in improving site performance can easily create optimized WebP alternatives for their current images, and serve them on a targeted basis to browsers that support WebP.
- WebP lossy support
- Google Chrome (desktop) 17+
- Google Chrome for Android version 25+
- Opera 11.10+
- Native web browser, Android 4.0+ (ICS)
- WebP lossy, lossless & alpha support
- Google Chrome (desktop) 23+
- Google Chrome for Android version 25+
- Opera 12.10+
- Native web browser, Android 4.2+ (JB-MR1)
- Pale Moon 26+
- WebP Animation support
- Google Chrome (desktop and Android) 32+
- Opera 19+
MicrosoftのInternetExplorerやEdgeは入っていません (Edgeはバージョン18から対応予定)。Firefoxも見当たりません (Firefoxはバージョン65から対応予定)。Chromeについても、iPhone版ではサポートされていません。Googleの領域にあるデバイスはサポートされていますね。現状では、このサポートブラウザの少なさがデメリットです。
- Firefoxは65で対応予定！2018年11月現在の WebP (ウェッピー)のブラウザ対応状況を確認してみよう。Safari対応をどうするかが課題。
- 2018年8月現在の WebP (ウェッピー)のブラウザ対応状況を確認してみよう。WebPはJPGにかわる軽量画像フォーマット。
どうやってWebP画像をつくるの？
Photoshopで作る
Webデザイナーの方は、コマンドラインよりもPhotoshopの方が利用頻度は高いと思います（最近ではgulpなどでコマンドラインを扱う人もかなり増えてきました）。PhotoshopでWebPを書き出すには、プラグインをインストールすれば可能です。利用は自己責任でお願いします。
- WebP Photoshop Plugin | Telegraphics - Free plugins for Photoshop & Illustrator...and other software
なんと、MacのPhotoshopであればCS2から対応しているっぽいです！
cwebpコマンドで作る
コマンドラインからも作成できます。WebPはHomebrewを使うと、すぐにインストールすることができます。コマンド例はこんな感じです。
$ cwebp [options] -q quality input.png -o output.webp以前コチラの記事にもWebPの使い方を書いているので、参考まで。
#WebP ご存知ですか？ウェッピーと読むのですが、かわいい名前でその実力は非常に高いです。才色兼備なWebP。#JPG よりも #写真 をかるくできるので、#Webパフォーマンス あげるには一度検討してみましょう。https://t.co/8iiysIdJT0
-- アイデアマンズ (@ideamans) 2018年4月12日
今の制作フローにどうやって取り込むのか？
現在運用しているサイトに取り込むのには、検討すべき事項が多くあります。開発が必要になるケースもあるでしょう。最もかんたんなのは、Googleが用意している mod_pagespeed を利用することです。このモジュールを入れることで、開発は不要になり、画像の作成も今まで通りで良くなります。
画像作成の枚数が増えればその分負荷は増えます。UA判定をいれればずっとブラウザのアップデートに追随する必要が出てきます。mod_pagespeedは、Apacheもnginxも出ているので、これらのウェブサーバであれば、導入が可能です。CDNが入っている場合は、master側に入れておいてmod_pagespeedが生成したファイルもCDNに乗せてしまえば問題ないでしょう。
WebP入れるのが難しい場合、どうすればいい？
どうしても入れられないケースももちろん存在するはずです。WebPの導入を考えるケースは、画像を軽くしたいというケースです。であれば、既存のJPGやPNGを軽くすることが有効です。
PNGは重い。透過していなければ、JPGやPNG-8を使おう
基本的に、PNGはJPGよりも重くなる傾向があります。
ただし、色数が少ない場合は、PNGの方が軽いです。そのため、ロゴやなにかしらの図版などは、PNGやGIFが良いでしょう。PNGにはPNG-8とPNG-24があります（PNG-32もあります）。それぞれ扱える色数が異なるので、GIFと同じPNG-8は軽いです。約1678色扱うことができるPNG-24はどうしても重いデータになります。
まずは、以下を確認しましょう。
- PNG画像のうち、明らかに重いデータが存在しないかどうか（約1MB以上あれば、それはウェブページの表示としては相当重い）
- JPGファイルがどのくらいあり、容量がどのくらいあるか
ウェブページで利用されているJPGファイルの数や容量は、無料のLightFileシミュレータをご利用ください。かんたんに調べることができます。
LightFileは開発不要なので、導入もかんたん！作業フローもかわりません！
WebPの導入は、mod_pagespeedをいれるとかんたんです。しかし、それも難しい場合もあります。そんな時は、弊社の画像最適化ツールLightFileを検討してみてください。LightFileシミュレータで出た結果と同じだけの画像最適化が行なえます。開発不要ですし、自動処理なので気にすることはもうなにもありません。
JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に！
自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。
最後に
いかがでしたでしょうか？WebPは本当に優れた画像フォーマットですが、まだ導入の障壁を高いかもしれません。Firefox陣営がJPGと比べてもそんなに変わらないとコメントしているのも気になります（ただ、JPGはアルファチャンネルを扱えない）。何事もチャレンジしてみて、良ければ採用するようにしましょう。まずは挑戦！
画像軽量化のLightFileでどのぐらい効果が出るのか興味のある方は、こちらのフォームからリクエストいただければ処理結果をレポートいたします！無料で利用できますので、お気軽に！
メール無料相談
お聞きになりたいことはありませんか？ この記事の筆者 グロースハッカー能勢 がまずはメールで疑問やお悩みを伺います！ フォームよりお気軽にお寄せください。
担当サービス 画像最適化ツール LightFile
フォローしませんか？
次へ