2026年版WebP画像最適化ガイド

by

WebP画像フォーマットでウェブサイトを高速化し、ユーザー体験を向上させるための実践ガイド。

現代のウェブサイトにおいて、画像の最適化はパフォーマンス向上に不可欠です。WebPは、JPEGやPNGといった従来のフォーマットよりも高い圧縮率と品質を両立し、ウェブサイトの読み込み速度を劇的に改善します。この記事では、既存の画像をWebPに変換し、効果的に活用するための具体的な手順とヒントを詳しく解説します。

07まとめ：WebPで高速なウェブ体験を

WebPとは？そのメリットとデメリット

WebPとは？そのメリットとデメリット

WebPはGoogleが開発した画像フォーマットで、ウェブサイトの高速化を目的としています。JPEGやPNGといった従来のフォーマットと比較して、同等以上の画質を保ちながらファイルサイズを大幅に削減できる点が最大の特徴です。これにより、ページの読み込み速度が向上し、ユーザーエクスペリエンスの改善やSEO評価の向上に貢献します。

WebPの導入は、ウェブサイトのパフォーマンスを向上させる上で非常に効果的な手段となります。

2026年現在、主要なモダンブラウザのほとんどがWebPをサポートしており、広く普及しています。しかし、一部の古いブラウザや特定の環境ではまだサポートされていない場合があるため、適切なフォールバック戦略が必要です。

WebPの主なメリット

WebPの最大の利点は、その優れた圧縮効率にあります。可逆圧縮（ロスレス）ではPNGより約26%、非可逆圧縮（ロッシー）ではJPEGより約25〜34%もファイルサイズを小さくできます。これは、特に画像が多いウェブページにおいて、読み込み時間の短縮に直結します。

さらに、WebPは透過（アルファチャンネル）とアニメーション（GIFの代替）の両方をサポートしており、様々な種類の画像を一つのフォーマットで扱うことができます。これにより、開発者は複数の画像フォーマットを管理する手間を省き、効率的な画像配信を実現できます。

WebPの考慮すべき点

一方で、WebPにはいくつかの考慮すべき点もあります。最も重要なのは、古いブラウザや一部の画像編集ソフトウェアがWebPをサポートしていない可能性があることです。このため、WebPに対応していないユーザー向けに、JPEGやPNGなどの代替画像を準備する「フォールバック」の仕組みが不可欠になります。

また、WebPへの変換には専用のツールが必要であり、既存の画像を大量に変換する場合は、ある程度の作業コストが発生します。しかし、一度変換してしまえば、長期的にウェブサイトのパフォーマンス向上に寄与するため、初期投資としては十分に価値があると言えるでしょう。

WebP変換の準備：必要なツール

WebP変換の準備：必要なツール

WebPへの変換方法はいくつかありますが、ここでは最も一般的で柔軟性の高いコマンドラインツールと、手軽に使えるオンラインツールについて紹介します。大量の画像を効率的に変換するには、コマンドラインツールが最適です。

コマンドラインツール：cwebp

Googleが提供するlibwebpパッケージに含まれるcwebpは、JPEG、PNG、TIFFなどの画像をWebP形式に変換するための公式ツールです。このツールは、品質設定、圧縮方式、サイズ変更など、詳細なオプションを指定できるため、高度な最適化が可能です。

macOSではHomebrew、Ubuntu/Debianではapt、Windowsではパッケージマネージャーや公式ダウンロードからインストールできます。インストール方法は各OSによって異なりますが、基本的には数分で完了します。

cwebpのインストール方法（例：macOS）

macOSユーザーの場合、Homebrewを使えば簡単にlibwebpをインストールできます。ターミナルを開き、以下のコマンドを実行してください。

コード解説: cwebpのインストールコマンド

このコマンドは、Homebrewパッケージマネージャーを使用してlibwebpライブラリをインストールします。このライブラリにはcwebpツールが含まれています。

brew install webp

インストールが完了したら、cwebp -versionと入力して、正しくインストールされているか確認してください。

オンライン変換ツール

コマンドラインに抵抗がある方や、少数の画像を素早く変換したい場合は、オンラインツールが便利です。SquooshやConvertioなどが有名です。これらのツールはブラウザ上で動作し、ファイルをアップロードするだけで簡単にWebPに変換できます。ただし、大量のファイルを一括処理するのには向いていません。

コマンドラインツールcwebpによる変換

コマンドラインツールcwebpによる変換

ここでは、cwebpコマンドを使って画像をWebPに変換する具体的な方法を解説します。様々なオプションを組み合わせることで、画質とファイルサイズの最適なバランスを見つけることができます。

基本的な変換コマンド

最もシンプルな変換コマンドは以下の通りです。入力ファイルと出力ファイルを指定するだけです。デフォルトでは、品質設定は75（JPEGに近い）になります。

コード解説: 基本的なWebP変換

このコマンドは、input.jpgをWebP形式に変換し、output.webpとして保存します。品質はデフォルトの75です。

cwebp input.jpg -o output.webp

品質を指定した変換（-qオプション）

WebPの品質は-qオプションで0から100の範囲で指定できます。数値が大きいほど高画質になりますが、ファイルサイズも大きくなります。一般的には、品質80〜85程度が視覚的な劣化が少なく、ファイルサイズも十分に削減できるバランスの良い設定とされています。

コード解説: 品質80でWebPに変換

このコマンドは、JPEG画像を品質80でWebPに変換します。ウェブサイトの一般的な用途では推奨される品質設定です。

cwebp -q 80 input.jpg -o output_q80.webp

可逆圧縮（ロスレス）での変換（-losslessオプション）

PNGのような透過画像を品質を損なわずに変換したい場合は、-losslessオプションを使用します。これにより、元の画像と完全に同じピクセルデータを持つWebP画像が生成されますが、非可逆圧縮よりもファイルサイズは大きくなります。

コード解説: 可逆圧縮でWebPに変換

透明度を持つPNG画像などを、画質を一切損なうことなくWebPに変換する際に使用します。

cwebp -lossless input.png -o output_lossless.webp

複数の画像をまとめて変換する

大量の画像を変換する場合、シェルスクリプトやバッチファイルを使うと効率的です。例えば、カレントディレクトリ内のすべてのJPGファイルをWebPに変換するBashスクリプトは以下のようになります。

コード解説: 複数のJPGファイルをWebPに一括変換するBashスクリプト

このスクリプトは、現在のディレクトリ内のすべての.jpgファイルを検索し、それぞれを品質80のWebPファイルに変換してwebp_imagesディレクトリに保存します。

mkdir -p webp_images
for file in *.jpg; do
    filename="${file%.*}"
    cwebp -q 80 "$file" -o "webp_images/${filename}.webp"
done

このスクリプトは、新しいwebp_imagesディレクトリを作成し、そこに変換されたWebPファイルを保存します。元の画像ファイルはそのまま残ります。

WebPをウェブサイトで利用する方法

WebPをウェブサイトで利用する方法

WebP画像を生成したら、次はそれをウェブサイトで利用する方法です。ブラウザのWebPサポート状況に応じて、最適な画像を配信するためのHTMLマークアップやサーバー設定について解説します。

HTMLの<picture>要素を利用する

<picture>要素は、異なるフォーマットや解像度の画像をブラウザに提示し、ブラウザが最適なものを選択できるようにするためのHTML5の機能です。これにより、WebPをサポートするブラウザにはWebP画像を、サポートしないブラウザには従来の画像（JPEGやPNG）を配信できます。

コード解説: <picture>要素を使用したWebPの表示

ブラウザは<source type="image/webp">タグを優先的に読み込みます。WebP非対応の場合、<img>タグのsrc属性に指定された画像をフォールバックとして表示します。

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="代替テキスト" width="800" height="600" loading="lazy">
</picture>

この<picture>要素の利用は、WebPを安全かつ効果的に導入するための最も推奨される方法です。

サーバーサイドでのコンテンツネゴシエーション

もう一つの方法は、サーバーサイドでユーザーエージェントのAcceptヘッダーをチェックし、WebPをサポートしているブラウザにはWebP画像を、そうでないブラウザには元の画像を動的に配信する方法です。これは、既存のHTMLマークアップを変更することなくWebPを導入できるため、大規模なサイトでの移行に特に有効です。

Apacheサーバーでは.htaccessファイル、Nginxでは設定ファイルにRewriteRuleを追加することで実現できます。以下はApacheの.htaccessの例です。

コード解説: Apacheの.htaccess設定例

この設定は、ブラウザがimage/webpをAcceptヘッダーに含み、かつWebPファイルが存在する場合に、対応するWebPファイルを配信します。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_URI}.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept
  <FilesMatch "\.(webp)$">
    Header set Content-Type image/webp
  </FilesMatch>
</IfModule>

この設定を行うには、サーバーのモジュールが有効になっている必要があります。また、既存の画像ファイルと同じパスに.webp拡張子のWebP画像を配置する必要があります。

WordPressでのWebP導入

WordPressでのWebP導入

WordPressサイトでWebPを導入する場合、プラグインを利用するのが最も手軽で一般的な方法です。多くのプラグインが、画像の自動変換から配信までを処理してくれます。

おすすめのWordPressプラグイン

WordPressにはWebP対応を簡単にするためのプラグインが多数存在します。いくつか人気のあるプラグインを紹介します。

  • Imagify: 画像をWebPに変換し、コンテンツデリバリーネットワーク（CDN）経由で配信する機能も持ちます。自動最適化が強力です。
  • Smush Pro: 画像圧縮と最適化の定番プラグイン。Pro版ではWebP変換と配信に対応しています。
  • WebP Express: 既存の画像をWebPに変換し、<picture>タグまたはコンテンツネゴシエーションで配信します。設定が比較的細かくできます。
  • EWWW Image Optimizer: 画像の圧縮とWebPへの変換をサポートし、サーバー上で自動的に処理します。

これらのプラグインは、通常、画像のアップロード時に自動的にWebPバージョンを作成し、ブラウザがWebPをサポートしているかどうかに応じて適切な画像を配信するように設定できます。

プラグイン導入のステップ（例：WebP Express）

ここでは、WebP Expressを例に、一般的なプラグイン導入のステップを説明します。

  1. プラグインのインストール: WordPress管理画面から「プラグイン」→「新規追加」を選択し、「WebP Express」を検索してインストール、有効化します。
  2. 設定の確認: 「設定」→「WebP Express」に移動し、設定画面を開きます。ここで、変換方式（cwebp、GD、Imagickなど）や品質、そして配信方式（<picture>タグか.htaccessか）を選択します。
  3. 既存画像の変換: 設定を保存した後、通常は「一括変換」のようなオプションがあります。これを実行すると、メディアライブラリ内の既存の画像がWebP形式に変換されます。
  4. 動作確認: ウェブサイトをブラウザで開き、開発者ツール（F12）のネットワークタブで画像の形式がWebPになっていることを確認します。

プラグインによって細部の設定は異なりますが、基本的な流れは共通しています。ご自身のサイト環境や要件に合わせて最適なプラグインを選びましょう。

WebP導入時の注意点とフォールバック

WebPは非常に優れたフォーマットですが、導入にあたってはいくつかの注意点があります。特に、すべてのブラウザがWebPをサポートしているわけではないため、フォールバック（代替）の仕組みを必ず導入することが重要です。

ブラウザのサポート状況

2026年現在、Google Chrome、Firefox、Edge、Safariなど、主要なモダンブラウザはほぼWebPをサポートしています。しかし、Internet Explorerなどの古いブラウザや、一部のマイナーなブラウザ、あるいは特定のOSバージョンではWebPが利用できない場合があります。これらのユーザーにも適切に画像を配信できるよう、常に代替手段を考慮する必要があります。

WebP導入の際は、必ずフォールバックを用意し、あらゆるユーザーに適切な画像が表示されるようにすることが重要です。

フォールバックの実装方法

前述の通り、HTMLの<picture>要素を使用するのが最も確実で推奨される方法です。<source type="image/webp">タグでWebP画像を、その後の<img>タグで従来の画像を記述することで、ブラウザが自動的に対応する画像を読み込みます。

注意: CSSのbackground-imageの場合

CSSのbackground-imageプロパティでWebPを使用する場合、<picture>要素のような自動フォールバックは利用できません。この場合は、ModernizrのようなJavaScriptライブラリを使ってブラウザのWebPサポートを検出し、動的にCSSクラスを適用して背景画像を切り替えるか、サーバーサイドでのコンテンツネゴシエーションを利用する必要があります。

JavaScriptを使った検出の例としては、以下のようにWebPをサポートしているかをチェックし、対応するクラスをHTML要素に追加する方法があります。

コード解説: JavaScriptによるWebPサポート検出

このスクリプトは、ブラウザがWebPをサポートしているか非同期で検出し、<html>要素に.webpまたは.no-webpクラスを追加します。これにより、CSSで背景画像を出し分けることが可能になります。

(function() {
    function checkWebP(callback) {
        var webP = new Image();
        webP.onload = webP.onerror = function () {
            callback(webP.height === 2);
        };
        webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/vgsAABx+QAA';
    }

    checkWebP(function (isSupported) {
        if (isSupported) {
            document.documentElement.classList.add('webp');
        } else {
            document.documentElement.classList.add('no-webp');
        }
    });
})();

このJavaScriptコードは、WebP形式の小さな画像データURIを読み込ませることで、ブラウザがWebPをサポートしているかを判定します。そして、判定結果に応じてHTML要素にクラスを追加し、CSSでそのクラスを利用してWebP対応の背景画像と非対応の背景画像を切り替えることができます。

ポイント：WebPと既存フォーマットの共存

WebPを導入する際は、既存のJPEGやPNG画像を削除せず、WebPバージョンと並行して保持することが重要です。これにより、WebP非対応環境でもウェブサイトが正常に機能し、ユーザーエクスペリエンスが損なわれることを防ぎます。サーバーサイドでのリライトルールやWordPressプラグインも、通常はこの共存を前提としています。

まとめ：WebPで高速なウェブ体験を

WebPは、ウェブサイトのパフォーマンスを飛躍的に向上させる可能性を秘めた画像フォーマットです。本記事で紹介した手順と注意点を参考に、ぜひご自身のウェブサイトにWebPを導入してみてください。ページの読み込み速度が向上することで、ユーザーの離脱率の低下やSEO評価の向上など、多くのメリットが期待できます。2026年現在、WebPはウェブ標準として広く受け入れられており、今後のウェブ開発においてその重要性はますます高まるでしょう。