画像のSEO対策に最適な「WebP」の特徴と3つの変換方法

seo-webpのアイキャッチ画像

皆さんこんにちは、Endorphinsのマーケティングロールのイトマンです!

前回の記事にて画像のSEOとデータを軽減する方法についてまとめました。
(前回の記事を読まれていない方は、ぜひ下記から確認してみてください)

今回はその中で紹介した「WebP(ウェッピー)」について、より詳しい特徴とそのメリットをまとめます。
WebPは数ある次世代のフォーマットの中で普及していく可能性が一番高く、現時点ですでに使用するメリットが多くあるフォーマットです。
ぜひ、そのメリットを感じ取っていただいて、快適なwebサイト制作・SEO対策に繋げていってください。

webマーケティングにおける画像SEOとは?データを軽減する5つの方法も紹介

目次

画像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で表示できるように対応後は、改善できる項目から姿を消し、無事にサイトスピードの改善ができたことを確認しています。

Page Speed Insights

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の使い方などについては、以下の記事で紹介していますのでこちらも参考にしてください。

画像SEOに最適なWebPの作成方法【Photoshop&Squoosh】

Photoshopにプラグインを導入する

写真加工の際に多くの人が使っているPhotoShopですが、標準装備ではWebPへの変換・保存をすることができません。

今後もっとWebPが広がっていくと実装されるかもしれませんが、現時点ではWebPの公式から提供されているプラグインを利用する必要があります。
下記のリンクからWebPShopのGitHubへ飛ぶことができますので、そこから導入が可能です。
なお、PhotoShopへの導入後は書き出しではなく、「保存」もしくは「別名で保存」にてWebPを指定することで変換が可能となっていますので注意してください。

PhotoShop用プラグイン
WebPShop(GitHubからダウンロード)

webアプリケショーンを利用する

PhotoShopを使われていない方や画像をまとめて処理されたい方などはこちらがお勧めです。

①Squoosh(アプリとしてインストールも可能)
Googleが提供しているアプリケーションで画像の加工を実際の結果をリアルタイムで見ることができるため、かなり使いやすいアプリケーションになっています。
デメリットとしては、画像を1枚1枚確認するタイプになるため、まとめて処理ができない点です。

Squoosh

②サルワカ道具箱
サルワカ道具箱の変換サイトの利点は複数のデータを一括でWebPに変換してくれる点です。
圧縮具合の細かい指定はできませんが、大量のデータを変換する場合には大変便利です。 

画像をWebPに変換
サルワカ道具箱

まとめ

今回はWebPの特徴から実際の変換方法まで含めてまとめました。

最新の技術は導入された直後は普及まで時間がかかり、扱いにくいものも多くあります。
WebPもそんな技術の一つでしたが、ようやく実用可能な域になってきました。
ぜひ、最新技術を利用してユーザビリティーの高いwebサイトを運用していきましょう。

Endorphinsではユーザーの利便性をしっかりと考えたwebサイト制作を行っています。
また、webサイト全体の戦略立案からサポートまで様々な要望にお応えできるようにしておりますので、ぜひお気軽にご相談ください。

イトマン
イトマン
1987年、福岡県出身。2010年九州大学工学部卒、九州大学大学院システム生命科学府一貫制博士課程を中退(修士学位を取得)。学生時代は血流センサウェアラブルデバイスを研究。2021年まで代々木ゼミナールにて商品・講座企画に従事。2021年合同会社エンドルフィンズ設立。
エンドルフィンズ事業ご紹介資料
ダウンロードページへ
エンドルフィンズ事業ご紹介資料表紙
エンドルフィンズ事業ご紹介資料メンバー紹介
エンドルフィンズのデザイン概要
エンドルフィンズのSNSマーケティング工程
エンドルフィンズのサービス一覧
エンドルフィンズの事例紹介
エンドルフィンズ事業ご紹介資料
ダウンロードページへ

エンドルフィンズでは、「デザイン」「webマーケティング」「webサイト制作」「SNSマーケティング」それぞれの分野のプロフェッショナルが集まり、チームを結成しております。クライアントのゴール達成の支援を“結果志向”型で提供させて頂きます。

実績一覧資料ダウンロード

エンドルフィンズが提供している「デザイン」「webマーケティング」「webサイト制作」「SNSマーケティング」
についての実績一覧資料をダウンロードできます

御社のお悩みお聞かせください

エンドルフィンズでは、クライアントのゴール達成のために最適な戦略立案、施策実行を“結果志向”型でご提供いたします。
先ずは、お気軽にご相談ください。