WEB講座

WebPとは？今は普通に使って大丈夫？変換方法をご紹介

2026.01.30

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

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

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

WebP（ウェッピー）とは、Googleが開発した画像形式です。

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

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

PageSpeed Insightsで「次世代フォーマットで画像を配信してください」と表示されるのは、このWebPを使ってね！というGoogleからのメッセージなのです。

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

心配無用じゃ！2024年現在、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への変換はとても簡単です。
ここでは2つの方法を紹介します。

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

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

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

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

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

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

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

念のため、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を使っている場合は、この出し分けも自動でやってくれるので、特に意識する必要はありません。

この記事のポイント: ・WebPはGoogleが開発した軽量な画像形式
・JPEGより25～30%軽くなる
・2024年現在、97%以上のブラウザが対応済み
・変換はオンラインツールで簡単にできる
・WordPressならEWWW Image Optimizerがおすすめ

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

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