皆さんこんにちは、Endorphinsのマーケティングロールのイトマンです！
前回の記事にて画像のSEOとデータを軽減する方法についてまとめました。
（前回の記事を読まれていない方は、ぜひ下記から確認してみてください）
今回はその中で紹介した「WebP（ウェッピー）」について、より詳しい特徴とそのメリットをまとめます。
WebPは数ある次世代のフォーマットの中で普及していく可能性が一番高く、現時点ですでに使用するメリットが多くあるフォーマットです。
ぜひ、そのメリットを感じ取っていただいて、快適なwebサイト制作・SEO対策に繋げていってください。
目次
画像SEOに最適なWebPとは
WebP（ウェッピー）とは、Googleが開発している画像フォーマットのことです。
最近少しずつ聞く機会が増えているように思いますが、実際には2010年に発表されており、対応ブラウザの広がりによってようやく実用的な規模になってきたフォーマットです。
高性能なフォーマットではありましたが、日本で特に人気の高かったIE（Internet explorer）に対応をしていないため、webサイトで利用をするにはブラウザごとに表示形式を変える必要があり、実装するハードルが高い印象を持たれていました。
ただ、そのIEもサポート終了が近づいてきており、日本でIEを使っていた人もEdgeやChromといった別ブラウザへどんどん変更しているため、今後の需要はどんどん高まっていくでしょう。
WebPの特徴と他のフォーマットとの比較
WebPは圧縮率の高い非可逆圧縮を採用している一方で、透過書き出しも可能になっています。
また、高圧縮率のため画質を保ったまま比較的軽量なフルカラーアニメーションにも対応をしており、従来よく使われている「JPEG」・「PNG」・「GIF」のいいとこ取りをしたフォーマットになっています。
| 名称 | 拡張子 | 色数 | 圧縮方法 | 透過 | アニメーション |
|---|---|---|---|---|---|
JPEG | .jpg（.jpeg） | 1670万 | 非可逆圧縮 | 不可 | 不可 |
PNG | .png | 1670万 | 可逆圧縮 | 可 | 不可 |
GIF | .gif | 256色 | 可逆圧縮 | 可 | 可 |
WebP | .webp | 1670万 | 非可逆圧縮 | 可 | 可 |
画像の圧縮
WebPの開発元であるGoogleは、同等の画質のPNG と比較してサイズが26% 、 JPEG 画像では25 ～ 34% 小さくなると発表しています 。
（https://developers.google.com/speed/webp）
実際にサンプル画像で試してみた結果は以下の通りです（WebP・JPEG・PNGで比較）。
サンプル画像の見た目自体には大きな違いはありませんが、かなりデータサイズを圧縮できていることがわかると思います。
WebP：107KB
JPEG：156KB
PNG：549KB
webサイトの速度改善によるSEO向上
Page Speed Insightsというサイトを利用すると、自分のwebサイトの改善すべき点などを把握することができます。
下の図は本webサイトにてWebPを導入する前のサイト評価ですが、改善できる項目の欄に「次世代フォーマットでの画像の配信」という項目が表示されていました。
画像をWebPで表示できるように対応後は、改善できる項目から姿を消し、無事にサイトスピードの改善ができたことを確認しています。
WebPのメリット・デメリット
メリット
メリットは主に2つあります。
①非可逆圧縮であるにも関わらず背景透過が使え、高圧縮率のおかげでアニメーションにも利用することができるため、これまで主流の「JPEG」・「PNG」・「GIF」を1つのフォーマットに統合することができます。
②データが従来のフォーマットよりも軽減されるため、サイトの読み込み時間の短縮によるユーザー満足度の向上が狙えます。
また、サーバー上に保管するデータ容量も削減できるため、各種サービスを利用する際のコストなどを抑制することも可能です。
デメリット
デメリットも主に2つあります。ただし、このデメリットは日に日に改良されているため、近い将来にはほぼ無くなっていくと考えられます。
①全てのブラウザで対応をしているわけではない
下図の赤いエリアが非対応ブラウザ・バージョンになりますが、IEは非対応となっています。
最近まではSafariも非対応だったためWebPの利用があまり広がっていませんでしたが、ようやく対応となりました。
そのおかげで全世界で95％を超える対応ブラウザとなっており、IEの利用率が高い日本でも90％を超えるブラウザで対応済みとなって、利用をしてもほぼ問題ないレベルとなってきました。
IEのサポート終了が予定されていますので、今後はますます利用可能ブラウザの割合が高くなっていくと思います。
図：WebPの対応ブラウザ・バージョン一覧
②WebPへの変換に少し手間がかかってしまう
デジカメなどで撮影をした際にはデフォルトでJPEGになっていることが多いと思いますし、これまで蓄積してきたデータはJPEG・PNG・GIFのどれかであることが多いと思います。
そのため、利用をする際には何かしらの方法でWebPへと変換をする必要があるため作業の手間が増えてしまいます。
ただ、こちらも以前まではwebアプリケーションを利用するなどでしか変換できませんでしたが、PhotoShopのプラグインが開発されるなど、変換作業がかなりやりやすくなっています。
おそらく、今後もっと普及が広まれば、もっと効率的にWebPへと変換できるツール・アプリが開発されていくと考えられます。
WebPへの変換方法
これまでWebPの特徴やメリット・デメリットを確認してきましたが、今後はWebPを活用していこうかなと感じた人もいるのではないでしょうか。
ではどうやって画像をWebPのフォーマットに変換するのか、いくつか方法がありますが、その中でも使いやすい3つの方法を紹介したいと思います。
なお、Photoshophの導入方法やSquooshの使い方などについては、以下の記事で紹介していますのでこちらも参考にしてください。
Photoshopにプラグインを導入する
写真加工の際に多くの人が使っているPhotoShopですが、標準装備ではWebPへの変換・保存をすることができません。
今後もっとWebPが広がっていくと実装されるかもしれませんが、現時点ではWebPの公式から提供されているプラグインを利用する必要があります。
下記のリンクからWebPShopのGitHubへ飛ぶことができますので、そこから導入が可能です。
なお、PhotoShopへの導入後は書き出しではなく、「保存」もしくは「別名で保存」にてWebPを指定することで変換が可能となっていますので注意してください。
webアプリケショーンを利用する
PhotoShopを使われていない方や画像をまとめて処理されたい方などはこちらがお勧めです。
①Squoosh（アプリとしてインストールも可能）
Googleが提供しているアプリケーションで画像の加工を実際の結果をリアルタイムで見ることができるため、かなり使いやすいアプリケーションになっています。
デメリットとしては、画像を１枚１枚確認するタイプになるため、まとめて処理ができない点です。
②サルワカ道具箱
サルワカ道具箱の変換サイトの利点は複数のデータを一括でWebPに変換してくれる点です。
圧縮具合の細かい指定はできませんが、大量のデータを変換する場合には大変便利です。
まとめ
今回はWebPの特徴から実際の変換方法まで含めてまとめました。
最新の技術は導入された直後は普及まで時間がかかり、扱いにくいものも多くあります。
WebPもそんな技術の一つでしたが、ようやく実用可能な域になってきました。
ぜひ、最新技術を利用してユーザビリティーの高いwebサイトを運用していきましょう。
Endorphinsではユーザーの利便性をしっかりと考えたwebサイト制作を行っています。
また、webサイト全体の戦略立案からサポートまで様々な要望にお応えできるようにしておりますので、ぜひお気軽にご相談ください。
