※2026年10月更新：WebPファイルの開き方・JPGへの変換方法、WordPressでのアップロードについて追記しました

先生～！PageSpeed Insightsで「次世代フォーマットで画像を配信」って言われてるんですけど、どうすればいいですか～？

それはWebP（ウェッピー）という画像形式に変換すれば解決するぞよ。
今日は、WebPについてと変換方法を説明するのじゃ。

よろしくお願いします～！

WebP（ウェッピー）とは？

WebP（ウェッピー）とは、Googleが開発した画像形式です。ファイルの拡張子は「.webp」です。

特徴は、画質をほとんど落とさずに、ファイルサイズを大幅に小さくできること。
JPEGと比べると25～30%くらい軽くなると言われています。

WebPの特徴まとめ

・JPEGより25～30%軽い
・PNGのような透過（透明）も対応
・GIFのようなアニメーションも対応
・つまり、JPEG・PNG・GIFの良いとこ取り！

PageSpeed Insightsで「次世代フォーマットで画像を配信してください」と表示されるのは、このWebPを使ってね！というGoogleからのメッセージなのです。
※PageSpeed Insightsのバージョンによっては、「画像配信を改善する」などの項目名で表示されることもあります。

WebPファイルの開き方・JPGへの変換方法

先生、ネットで保存した画像が「.webp」になってて、うまく開けなかったり、使えなかったりするんですけど…

最近は多くのサイトがWebPで画像を表示しておるから、保存するとWebPになることが多いのじゃ。開き方とJPGへの変換方法を説明するぞよ。

なぜ保存した画像がWebPになるの？

表示を速くするために、多くのWebサイトが画像をWebPで表示しています。
そのため、ブラウザで画像を保存すると、サイトで表示されていたWebPのまま保存されるのです。

WebPは比較的新しい形式なので、古いソフトや一部のアプリでは開けなかったり、アップロードできなかったりすることがあります。

パソコンでWebPを開く方法

WebPの開き方

Windows
・最近のWindowsであれば、標準の「フォト」や「ペイント」で開けます

Mac
・最近のmacOSであれば、標準の「プレビュー」で開けます

どちらでも使える方法
・ChromeやEdge、Safariなどのブラウザに、ファイルをドラッグ＆ドロップすると表示できます

WebPをJPGやPNGに変換する方法

WebPに対応していないソフトで使いたい場合は、JPGやPNGに変換して保存し直しましょう。

JPG・PNGへの変換方法

Windows（ペイント）
WebPをペイントで開き、「ファイル」→「名前を付けて保存」で「JPEG画像」や「PNG画像」を選んで保存します。

Mac（プレビュー）
WebPをプレビューで開き、「ファイル」→「書き出す」で、フォーマットを「JPEG」や「PNG」にして保存します。

オンラインツール
WebPをJPGやPNGに変換できる無料のオンラインツールもあります。たくさんの画像をまとめて変換したいときに便利です。

※ネットで保存した画像を使う場合は、著作権に注意しましょう。他の人が作った画像を、許可なく自分のサイトや資料に使うことはできません。

WebPって今使っても大丈夫？（ブラウザ対応状況）

でも先生、新しい形式って古いブラウザで表示されなかったりしませんか？

心配無用じゃ！現在、WebP対応ブラウザは97%以上のシェアを占めておるぞよ。

主要ブラウザの対応状況はこちらです。

WebP対応ブラウザ

・Google Chrome：対応済み ✓
・Safari：2020年9月～対応済み ✓
・Firefox：2019年1月～対応済み ✓
・Edge：対応済み ✓
・Internet Explorer：非対応 ✗（※サポート終了済み）

IE（Internet Explorer）だけ非対応ですが、2022年6月にサポート終了しているため、今からWebサイトを作る場合は気にしなくてOKです。

最新の対応状況はCan I use（WebP）で確認できます。

WebPへの変換方法

WebPへの変換はとても簡単です。
ここでは2つの方法を紹介します。

方法1：オンラインツールで変換する

一番手軽なのは、オンラインの変換ツールを使う方法です。

サルワカさんのWebP変換ツール ▶

使い方はとても簡単で、画像をドラッグ＆ドロップするだけ！
複数の画像を一括で変換することもできます。

他にも、Googleが提供しているSquooshというツールもあります。
こちらは圧縮率の調整など細かい設定ができるので、こだわりたい方におすすめです。

WordPressは、バージョン5.8からWebPの画像をそのままメディアにアップロードできるようになっています。オンラインツールで変換した画像は、そのままアップロードして使えます。

方法2：WordPressプラグインで自動変換する

WordPressでサイトを運営している場合は、プラグインを使うと便利です。
画像をアップロードするだけで自動的にWebPに変換してくれます。

EWWW Image Optimizer ▶

このプラグインを導入すると、

EWWW Image Optimizerでできること

・新しくアップロードする画像を自動でWebPに変換
・すでにアップロード済みの画像も一括変換
・対応していないブラウザには自動でJPEG/PNGを表示

という感じで、面倒な作業を全部自動でやってくれます。

古いブラウザにも対応したい場合（pictureタグ）

念のため、WebP非対応のブラウザにも対応しておきたい場合はどうすればいいですか？

その場合は、HTMLのpictureタグを使うのじゃ。

pictureタグを使うと、「WebPが表示できるブラウザにはWebPを、できないブラウザにはJPEGを表示する」という出し分けができます。

pictureタグの書き方

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="画像の説明">
</picture>

このように書くと、

1. まずWebP（image.webp）を読み込もうとする
2. WebPが表示できない場合はJPEG（image.jpg）を表示する

という動作になります。

ただし、先ほど説明した通り現在はほぼすべてのブラウザがWebPに対応しているため、新規で作るサイトであればpictureタグなしでWebPを直接使っても問題ありません。

WordPressのEWWW Image Optimizerを使っている場合は、この出し分けも自動でやってくれるので、特に意識する必要はありません。

さらに軽い「AVIF」という形式も

最近は、WebPよりもさらにファイルサイズを小さくできるAVIF（エーブイアイエフ）という画像形式も広がってきています。WordPressも、バージョン6.5からAVIFのアップロードに対応しています。

ただ、変換に対応しているツールや環境はまだWebPほど多くないので、まずはWebPを使えば十分です。

まとめ

この記事のポイント

・WebPはGoogleが開発した軽量な画像形式
・JPEGより25～30%軽くなる
・保存した.webpが開けないときは、フォト・プレビュー・ブラウザで開ける
・JPGに変換したいときは、ペイントやプレビューで保存し直す
・現在、97%以上のブラウザが対応済み
・変換はオンラインツールで簡単にできる
・WordPressならEWWW Image Optimizerがおすすめ

さっそくWebPに変換してPageSpeedのスコア上げてきます～！

サイトの表示速度が上がるとSEOにも良い影響があるからのう。ぜひ活用するのじゃ。

「サイトの画像をまとめてWebPにしたい」「PageSpeed Insightsの指摘をどう直せばいいかわからない」という場合は、あそびラボで表示速度の改善を代行できます。
→ サイトの表示速度・画像の最適化のご相談はこちら（お問い合わせ）

サイトの更新やトラブル対応をまとめて任せたい方は「HPの保守管理」もご覧ください。