WebP導入のメリット・デメリットと対応ブラウザ

更新日: 2024年11月29日

要約：

• 次世代画像フォーマットであるWebPには、SEO対策における多くの利点がある。
• Googleの基本コンセプトに基づいて適切なフォーマットを選択する判断力が求められる。
• ブラウザの負荷軽減を考慮した最適なフォーマットと適切なサイズで画像を配置する。

次世代フォーマットWebP

Google PageSpeed Insightsでは、「次世代フォーマットでの画像の配信」がチェック項目として追加されてから、かなりの時間が経ちました。
しかし、現在でもJPEGやPNGフォーマットのみを使用しているサイトが多く見受けられます。

対象URLを調査した際、サイト内の画像が正常に次世代フォーマット（WebP）に対応している場合、「合格した検査」として以下のように表示されます。

このことから、GoogleがWebPの利用を推奨しているのは明らかです。それに伴い、WebPを導入することで検索エンジンにも少なからず影響を与えると考えられるでしょう。

WebP対応は難しくない

サイト改善を検討する際、多くの方が抜本的なレイアウトの見直しや、ユーザー動向の分析に基づいた再設計を思い浮かべることでしょう。これらの作業は専門性が高く、時間と労力を要するため、後回しになるのも理解できます。

一方で、“次世代画像フォーマット”への対応は、大規模な改善に比べて手軽に取り組める作業の一つです。それにもかかわらず、なぜ対応していないサイトがこれほど多いのでしょうか？

ここでは、現時点で最も知名度が高く、Googleが開発し、SEO対策に効果的と言われる次世代フォーマット「WebP」について紹介します。

WebPとは？

WebPは、非可逆圧縮（JPEGのような） と 可逆圧縮（PNGのような） の両方に対応した次世代の画像フォーマットで、読み方は「ウェッピー」です。

GIFフォーマットのようなアニメーションに対応し、さらにPNGフォーマットのようにアルファチャネル（透明度）を利用することも可能です。

加えて、非常に優れた圧縮性能を持ち、非可逆圧縮ではJPEGよりも約30～50%、可逆圧縮ではPNGよりも約26%ファイルサイズを削減できます。つまり、従来のフォーマットと同等の画質を保ちながら、ファイルサイズを軽量化することができるため、クオリティを損なうことなく、ページの表示速度を向上させることが可能です。

WebP導入のデメリット

これまで解説したように、WebPには基本的に多くのメリットがあります。しかしながら、次世代画像フォーマットであるWebPの存在を知りながらも、実際の導入に踏み切れていない方が多いのが現状です。

その理由として、以下のような懸念事項が挙げられます。

• 対応していないブラウザがある
• 検索順位アップに直接影響しない
• 現行の画像フォーマットからの変換方法が分からない

これらは本当に解決できない問題なのでしょうか？

以下で、それぞれの懸念について詳しく解説します。

対応していないブラウザがある？

こちらのリンクから、現在のWebP対応ブラウザ状況を確認できます。

WebP image format Image format that supports lossy and lossless compression, as well as animation and alpha transparency.

Can I use

2024年時点のWebP対応ブラウザ状況

私は2019年頃からWebPの導入や導入提案を行ってきました。当時は対応ブラウザが限られており、SEO効果への期待もまだ懐疑的な状況でした。しかし現在では、主要なブラウザのほとんどがWebPに対応しており、その対応状況は大幅に改善されています。

具体的な状況は以下の通りです。

1. Safari
   • 対応状況
     macOS 11 Big Sur以降のバージョンで完全対応しています。最新のiOSデバイスもすべてWebPをサポートしています。
   • 注意点
     macOS 11 Big Sur以前の環境では未対応です。
2. Internet Explorer (IE)
   • 対応状況
     WebPには対応していませんが、MicrosoftはIEの開発を既に終了しており、利用者は非常に少なくなっています。
3. 他の主要ブラウザ
   • Chrome、Edge、Firefox、Opera、Android Browserなど、ほとんどのモダンブラウザは完全にWebPに対応しています。
4. 特定の古いブラウザや小規模ブラウザ
   • 一部の古いバージョンや、小規模ブラウザ（例: UC BrowserやKaiOS Browserなど）では部分対応または未対応のケースが存在します。

WebP非対応ブラウザへの対策

WebPが表示できないブラウザを使用しているユーザーが訪問した場合でも、以下の方法で適切に対応することが可能です。

• フォールバック設定
  WebP非対応のブラウザに対しては、代替としてJPEGやPNGを提供する仕組みを構築します。
• コンテンツネゴシエーション
  ブラウザの対応状況に応じて、自動的に最適なフォーマットを出力する設定を活用します。

WebP未対応の環境でも画像が適切に表示され、ユーザー体験を損なうことなく運用できます。

対応ブラウザと未対応ブラウザの振り分け方法

以下は、対応ブラウザと未対応ブラウザを振り分けるための例として、.htaccessを使用した記述例です。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$
RewriteCond %{DOCUMENT_ROOT}%1%2.webp -f
RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1$2\.webp [L,T=image/webp,R]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

このような振り分けの仕組みは、過去にも存在しました。たとえば、かつてはInternet Explorer (IE) とNetscape Navigator (NN/NC) の間で実装されていたものが代表例です。

これら2つのブラウザは、HTMLのレンダリング仕様が大きく異なり、さらにWindowsとMac間のプラットフォームでも挙動が異なっていました。そのため、ユーザー環境に応じた振り分けが一般的でした。

また、モバイル端末が普及し始めた頃には、iモード、J-Phone、ezwebといったプラットフォーム向けに、環境に応じた振り分けページを設けるのが普通であったという歴史もあります。このように、ユーザー環境（環境変数）に応じて表示内容を変える仕組みは、クローキングには当てはまりません。

順位アップに寄与するものではないという情報が多い

“WebPを使っているだけで順位が上がる”という単純な理由で評価されることは少ないと考えられます。Googleが「WebPを導入しているから順位を上げよう」といった形で直接的に評価することはあってはなりません。

しかしながら、Googleは「ページの読み込み速度をモバイル検索のランキング要素に使用する」と明言しており、これはAMP導入時にも強調されていたポイントです。

さらに、Googleが提供するPageSpeed Insightsでは、次世代フォーマットに未対応の場合に導入を促すアラートが表示されます。また、WebPがGoogle自ら開発した画像フォーマットであることを踏まえると、同社が推奨しているフォーマットを使用しているサイトの評価をあえて下げる可能性は極めて低いと考えられます。

PNGやJPEGフォーマットからWebPフォーマットへの変換方法

既に世の中には便利なフリーソフトが沢山公開されています。
一先ず「WebP 変換」や「WebP フリーソフト」といったクエリで検索すれば、窓の杜などですぐにお目当てのものが見つかるでしょう。

ローカルでWebPに変換する場合は、本家本元のGoogleから提供されているcwebpをダウンロードするのが一般的で、MacでもWindowsでも無料でインストールすることができます。

また、オンライン上で変換できる無料のWebP Converterは、

1. SYNCER
2. Squoosh
3. サルワカ

などがお勧めです。

さらに、WordPressを使用している方であれば、EWWW Image OptimizerやWebP Expressといったプラグインを使えば、特に細かいことは気にせずに、画像のアップロード時に変換されるので安心です。
WordPressといったCMSを導入されていない方は、libwebpのあるサーバ環境で、GDやImageMagickといったライブラリを入れて、シェルスクリプトで既存イメージを一括コンバートすることが必要になるでしょう。

ブラウザに表示されているWebPをPNG、またはJPGに変換して画像保存する方法

Google Chromeの場合

1. Save image as Typeをダウンロード後、インストールします。
2. Webページを任意のブラウザタブに読み込み、保存したい画像の上で右クリックします。
3. “Save image as Type”を選択して、”Save as JPG”、または”Save as PNG”のいずれかを選択します。
   格納する場所を指定して「保存」をクリックすると、指定の場所にローカル保存されます。

Firefoxの場合

1. ADD-ONSのSave webP as PNG or JPEGをダウンロード後、インストールします。
2. ページを任意のブラウザタブに読み込み、保存したい画像の上で右クリックします。
3. “Save WebP As “を選択し、JPGまたはPNG形式のいずれかを選択します。
   拡張機能として、JPG形式に対しては複数の変換オプション（品質レベル）が提供されています。視覚的な品質を低下させたくない場合は、JPG (100)を選択してください。

次世代画像フォーマットWebPで配信するメリット

WebPを導入する意義について、改めて考えてみましょう。
ウェブサイトを運営する上で、Googleからの流入確保は多くのサイトにとって避けて通れない課題です。そのGoogleが開発し、推奨している画像フォーマットに対応しない選択をするのであれば、他のインフラやメディアで競争する方法を模索する必要があるかもしれません。

これは画像フォーマットだけの問題ではありません。新しい仕組みを率先して導入し、「他を出し抜く」という積極的な姿勢で取り組みましょう。いつの時代でも、新しい技術や見慣れないものに対して拒絶反応を示す人は少なくありません。特に日本では、「周りが導入し始めたら」「もっと理解してから」と様子を見る傾向が強く、結果として導入が遅れがちです。しかし、普及する前に対応することで、先行者利益を得ることができ、業界内でイニシアチブを取る可能性が高まります。

他者を模倣し、「右にならえ」の状態では、サイトの作りが他と同じようなものになり、質の面でも他サイトと大差がない状態に陥ります。このような状況では、Googleから特別な評価を得ることは難しいでしょう。

もちろん、何でもかんでも導入すれば良いというわけではありません。ご自身でしっかり調査を行い、「これは有用だ」と判断できたものについては、積極的に導入し、競争に挑むべきです。

まとめ

WebPを導入するかしないかといった単純な選択の問題ではなく、常に新しい技術を検証し、必要に応じて導入していく姿勢が求められます。

これは「目に付いたものを手当たり次第に取り入れろ」という意味ではありません。Googleの基本コンセプトを理解したうえで、適切な技術を選び取る力を養いましょう。

特にWebPは、大規模なサイト運営に非常に適していると考えられます。たとえば、1つの画像ファイルが数キロバイトだとしても、数千人がアクセスすればその通信量は数メガバイト規模に膨れ上がります。

WebPを負荷対策として適切に導入できれば、トラフィックによる通信量を大幅に削減することが可能で、サイト運営者自身にも通信コスト削減という形で大きな恩恵があります。

それでも、あなたは周囲が対応を始めるのを待ってから導入を検討しますか？
それとも、次世代の標準環境を率先して作り上げる側に回りますか？

 

YouTube動画 – 柏崎剛SEO対策チャンネル

よくある質問

📕 WebPとは何ですか？

📖 WebPは、Googleが開発した画像フォーマットで、JPEGやPNGと比較して高い圧縮率と品質を実現します。これにより、ウェブページの読み込み速度が向上し、ユーザー体験の改善に寄与します。また、透過やアニメーションにも対応しており、幅広い用途で利用されています。

📕 WebP画像を表示できない場合、どうすればよいですか？

📖 WebP画像が表示できない場合、使用しているブラウザや画像ビューアがWebP形式に対応していない可能性があります。最新のブラウザや対応ソフトウェアを使用することで解決できます。また、Windows環境では「WebP Codec」をインストールすることで、エクスプローラー上でのサムネイル表示や「Windows フォトビューアー」での閲覧が可能になります。

📕 WebP画像を他の形式に変換するためのフリーソフトはありますか？

📖 WebP画像をJPEGやPNG形式に変換するためのフリーソフトとして、「WebP Converter」や「WebPconv」などがあります。これらのソフトは、ドラッグ＆ドロップで簡単に画像を変換でき、初心者でも扱いやすいのが特徴です。また、オンライン上の変換ツールも多数存在し、インストール不要で手軽に利用できます。