- 公開日： 最終更新日：
WebPとは？ホームページでWebP画像を利用する前に読みたい内容
ホームページの表示速度やSEO効果の向上を狙っている方であれば、WebPと呼ばれる画像フォーマットがあることをご存じだと思います。
画像をWebPでアップロードすることで、ページの表示速度が速くなるので、訪問者がスムーズにホームページを閲覧することができるようになったり、Googleからの評価が高まりSEO効果を発揮することができます。
当ページでは、WebPとは何かや、メリット、デメリット、変換法、利用するときの注意点を解説します。
目次
WebPとは
WebPとは、Googleが開発した画像フォーマットのことを言い、JPEGやPNG、GIFになる他の画像フォーマットと比較をすると、品質を保ったまま、高い圧縮率を誇る形式です。
ちなみに、読み方はウェッピーで、拡張子は.webpです。
WebPが発表されたのは、2010年9月になりますが、当初はほとんどのブラウザが対応していなかったので、ブランク表示になっていましたが、少しずつブラウザが対応するようになり、2018年にはパソコンのFirefoxやMicrosoft Edgeが、2020年にはAppleのiOS14とSafariが対応しています。
特に大きかったのが、AppleのiOS14とSafariの対応で、昨今ではスマートフォンからのアクセスがパソコンからのアクセスよりも多くなるのが一般的なので、そこで日経新聞社や楽天など、大手サイトがこぞってWebP化を行っています。
ただし、以下で解説していますが、WebP化には大きなデメリットが存在しており、それが原因で2024年7月現在では大半の大手サイトがWebPの利用を控えています。
WebPのメリット
ホームページの画像をWebPにするメリットを解説します。
主要なブラウザはすべてが対応している
上記はCan I useというアメリカのホームページで、ブラウザの利用状況を確認できるホームページのキャプチャー画像になり、Can I useでWebPに対応しているブラウザを調べてみました。
結果、現在ではすべての主要なブラウザはWebPに対応しており、WebPを利用したとしてもブランクとして表示されることがないので、すべての画像を訪問者に見てもらうことが可能です。
画像の透過やアニメーションも作成可能
WebPは、JPEG、PNG、GIFのすべてに対応することができるので、透過やアニメーション画像などもWebPだけで対応することができます。
フォーマット選択で悩まなくなる
従来の画像は、写真ならJPEG、透過ならPNG、アニメーションならGIFというように画像フォーマットを使い分けることが一般的でした。
しかし、WebPはすべての画像フォーマットに対応することができるので、ホームページのすべての画像をWebPだけにしたとしても、一切ホームページの表示に影響はありません。
これによりWebマスターは、どんな画像を利用するかでフォーマットを選択すべきかを悩む必要がなくなるので、効率の良いホームページ運営を行うことができます。
ページの表示速度が高まる
WebPを利用することで、ページの表示速度が高まります。
WebPは圧縮率が高く、これまでの経験で見れば、JPEGであれば30％から60％の間で圧縮することができるので、サイト全体の画像フォーマットをWebPにすれば、表示速度が飛躍的に早くなります。
また、WebPを利用すればPageSpeed Insightsの点数を高めることもできるので、SEOとしても効果を発揮することができます。
ファイル容量を小さくしても画像が綺麗
画像のファイル容量を小さくすれば、画像が荒くなるのが一般的ですが、WebPではファイル容量を小さくしても、ほとんど元の画像と変わらない品質の画像を作成することができます。
つまり、WebPはファイル容量を小さくしても画像が綺麗なまま、ページの表示速度を高める魅力的なフォーマットと言えるのです。
WebPのデメリット
WebPの利用を検討中の方は、デメリットを理解したうえで活用しましょう。
クロール済み - インデックス未登録になりやすい
WebPを利用する最大のデメリットと言っても良いのが、WebPを利用することで画像がクロール済み - インデックス未登録になるという点です。
当社のホームページでは、すべての画像をWebPにしていた時代があったのですが、すべての画像がクロール済み - インデックス未登録になっていました。
残っているのが、533件からですが、多いタイミングでは、1,000件以上のクロール済み - インデックス未登録があり、画像とページのSEOは別と言っても、そこまであるとページのクロール済み - インデックス未登録を見落としてしまうという問題点が出てきたのです。
そこで、当社が行った対策は、画像の削除になっており、現在でも画像を利用していますが、WebPではなくJPEGを利用しています。
そうすると、クロール済み - インデックス未登録が増えることがないので、WebPはクロール済み - インデックス未登録になりやすいという認識が必要です。
ちなみに、改善方法をいろいろと試してみましたが、改善されることはなかったので、WebPが原因という結論になっています。
また、クロール済み - インデックス未登録について詳しくはこちらからご覧ください。
画像を変換する必要がある
WebPを利用する際には、変換する手間が必要になります。
新規の画像でPhotoshopをお持ちの方であれば、画像の保存形式をWebPにすれば良いだけですが、既存の画像をWebPにするには変換ツールが必要になり、多くの時間が費やされる恐れがあります。
WebPへの変換方法
JPEG、PNG、GIFの画像を変換する方法を解説します。
Squooshを利用
Googleが提供する画像軽量化サービスのSquoosh（スクーシュ）を利用すれば、WebPへの変換が可能です。
操作法は簡単で、WebPにしたい画像をドラッグ＆ドロップして、左下のCompressのプルダウンからWebPを選択して、ダウンロードボタンをクリックするだけで、WebP画像がダウンロードされます。
上記の画像であれば、86％が圧縮されています。
Photoshopを利用
Photoshop23.2以前のバージョンを利用している場合は、WebPShopプラグインをインストールすることで、WebP形式での保存が可能です。
また、PhotoshopでWebP画像を保存するにはいくつかのポイントがあり、まずはWindowsであればctrl＋E、MacであればCommand+Eでレイヤーの統合を行う必要があります。
レイヤーを統合した後、書き出しではなく、「別名で保存」をクリックし、ファイルの種類でWebPを選択することで、WebPでの保存が可能です。
WordPressならプラグインのWebP Express
WordPressでホームページを制作しているのであれば、WordPressにアップロードした画像をすべてWebPに変換してくれるプラグインのWebP Expressがおすすめです。
WebP Expressは、単に画像をWebPに変換してくれるだけではなく、HTMLに記述された読み込む画像のファイル名もWebPに変更してくれるので、変換作業がスムーズに行えます。
ただし、プラグインになっているので、WebP Expressを利用した後は、必ずホームページの確認を行い、ブランク画像が表示されていないかをチェックしましょう。
WebPを利用するときの注意点
WebPを利用するときの注意点は、クロール済み - インデックス未登録になる可能性が高いという点です。
Google曰く、ページと画像のSEOは完全に別物になっているとのことですが、WebP画像のクロール済み - インデックス未登録が増えてしまうと、ページのクロール済み - インデックス未登録を見落としてしまう可能性が高くなります。
もちろん、現在は、無条件でクロール済み - インデックス未登録になりますが、Googleはそのうち対応してくれると思うので、特にSEOを気にしていないのであれば、WebPを利用したほうがページの表示速度が高まるので、ユーザーにとっては便利です。
そのため、SEOを行っているかどうかで判断すべきであり、SEOを行っているホームページであれば、WebPの利用は辞めた方が良いでしょう。
WebPのまとめ
WebPについて解説しました。
WebPはページの表示速度が速くなるので、コンバージョン対策としては有効活用できる画像フォーマットですが、2024年7月の状態で言えばWebPはクロール済み - インデックス未登録になってしまうので、SEOを行っているホームページでは利用を控えるべきだと考えます。
WebPって何？とお思いの方の参考になれば幸いです。
