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

WebPとは？

WebP（ウェッピー）とは、Googleが開発した次世代の画像形式（画像フォーマットとも言う）です。拡張子の表記は「.webp」。

WebPは、従来のJPEG・PNG・GIFといった画像形式と比較して高画質かつ高圧縮率であるという特徴があります。

Webサイトの表示速度がユーザー体験（UX）や成約率に大きく関わっているという調査がGoogleやAmazonの調査が発表されたことから、サイズが大きくなりがちな画像ファイルの軽量化という観点から注目が集まっています。

参考：Google「モバイルサイトの読み込みに3秒以上かかる場合、訪問したユーザーの53%が閲覧を止めて離脱する」

簡単！Web上で『WebP』形式へ変換する方法

Google公式「Squoosh」を使用する

「Squoosh（スクーシュ）」は、Googleが公式で出している画像形式の変換・圧縮ができるツールです。インストールして使うこともできますし、Web上でそのまま画像をアップロードし、WebPに変換することもできます。また、SquooshはWebPのみならず、PNGやMozJPEGなど別の画像形式への変換も可能です。

Squoosh（スクーシュ）

jpg → WebPへの変換

jpgをWebPに変換する場合は「WebP変換ツール」を活用するのが便利です。「WebP変換ツール」は、jpgをWebPに変換したり、WebPをjpgに変換できたりするツールです。ファイルを選択することで、簡単かつ無料でWebPに変換することができます。ただし、対応しているブラウザがGoogle Chrome（クローム）のみなので、必ずクロームから変換を行うようにしましょう。

WebP変換ツール

png → WebPへの変換

pngをWebPに変換する場合は「Convertio」の活用がおすすめです。「Convertio」は、無料でpngからWebPに変換できるツールになります。Google Drive（ドライブ）から画像を選択したり、ドラッグ＆ドロップでアップロードできたりします。pngを変換したい場合は、「Convertio」を使いましょう。

Convertio

gif → WebPへの変換

gifをWebPに変換する場合は「anyconv」がおすすめです。「anyconv」は、わずか数秒でgifをWebPに変換できるツールであり、もちろん無料で使えます。gifをWebPに変換できるツールは少ないので、変換したい場合は「anyconv」を使いましょう。 anyconv

『WebP』ファイルをまとめて変換する方法

サルワカ道具箱を使った一括変換

「サルワカ道具箱」は、png、jpeg、gifをWebPに変換できるツールです。また、変換したWebPファイルをZipファイルで一括ダウンロードできるので、他のツールのように都度ダウンロードする必要はありません。加えて、変換した内容はサーバーにも送信されないため、第三者に画像の内容を見られてしまう危険性がないこともメリットです。

サルワカ道具箱

コマンドラインツールを使用

Googleが提供しているコマンドツール（Downloading and Installing WebP）を利用することでもWebPを変換することができます。Linux、Windows、macOS用で分かれており、コマンドツールをインストールすることでまとめてWebPをファイル変換できるようになります。インストールした後は、コマンドツール上で変換したいファイルを選択するだけです。

Photoshopのプラグインを使用

Photoshopはバージョン23.2以上の場合は、既にWebPのファイル形式が完全にサポートされるようになっています。

もし、それ以前のバージョンのPhotoshopを使用したい場合には、「WebShop」と呼ばれるプラグインを使う方法があります。こちらをPhotoshopにインストールすることでWebPに変換することが可能です。PhotoshopでWebShopをインストールした後に、PNGやJPEGなど変更したい形式の画像を選択し、WebPに変換します。

また、PhotoshopでWebPを書き出す際も、フォーマットを「WebShop」と選択すれば、WebPファイルをそのまま書き出すことが可能です。

Adobe公式：WebShop プラグインの使い方

WordPressの場合は「EWWW Image Optimizer」プラグインがオススメ

使用しているCMSがWordPressの場合、EWWWというプラグインを使用することで一括変換することができます。導入手順は以下になります。

1. WordPress管理画面のプラグイン【新規追加】で「EWWW Image Optimizer」をインストール
2. プラグイン「EWWW Image Optimizer」を有効化
3. 設定で「サイトの高速化」と「無料モードを続ける」を選択
4. 次に「メタデータを削除」「遅延読み込み」「Webp変換」を選択し保存
5. WordPress管理画面のメディアにて【一括最適化】を実行
6. 実行したのち、.htaccessファイルにWebpコードを記載

EWWW Image Optimizer公式ダウンロードページ

WebPと他の画像形式との比較

従来の画像形式と比較して、WebPにさまざまなメリットがあります。ここからは、各画像形式とWebPとの比較をしながら、解説を行っていきます。各画像形式ごとの特徴や違いを一覧形式で表にまとめました。

画像形式	色数	圧縮方法	アニメーション可否	透過
WebP	1670万色以上	非可逆圧縮・可逆圧縮	可	◯
JPEG	1670万色以上	非可逆圧縮	否	✕
PNG	256色〜1670万色以上	可逆圧縮	可	◯
GIF	256色	可逆圧縮	可否	△

PNGの特徴

PNGは、保存を繰り返しても画像の質（画質）が劣化しないことが特徴です。しかし、保存を繰り返すたびに容量が重くなる点には注意しましょう。また、アニメーションにも対応していないので、アニメーションを使いたい場合はWebPにすると良いでしょう。

JPEGの特徴

JPEGは、表現できる色の数が多いことが特徴です。そのため、写真を保存する際に使うケースが多くなっています。また、JPEG自体も比較的軽い画像形式であるため、Webサイトに使っても問題はありません。しかし、やはりWebPのほうが軽いケースが多く、透過処理もできない点には注意が必要です。

GIFの特徴

GIF（ジフ）は、アニメーションを利用できることが特徴です。ただし、表現できる色の数が少ないため、使う色によっては画像が粗くなってしまいます。また、アニメーションを圧縮する際はGIFよりもWebPのほうが軽いことも特徴です。

WebPはなぜ注目されているのか

WebPが注目されるようになったのは、前述のように、Webサイトの表示スピードが離脱率・CVRに影響することが知られるようになったことが背景にあります。

そこで、ファイルサイズが重くなりがちな画像ファイルについて、高い解像度を保ったまま、容量を下げる必要性からGoogleによって開発されたのが「WebP」という画像形式です。

WebPが注目される理由は、大きく以下の3つになります。

• 高画質を保ちつつ高圧縮率を実現
• Googleから推奨されている
• ほぼすべてのブラウザで対応が完了

それぞれ順番に解説します。

高画質を保ちつつ高圧縮率を実現

WebPは、高画質を保ちつつ高圧縮率を実現できます。通常は圧縮率を高めてしまうと画質が落ちてしまうものですが、その点WebPは高画質を保てるため、ブランディングやユーザー体験（UX）を損なうことなく、Webマーケティング的な観点でも利用が広がっています。

Googleから推奨されている

WebPは、そもそもGoogleが開発した画像の拡張子です。ページスピードを計測したり改善できたりするツールの「Page Speed Insight」でも、表示速度が遅い場合は、次世代画像フォーマット（WebP）を使うことが推奨されています。ページの表示スピードは、Googleから正式に検索結果のランキングアルゴリズムに影響があると明言されているため、SEOに力を入れている企業や代理店、Webマーケターなどから注目されています。

ほぼ全てのブラウザで対応が完了

2022年12月時点で、ほぼ全てのブラウザで対応が完了しています。

登場した当初こそ、Safariをはじめ、対応していない（表示されない）Webブラウザもいくつかありましたが、現在は対応が進み、ほぼ全てのブラウザで対応が完了されています。

現状、WebPを使用する上での環境的な障害はほぼないと言って良い状態なので、既存の画像をWebP化していくと良いでしょう。

ただし、サイト訪問者に「Internet Explorer」や「iOS13以前のSafari」などのレガシーブラウザのユーザーが多い場合には、WebPと従来の画像をブラウザで出し分けるといった対応をしておくことを推奨します。

WebPを使用する4つのメリット

メリット①：画像サイズの軽量化

2022年12月時点で、ほぼ全てのブラウザで対応が完了しています。

登場した当初こそ、Safariをはじめ、対応していない（表示されない）Webブラウザもいくつかありましたが、現在は対応が進み、ほぼ全てのブラウザで対応が完了されています。

現状、WebPを使用する上での環境的な障害はほぼないと言って良い状態なので、既存の画像をWebP化していくと良いでしょう。

ただし、サイト訪問者に「Internet Explorer」や「iOS13以前のSafari」などのレガシーブラウザのユーザーが多い場合には、WebPと従来の画像をブラウザで出し分けるといった対応をしておくことを推奨します。

メリット②：表示スピードの高速化

WebPを使用することで、表示スピードを高速化できます。表示スピードはGoogleが重要視している項目の1つであり、表示スピードが速いほどGoogleからの評価も高まります。現状、WebP以上に表示速度と画質・対応ブラウザ数を兼ね備えているフォーマットはないため、表示スピードを上げたい場合はWebPがおすすめです。

メリット③：SEO対策に好影響

WebPを使うことが、そのままSEOの検索順位が上がることに繋がるわけではありません。しかし、ページスピードが高速化したり、ユーザー体験が向上したりすることにより、副次的にSEOにメリットをもたらします。

コンテンツ内に画像を使うのであれば、SEOにメリットのあるWebPを使ったほうが良いのは言うまでもありません。現状のSEOの検索順位が伸び悩んでいる場合は、既存の画像もWebPに変更していきましょう。

メリット④：『Core Web Vitals』=『UX向上』にプラスの影響

Core Web Vitalsとは、UXを高めるために必要な指標のことで、Googleが重要視している項目の1つです。Core Web Vitalsは、下記3つの指標が基になります。

• LCP（Largest Contentful Paint ）：ページの読み込み時間
• FID（First Input Delay）：初回アクションにおけるブラウザの応答時間
• CLS（Cumulative Layout Shift ）：レイアウトがどの程度ずれるか

上記のCore Web Vitalsにおいて、WebPはプラスの影響をもたらします。なぜなら、WebPは他の画像フォーマットよりも軽量であるため、ページの読み込み時間が早くなるためです。

Core Web Vitalsを満たしているかはGoogleが重要視しているため、SEO評価を高めたい場合はWebPを使うようにしましょう。

コアウェブバイタル（Core Web Vitals）について、詳しく知りたい方はこちら

WebPを使用する3つのデメリット

デメリット①：WebP対応している画像編集ソフトが限られる

2022年12月時点で、WebPに対応している画像編集ソフトは限られるというデメリットがあります。WebPに対応している代表的な画像編集ソフトとしてPhotoshopが挙げられますが、2022年2月にリリースされた「バージョン23.2」以降でないと対応していません。そのため、バージョンは23.2にアップデートする必要があります。また、同様のAdobe製品であるIllustrator（イラストレーター）はPhotoshopには対応していません。

WebPに対応している他のツールでは「Paint.net （ペイントドットネット）」というツールが挙げられ、こちらは無料の画像編集ソフトとなっています。今後はWebPに対応しているソフトが増えてくる可能性もありますが、現状でどのツールを使えば良いか分からない場合は、上記2つのどちらかのツールを使うと良いでしょう。

デメリット②：WebP形式への変換が手間

2つ目のデメリットとして、Web制作の現場的な視点で、WebP形式への変換が手間であることが挙げられます。通常、pngやjpgであれば、画像サイトからそのままの形式でダウンロードできます。しかし、2022年12月時点では、WebPを編集する際はPhotoshopやPaint.netなどのツールを活用する必要があります。

メジャーなツールに関しては、バージョンアップでWebP形式への対応が進んでいます。ただ、何らかの理由でWebPに対応していないツールを利用する場合、一度WebP以外の別の形式で画像を編集し、その上でWebPに変換する手間が生じる、というのはデメリットだと言えるでしょう。

デメリット③：非対応のブラウザがある

2018年に、PCの主要ブラウザである「Microsoft Edge」と「Firefox」が、相次いでWebPに対応することを発表しました。さらに、2020年にAppleのiOS14も対応することになりました。

しかし、Internet ExplorerやiOS13以前のSafariIEは未だに非対応でありすので、その場合は条件分岐で出しわけをする必要があります。そのため、Webサイトの訪問者に古いブラウザを使っているユーザーが多い場合は注意が必要です。

WebPより高圧縮率！『AVIF』とは？

ここまで、WebPの特徴などを解説してきましたが、WebPよりも圧縮率の高い「AVIF」はご存知でしょうか。AVIF（AV1 Image File Format）とは、動画圧縮形式の1つであるAV1と同様の方法で画像を圧縮し、HEIF形式にて保存できるファイル形式のことです。

圧縮率が高いことに加えて、透過処理ができたり、gif形式でアニメーションを作成したりできます。デメリットとしては、対応しているブラウザが少ないことです。

しかし、AVIFはMacやWindows、Androidなどのソフトウェアとの互換性に優れており、利用されるシーンは今後拡大される見込みです。加えて、HDRへの対応やアニメーション画像の作成ができるようになることも期待されています。

2022年12月時点ではWebPのほうが注目されているものの、AVIFは将来性が高く主流になる可能性もあるため、常にAVIFの動向も追っておくようにしましょう。

まとめ

今回は、WebPについて解説しました。WebPは次世代の画像フォーマットであり、表示スピードが高速化したり、SEOに好影響を与えたりするメリットがあります。2022年12月時点では、ほぼすべてのブラウザも対応を完了しています。少しでも検索順位を上げたり、ユーザー満足度を高めたりしたい場合はWebPを使うようにしましょう。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善する「WEBサイト表示スピード高速化サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

WEBサイト表示スピード高速化サービス資料 無料ダウンロードする

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。

成果報酬型WordPressサイトの高速化サービス　『HP爆速くん for WP』の詳細はコチラ