次世代画像フォーマットWebPを導入する前に知っておくべき事
最終更新日:
GoogleのPageSpeed Insightsの改善できる項目に表示される『次世代フォーマットでの画像の配信』のWebP、JPEG 2000、JPEG XRなどの画像フォーマットですが、まだまだ認知度が低く普及率も低い状態です。
そんな中、WebPが徐々に浸透しつつあり、今後は多くのウェブサイトで導入されると予想されます。
WebP、JPEG 2000、JPEG XRとは？
現在ウェブで使用されているJPEGやPNG、GIFに代わる次世代画像フォーマットとして、「WebP」、「JPEG 2000」、「JPEG XR」などが存在します。
WebP
WebPとは、Googleが開発した新しい画像フォーマットで、PNGより26％、 JPEGより25〜34％軽量で、更に透過させたり、アニメーションさせることも可能で、JPEGやPNG、GIFのそれぞれの良いところを併せ持っています。WEBに特化しているので今後一番普及しそうな次世代画像フォーマットです。
JPEG 2000
JPEG 2000とは、JPEG規格委員会が策定した新しいJPEGフォーマットのことで、従来のJPEGと比べるとより画質と圧縮率が向上しているのが特徴ですが、処理速度が遅くなるというデメリットがあり、現状のウェブには不向きな面があります。
JPEG XR
JPEG XRも新しいJPEGフォーマットの一種で、『XR』はeXtended Rangeの略で、マイクロソフト社のWindows Media Photoが元となった規格となっています。色数や画質などは従来のJPEGよりも向上しているのですが、画像を扱える環境が少なくあまり普及していない状況です。
次世代画像フォーマットへのブラウザ対応状況
ウェブサイトを次世代画像フォーマットに入れ替えても、閲覧者側のブラウザで表示できなければ全く意味がありません。
現状では、唯一、WebPだけがほとんどのブラウザに対応していて、今後の次世代フォーマットとして普及する可能性があるものの、Apple系のブラウザsafariは非対応となっているのがネックとなります。
JPEG 2000とJPG XRは、一部のモダンブラウザを除きほとんどが非対応なので、今後の世代画像フォーマットとして採用されることは難しいと思われます。
| WebP | JPEG 2000 | JPG XR | |
|---|---|---|---|
| IE | × | × | ○（ver9以降） |
| Edge | ○（ver18以降） | × | ×（ver12-18のみ） |
| FireFox | ○（ver65以降） | × | × |
| Chrome | ○（ver32以降） | × | × |
| safari | × | ○(ver5以降） | × |
| iOS Safari | × | ○(ver5以降） | × |
| Android | ○（ver4.2以降） | × | × |
最新のWebPのブラウザ対応状況 ⇒ caniuse.com
WebP非対応ブラウザへの対応策
Google主導でWebPを普及させようという動きがあり、ほとんどの主要モダンブラウザは対応しているのですが、AppleとしてはライバルのGoogleが開発したWebPを受け入れたがらないという事情があり、safariのWebP対応が大きな鍵となりそうです。
また、WebP非対応の古いブラウザを使っているユーザも数多くいるという問題もあり、なかなかWebP導入へ踏み出しにくいといった事情があります。
現段階では、WebP非対応ブラウザには、今まで通りJPEGやGIF、PINGで表示させ、対応ブラウザにはWebPで表示させるように、画像を2種類用意して振り分けるという対応策になるかと思います。
WebP画像の作り方
WebPフォーマットへの書き出しや保存ができる画像編集ソフトが少ないというのは、ウェブ制作の立場からすると扱いにくいといった印象です。
PhotoshopでWebPに変換
Adobeの最新版Photoshop ccでさえも、WebPを編集することができず、書き出しや保存もできないので非常に不便です。一応、プラグインをインストールすれば、Photoshop ccでもWebPが扱えるようになりますが、ちょっと面倒です。
Photoshop用WebPブラグイン ⇒ WebPShop
オンラインツールでWebPに変換
画像をWebP形式にするには、アプリをインストールをする必要がないオンラインツールが一番簡単です。
おすすめはGoogleが提供しているWEBツール『Squoosh』にアクセスして、JPEG、GIF、PINGの画像ををドラッグ＆ドロップするだけで、簡単にWebPフォーマットに変換してくれます。ただし、一枚づつの変換になるので大量の画像を扱うにはあまり向いていません。
WordPressならWebP対応プラグインが便利
WordPressで構築されているウェブサイトであれば、一括で画像を自動的にWebPフォーマットに変換したり、ブラウザの表示振り分けなども行えるプラグインも存在するので、WebP導入は比較的簡単と言えます。
ただし、一括変換されるので、個別で画質を調整したりすることが難しいといったデメリットもあります。
いつWebPを導入するべき？
WebPがどこまで普及するかはGoogleのSEOへの影響次第のような気がします。現状のブラウザやソフトウェアの対応状況からすると、WebPを導入するタイミングとしては、そんなに急ぐ必要はなく、もう少し様子を見てもからでも大丈夫かと思います。
ウェブサイトの読み込み速度は、SEO対策として重要な要素の一つですが、やはり一番重要なのはコンテンツです。コンテンツがしっかりしていないと、検索エンジンで上位表示されることはないので、コンテンツの見直しをしつつも、WebPの導入を検討してみるというのが良いかと思います。
既存のウェブサイトの場合は、WebPに対応させるのにかかる作業量と、WebPによってどれだけの効果が期待できるのかを、しっかりと踏まえた上で判断したほうが良さそうです。
新規ウェブサイトを作成するのであれば、将来的なことを考慮してWebPを導入する方向で検討するのが良いかと思います。
WebPを導入したWEBサイト作成します
新規ウェブサイトもしくはリニューアルを検討中でWebPを導入したいという方はお気軽にご相談ください。