WebPに変換すると画質は落ちますか？

品質80以上であれば、肉眼ではJPEGとの違いはほぼわかりません。ロスレスモードを使えば完全に無劣化のまま、PNGより26%程度小さいファイルサイズが実現できます。

AVIFとWebPのどちらを使うべきですか？

2026年時点ではWebPの方がブラウザ対応率が高く（約98%）、安定して利用できます。AVIFはさらに高い圧縮率を実現しますが、Safari 16以降でないと対応していません。両方をタグで併用するのが理想です。

WordPressでWebPを使うにはどうすればよいですか？

WordPress 5.8以降はWebPアップロードに標準対応しています。EWWW Image Optimizerなどのプラグインを使えば、既存のJPEG/PNG画像も自動的にWebPに変換して配信できます。

OGP画像（SNSシェア用）もWebPにしてよいですか？

LINEなど一部のSNSがWebPに対応していない場合があるため、OGP画像はJPEGのままにしておくのが安全です。サイト本体の画像のみWebPに変換する運用がおすすめです。

WebP画像でサイト速度とSEOを改善する方法

最終更新: 2026年3月20日・読了時間: 約6分

Webページの総データ量のうち、画像が占める割合は約50%と言われています。画像をJPEG/PNGからWebPに変換するだけで、ページの読み込み時間を大幅に短縮でき、 Core Web Vitalsのスコア改善 → Google検索順位の向上が期待できます。この記事では、WebPの仕組みから導入手順、注意点までを網羅的に解説します。

WebPとは何か

WebP（ウェッピー）は、2010年にGoogleが開発したモダンな画像フォーマットです。 VP8ビデオコーデックの技術をベースにしており、ロッシー（非可逆）圧縮とロスレス（可逆）圧縮の両方に対応しています。2023年にSafariが正式対応したことで、全ての主要ブラウザで利用可能になりました。

フォーマット別の比較

指標	JPEG	PNG	WebP	AVIF
写真（500KB JPEG比）	500KB	〜1.5MB	〜350KB（-30%）	〜280KB（-44%）
透過サポート	非対応	対応	対応	対応
アニメーション	非対応	非対応	対応	対応
ブラウザ対応率	100%	100%	約98%	約92%

Core Web VitalsへのWebPの効果

Googleが検索ランキングに使用するCore Web Vitalsのうち、画像の最適化が特に影響するのは以下の指標です。

LCP（Largest Contentful Paint）

ページ内で最も大きなコンテンツ（多くの場合はヒーロー画像）の表示完了時間。画像をWebPに変換してファイルサイズを30%削減すると、LCPが0.5〜1.5秒改善されるケースがあります。 Googleは2.5秒以内を「良好」としています。

CLS（Cumulative Layout Shift）

画像にwidth/height属性を設定していない場合、読み込み後にレイアウトがずれるCLSの原因になります。 WebPへの変換時にサイズ情報を正しく設定することで、CLSの改善にもつながります。

WebP導入の3つの方法

tools24.jpで一括変換（最も簡単）

WebP変換ツールに画像をドロップするだけ。品質調整・リサイズも同時に行え、一括20枚まで対応。ブラウザ内処理なので画像データがサーバーに送信されることはありません。

ビルドツールで自動変換

Next.jsの<Image>コンポーネントはデフォルトでWebP配信に対応。 Viteではvite-plugin-image-optimizer、webpackではimage-minimizer-webpack-pluginで自動変換が可能です。

CDN/サーバーで自動変換

Cloudflare（Polish機能）、Vercel（Image Optimization）、AWS CloudFront（Lambda@Edge）など、 CDN側でリクエスト時にWebP変換を行う方法。ブラウザのAcceptヘッダーを見て自動的にフォーマットを切り替えます。

HTMLでのフォールバック設定

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明文" width="800" height="600"
       loading="lazy" decoding="async">
</picture>

ブラウザは上から順に対応フォーマットを確認し、最初に対応したものを使用します。非対応ブラウザでは最後の<img>（JPEG）が表示されます。

WebP導入時の注意点

品質設定 — 写真は品質75〜85が最適バランス。ロゴやテキスト画像はロスレスモードで。品質70以下はアーティファクトが目立ちます
OGP画像はJPEGのまま — LINE・Facebook等の一部SNSクローラーが WebPに対応していない可能性があるため、OGP用はJPEGを維持
メール内の画像もJPEG/PNG — メールクライアント（Outlook等）の WebP対応は不完全なため、HTMLメールの画像はJPEG/PNGが安全
width/heightを必ず指定 — CLS防止のため、<img>タグにはwidth/height属性を必ず設定

まとめ

WebPはファイルサイズを25〜35%削減し、Core Web Vitals（特にLCP）を改善する最も手軽な方法です。tools24.jpのWebP変換ツールを使えば、ブラウザ上で簡単に一括変換できます。まだWebPを導入していないサイトは、まずヒーロー画像やサムネイルなど表示頻度の高い画像から始めてみてください。