WebPとは？メリット・デメリットや画像の変換方法を解説

WebPとはGoogleが開発した画像形式で、SEO的に有利に働くとして注目を集めています。

この記事では、 WebPのメリット・デメリットや変換方法、他の画像ファイルとの違いについて解説します。

「画像を最適化して、SEO対策したい」とお考えの方は、ぜひ最後までご覧ください。

＜SEO対策について詳しく知りたい方はこちら＞SEO対策とは？SEO対策のメリット・デメリットと対策方法を詳しく解説

WebPとは

WebPとは、2010年にGoogleが開発した新しい画像形式です。拡張子は「.webp」で「ウェッピー」と読みます。

WebPは、画質を保ったまま画像を軽量化できるのが大きな特徴です。書き出しが早く、SEO的にも有利に働く画像形式として、近年注目を集めています。

Webpの特徴

WebPはJPEG（JPG）以上に圧縮率が高いものの、画質の劣化がほとんどありません。そのため、Webサイトのデザインクオリティを維持しながら、ページの表示速度を高速化できます。

また、ファイルの容量を削減するなど、サーバーへの負担も軽減できるため、現在多くのWebサイトで導入されています。

WebサイトでWebPの利用が増えている背景

WebサイトにWebPを利用するケースが増えた要因は、SEOの観点からGoogleが推奨しているためです。中でも、2021年6月16日に行われたページエクスペリエンスアップデート以降、強く推奨されるようになりました。

ページエクスペリエンスアップデートでは「Core Web Vitals」が検索順位の評価指標に取り入れられました。

Core Web Vitalsは、Webサイトに訪れたユーザー体験を図るための指標です。測定項目の1つに、ページの表示速度が含まれるため、SEO対策をする上で画像の軽量化が課題の1つとなりました。

そこで、高画質な画像を低容量で使用できるWebPが、SEOを意識したWebサイトのスタンダードなフォーマットになりつつあります。

WebPの対応ブラウザ

WebPは現在、主要なブラウザには全て対応しています。

以下は、ブラウザごとのWebPの対応状況を示した図で、記載されているブラウザだけで世界で94.75%／日本で96.42%のシェアを誇ります。

上記の図は、以下のように表現されています。

色	WebPへの対応状況
緑	対応済み
黄	条件付きで対応済み
赤	非対応

つまり、パソコン・スマートフォン問わずほとんどのブラウザがWebPに対応しています。

条件付きの対応は、アニメーションや背景透過の利用不可を指しますが、いずれのブラウザも最新バージョンでは対応しています。

そのため、Webサイト内の画像を全てWebPに切り替えても良いと言えるでしょう。

WebPのメリット

WebPのメリットは次の通りです。

• JPEG・PNG・GIFの特徴を併せ持つ
• 画質を維持したまま圧縮できる
• 透過処理・アニメーションに対応している
• ページの表示速度を改善できる
• SEOに有利になる

WebPの特徴を理解して活用できれば、SEO的にも大きなメリットが得られるでしょう。それぞれのポイントについて詳しく解説します。

JPEG・PNG・GIFの特徴を併せ持つ

WebPは、JPEG・PNG・GIFに代わる次世代型の画像形式といわれています。というのも、WebPはこれら3つの特徴を併せ持つ画像形式だからです。

JPEG・PNG・GIFには高い圧縮率・透過処理に対応・アニメーションに対応といった別々の特徴があります。それぞれに特色があるものの、これらを同時に実現するのは困難でした。

しかしWebPの登場により、3つの画像形式のメリットを同時に満たせるようになりました。使用目的に合わせて形式を変換する必要がなく、1つのファイルで対応できるのが大きなメリットといえるでしょう。

画質を維持したまま圧縮できる

WebPでは、画質を維持したまま圧縮できます。可逆圧縮・非可逆圧縮の両方に対応しており、使い勝手の良い画像形式です。

• 可逆圧縮：もとのデータを失うことなく圧縮する
• 非可逆圧縮：もとのデータを一部失うものの圧縮率が高い

可逆圧縮であるPNGやGIFの場合、画質は大きく低下しないものの、圧縮しても容量が小さくなりません。

一方、通常画質は圧縮率に比例して劣化していくため、非可逆圧縮であるJPGの場合、無理に圧縮すると画像が荒くなります。また、非可逆圧縮のファイルは一度圧縮すると復元しても画質が元に戻らないなどのリスクもあります。

できるだけ画質を劣化させることなく、容量だけ軽くできるのがWebPのメリットといえるでしょう。WebPはビットマップ画像であり、拡大すると画質が低下する点はJPEG・PNG・GIFと同じです。

透過処理・アニメーションに対応している

従来の画像形式では、透過処理をするならPNGを使い、アニメーションを加えたいならGIFを使うというように、使用目的に合わせて形式を変換する必要がありました。

形式によって色数も異なり、変換することで見た目が変わってしまうケースも少なくありません。

WebPは、透過処理やアニメーションにも対応しています。色数は1,670万色以上とJPEGに匹敵し、色鮮やかな写真でも境界線を明確に表現できます。

ページの表示速度を改善できる

画像データは、ファイルサイズが小さいほど、読み込み速度が上がります。そのため、WebPを使えばページ全体の表示スピードが改善可能です。

表示速度が上がれば、Webサイトを快適に閲覧できるため、ユーザビリティも向上します。ユーザーがストレスなくサイトを回遊できれば、コンバージョン率の向上も望めるでしょう。

SEOに有利になる

Core Web VitalsがSEO評価に加えられてから、ページの表示速度が直接、検索順位に影響を与えるようになりました。

そのため、WebPを使えばSEOに有利になります。裏を返せば、表示速度が遅いと検索順位が落ちる可能性があるため、SEOを行う上でWebPの利用は必須と言えます。

また、ユーザー体験が向上すれば直帰率や離脱率の改善など、間接的なSEO効果も見込めるため、積極的に活用しましょう。

WebPのデメリット

WebPのデメリッは次の通りです。

• 対応していないブラウザもある
• 画像変換の手間がかかる
• 画像編集ソフトが制限される

このようなデメリットがあるものの、すでに大部分は改善されているのも事実です。一つひとつ解説します。

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

WebPは新しい画像形式ということもあり、対応ブラウザが限られていたのが最大の課題でした。

しかし現在は、ほぼすべてのブラウザに対応しています。macOS 11 Big Sur以前のSafariでは未対応ですが、現在流通しているiPhoneはすべて WebPに対応しています。

画像変換の手間がかかる

 WebPを利用するためには、画像形式を変換しなければなりません。JPEG・PNG・GIFとして保存されている画像をWebPにするためには、ツールを使って変換する必要があります。

現時点では、インターネット上の多くの画像はJPEG・PNG・GIF形式で保存されています。使用するまでに変換の手間がかかる点はデメリットといえるでしょう。

画像編集ソフトが制限される

画像形式をWebPに変換するためには、画像編集ソフトを使います。

しかし画像編集ソフトのなかにはWebP未対応のものも存在するため、何でも良いわけではありません。画像をWebP形式で使用したい場合には、画像編集ソフトをご利用ください。

WebP以外の画像ファイルの種類と特徴

画像ファイルの種類には次のようなものがあります。

種類	圧縮方法	色数	透過処理	アニメーション
WebP	可逆圧縮非可逆圧縮	1,670万色以上	対応	対応
JPEG	非可逆圧縮	1,670万色以上	未対応	未対応
PNG	可逆圧縮	256〜1,670万色以上	対応	未対応
GIF	可逆圧縮	256色	未対応	対応

それぞれの特徴を簡単に紹介します。

JPEG

JPEGは色数が多く、主に写真を保存する場合に使用される画像形式です。境界線があいまいな画像でも鮮明に表現できるのが特徴です。

写真などの静止画像の保存に適した形式であり、画像形式の中でも最大級の1,677万色を表現できます。

加えて、非可逆圧縮の画像形式であるため圧縮率が高い点は、PNGやGIFにはない強みといえるでしょう。データを小さな容量にまとめられるため、スマホやデジカメの撮影画像によく使われます。

また、メジャーな画像形式であるため多くの画像編集ソフトに対応しています。

ただし透過処理やアニメーションには対応していないので、Web制作の現場では非推奨とされています。

PNG

PNGは、Web上でビットマップ画像を取り扱うために開発された画像形式です。

写真のような容量が大きい画像ファイルの保存には適さないものの、ロゴやイラストといった低容量の画像ファイルは可逆圧縮して保存できます。

画像の一部を透過処理できるため、ホームページやWebサイトで利用される場合も多いです。

ただしPNGは3種類存在し、それぞれ特徴が異なるため取り扱いには注意が必要です。

名称	利用可能色	データサイズ	透明化
PNG-8	256色	軽い	完全な透明化のみ可
PNG-24	約1,670万色	重い	不可
PNG-32	約1,670万色+256段階の透明度データ	最も重い	透明化・半透明化ともに可

PNG-8は、透明化が可能ですが、透明度を調整することができません。また、透明部分との境界が荒くなりますが、容量を軽くできるメリットがあります。

PNG-24は、JPEGと同程度の画質を表現できますが、PNGの特徴である透明化が行えません。加えて、そのまま保存するとJPEGの数倍データが大きくなります。

PNG-32は、高画質かつ透明化、透明度の調整などPNGの全ての機能に対応している形式です。汎用性が高いですが、サイズが極端に大きく、可逆圧縮であるため、データをあまり小さくできない点に注意が必要です。

PNGは形式の選択を誤ると、利用意図を満たせない可能性があるため、必ず理解しておきましょう。

GIF

GIFは、アニメーションに対応している点が最大の特徴です。

色数は256色と少ないものの、その分容量が軽く、圧縮しても画質が劣化しにくいという特徴があります。WebP登場前は、アニメーションを使いたいときは基本的にGIFが選ばれていました。

WebPへの変換方法

画像形式をWebPに変換するためには、下記のようなツールを使います。

• WebPShop
• WebP Converter for Media
• Squoosh
• サルワカ道具箱

それぞれの特徴や使い方について説明します。

WebPShop

WebShopとは、Google公式のPhotoshop用プラグインです。WebShopによるWebPへの変換方法は次の通りです。

1. GitHubからWebShopのプラグインをダウンロードする
2. 「bin」フォルダを開き、「Mac」または「Windows」フォルダを開く
3. Macなら「WebPShop.plugin」、Windowsなら「WebPShop.8bi」と書かれた項目をPhotoshop内の「Plug-ins」のなかにコピペする

上記の手順を踏むことで、Photoshopで作成した画像をWebP形式で保存できるようになります。

WebP Converter for Media

WebP Converter for Mediaは、WordPress用のプラグインです。既存の画像も一括変換できるので、WordPressを使ってWebサイトを運営している人は使ってみると良いでしょう。

1. 管理画面から「WebP Converter for Media」と検索してインストールする
2. プラグインを有効化して画像をアップロードするとWebPに変換される

Webサイト内の画像をすべてWebPに変換することで、表示速度が早くなりSEO的にも有利に働きます。

Squoosh

Squooshとは、Googleが開発した画像形式を変換するためのWebアプリケーションです。下記の手順で使用します。

1. Squooshをブラウザで開く
2. 圧縮したい画像をドラッグ&ドロップする
3. 編集画面の「Edit」からWebP形式を選択する
4. 変換後の画像を確認してダウンロードする

Squooshでは、変換後の画像を確認しながら圧縮率を自由に調整できます。サイズや色調など細かい部分までこだわりたい人におすすめです。

サルワカ道具箱

サルワカ道具箱は、Web上で使える便利なツール集です。ツールの1つにWebP画像へ変換できるものがあります。

1. サルワカ道具箱をブラウザで開く
2. 「WebP画像へ変換」を選択する
3. 変換したい画像をドラッグ&ドロップする
4. 変換後の画像をダウンロードする

画質や圧縮率など細かい設定はできないものの、複数の画像を一括変換することができます。

WebPで画像を保存する方法

WebPで画像を保存する方法には、以下のようなものがあります。

• JPEGやPNGでダウンロードした画像を変換ツールや画像編集ソフトでWebPに変換する
• Google Chromeの拡張機能を使う

中でも、Google Chromeの拡張機能である「Save image as Type」の利用が最も手軽でおすすめです。

以下の手順で簡単に利用できます。

1. Chrome ウェブストアから「Save image as Type」をインストール
   
2. 保存したい画像の上で右クリック
   
   
3. 追加されたメニューから「WebPとして保存」をクリック
   
   

また、上記の拡張機能は、JPEGやPNGで画像を保存する際にも役立ちます。

WebPに対応している画像編集ツール

WebPに対応している主な画像編集ツールは、以下3つです。

• PhotoShop
• ペイント
• Canva

無料で使えるツールもあるため、それぞれのメリットを理解して自社に合うものをみつけましょう。

それぞれ詳しく解説していきます。

PhotoShop

PhotoShopは、Adobeが提供する画像編集ツールです。

有料ですが、PhotoShopがあれば他のデザインツールが必要ないと言えるほど、豊富な機能が搭載されています。7日間の無料トライアルが用意されているため、本格的な画像編集を行う可能性がある方は一度試してみましょう。

ペイント

ペイントは、Windowsにデフォルトで搭載されている画像編集ソフトです。

無料で使え、簡単な作図程度であればスムーズにこなせます。ただし、Windows専用アプリであるため、Macユーザーは利用できない点に注意しましょう。

Canva

Canvaは無料で使えるノンデザイナー向けのデザインツールです。

豊富なテンプレートやアシスト機能により、誰でも直感的に画像編集が行なえます。また無料版でも十分使えますが、有料版に切り替えると機能の幅を広げられます。

ただし、WebPの編集は可能ですが、画像をWebPで吐き出すことができません。最終的にWebPをJPEGやPNGに変換することが前提である場合にのみ利用しましょう。

まとめ：Webサイトの画像をWebPに変換しよう

WebPとは、Googleが開発した画像形式です。画質を保ったまま画像を軽量化することで、SEO的にも有利に働く画像形式として注目を集めています。

JPEG・PNG・GIFといった従来の画像形式の特徴を併せ持ち、透過処理やアニメーションにも対応しています。現在はほぼすべてのブラウザに対応しているので、SEO対策の一環としてWebP画像を導入すると良いでしょう。

弊社のSEOサービス「ランクエスト」では、お客様ごとに専任のコンサルタントがつき、戦略立案からコンテンツ制作、効果測定まで、すべて対応いたします。SEO対策にお悩みの方は、お気軽にご相談ください。