画像をWebPに変換する方法と、そうすべき理由

Google PageSpeed Insightsで計測して「次世代フォーマットでの画像の配信」という指摘を受けたことがあるなら、Googleが求めているのはまさにこれです。つまり、JPGやPNGの画像をWebPに変換すること。サイトの表示速度にもっとも効く施策のひとつであり、同時にいちばん導入しやすい施策でもあります。

なぜWebPに変換するのか

WebPはGoogleが開発し2010年に公開した、Web用に設計された画像形式です。JPGやPNGより新しい圧縮アルゴリズムを使っており、同じ見た目の品質で次の利点があります。

• JPGより25〜35%軽い（非可逆＝ロッシー圧縮の場合）
• PNGより20〜30%軽い（可逆＝ロスレス圧縮の場合）
• 透過（アルファチャンネル）に対応 — JPGにはない機能です
• アニメーションに対応 — PNGは標準では対応していません

効果は実際に出ます。1枚300 KBのJPG写真20枚（合計6 MB）でできたネットショップの商品ギャラリーは、見た目を保ったままWebPで4 MBほどになります。ページ全体で33%の軽量化です。Googleから見れば、LCPが速くなり、PageSpeedのスコアが上がり、順位にも良い影響が期待できるということになります。

WebPを使わないほうがいい場面

いまのWebでは最良の形式ですが、それでもWebPが向かない場面はあります。

• メールマガジン： OutlookやApple MailといったメールソフトのWebP対応はまちまちです。HTMLメールでは、JPGやPNGのほうが安全です。
• 印刷所での印刷：印刷会社や従来の印刷用ソフトはWebPを扱えません。印刷に回すファイルは高品質のJPGかPNGにしてください。
• 形式が制限されているサービス： YouTubeのサムネイルはWebPを受け付けません（JPGとPNGのみ）。古いシステムの入力フォームがJPGしか受け取らないこともあります。変換の前に、受け付けられる形式を確認してください。
• 誰でもパソコンで開ける必要があるファイル：ダウンロードした人がWindows標準のビューアーで開こうとしたとき、古いバージョンのWindowsではWebPが開けないことがあります。

方法1 — オンライン変換（最速・インストール不要）

数枚だけ変換したいとき、あるいは設定をいじらずに手早く済ませたいときは、オンラインの変換ツールがいちばん近道です。ImageToolsの変換ツールは、JPG・PNGなどをブラウザ内でそのままWebPに変換します。ファイルが外部のサーバーに送られることはありません。

1. 変換ツールを開きます。
2. 画像を選ぶか、アップロード欄にドラッグします。
3. 出力形式としてWebPを選びます。
4. 変換後の画像を1枚ずつ、または複数枚ならZIPでダウンロードします。

方法2 — WordPress（サイト全体を自動で）

WordPressのサイトでは、変換と配信を自動で行うプラグインを使うのがいちばん効率的です。画像を1枚ずつ手作業でやり直す必要がなくなります。

WordPress 6.1以降（標準の変換機能）

バージョン6.1以降のWordPressは、アップロード時に画像を自動でWebPへ変換します。条件は、サーバーがlibwebpライブラリに対応していることだけです（PHP 8以上の最近のサーバーならほぼ対応しています）。設定は不要で、WordPressがWebP版を生成し、ブラウザごとに適切な形式を自動で配信します。

有効かどうかは設定 → メディアを開き、WebP変換の項目があるか確認してください。見当たらない場合はサーバーが未対応なので、プラグインの導入を検討します。

プラグインを使う（旧バージョン、または細かく制御したい場合）

WordPressでWebP変換によく使われるプラグインは次のとおりです。

• ShortPixel Image Optimizer — アップロード時に新しい画像を変換し、既存のライブラリ全体を再処理する機能もあります。月100枚までは無料です。
• Imagify — 画面がわかりやすく、自動変換と一括最適化に対応。無料プランがあります。
• WebP Express — WebPに特化したプラグインで、変換とサーバー側のルール設定を自動で行います。

方法3 — cwebpによるコマンドライン変換（開発者向け）

Googleは、WebPの公式エンコーダーであるcwebpを無料で配布しています。ターミナルから変換するためのツールで、サーバー上やビルドの工程で大量の画像を処理するにはこれがいちばん速い方法です。

インストール

# Ubuntu / Debian
sudo apt-get install webp

# macOS (Homebrew)
brew install webp

# Windows — バイナリはこちら: https://developers.google.com/speed/webp/download

基本的な変換

# JPGファイルを品質80でWebPに変換
cwebp -q 80 photo.jpg -o photo.webp

# PNGをロスレス（可逆）でWebPに変換
cwebp -lossless logo.png -o logo.webp

# フォルダ内のJPGをまとめて変換（Bash）
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

-qは品質（0〜100）を指定するオプションです。Web用途なら75〜85あたりが、見た目とファイルサイズのバランスがもっとも良くなります。劣化させたくない画像（ロゴ、文字入りのスクリーンショットなど）には-losslessを使ってください。

方法4 — sharpを使ったNode.js（ビルド工程向け）

Node.jsを使うプロジェクト——Next.js、Gatsby、Nuxtのサイトや、自動化されたビルド全般——では、パイプラインでWebPに変換するのにsharpライブラリがもっとも効率的です。

// npm install sharp

const sharp = require('sharp');

// JPGを品質80でWebPに変換
sharp('photo.jpg')
  .webp({ quality: 80 })
  .toFile('photo.webp');

// PNGをロスレスでWebPに変換
sharp('logo.png')
  .webp({ lossless: true })
  .toFile('logo.webp');

// フォルダ内のファイルをまとめて変換
const fs = require('fs');
const path = require('path');

fs.readdirSync('./images')
  .filter(f => /\.(jpg|jpeg|png)$/i.test(f))
  .forEach(file => {
    const input = path.join('./images', file);
    const output = path.join('./images', file.replace(/\.[^.]+$/, '.webp'));
    sharp(input).webp({ quality: 80 }).toFile(output);
  });

sharpはネイティブのlibvipsを利用しており、純粋なJavaScript実装よりかなり高速です。静的サイトのビルド中にWebP版を生成する用途に向いています。

古いブラウザ向けのフォールバックを実装する

2026年時点でWebPの対応率は97%を超えていますが、それでもフォールバックが必要な場面はあります。IE11が残っている社内システム、非常に古い端末、あるいは単に万全を期したい場合です。

正しい解決策はHTMLの<picture>タグです。画像の候補を優先順に並べて指定できます。

<!-- 対応していればWebP、していなければJPGを表示 -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="写真の説明" width="800" height="600">
</picture>

<!-- Retinaディスプレイ向けに複数サイズを指定 -->
<picture>
  <source
    srcset="photo-800.webp 800w, photo-1600.webp 1600w"
    type="image/webp">
  <source
    srcset="photo-800.jpg 800w, photo-1600.jpg 1600w"
    type="image/jpeg">
  <img src="photo-800.jpg" alt="写真の説明"
    width="800" height="600" loading="lazy">
</picture>

ブラウザは書かれた順に候補を見ていきます。WebPに対応していればtype="image/webp"の<source>を使い、対応していなければ<img>のJPGに落ちます。最後の<img>は省略できません。altや寸法、既定の挙動を決めているのがこのタグだからです。

サーバー側で自動配信する設定（Apache）

<picture>を使わない方法として、ブラウザがWebPを受け付けるかをサーバー側で判定し、適切な版を自動で返す手もあります。Apacheなら.htaccessに次を追記します。

<IfModule mod_rewrite.c>
  RewriteEngine On

  # .webpがあり、ブラウザが対応していれば配信
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
  RewriteCond %{REQUEST_FILENAME}\.webp -f
  RewriteRule ^ %{REQUEST_URI}.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

この設定をしておけば、あとは.webpファイルを元画像と同じフォルダに並べて置くだけです。ApacheがAcceptヘッダーからブラウザの対応状況を判定し、HTMLを一切変えずに適切な版を返します。

PageSpeedで結果を確認する

WebPを導入したら、サイトのURLでGoogle PageSpeed Insights（pagespeed.web.dev）を実行してみてください。「次世代フォーマットでの画像の配信」の指摘が消えるか、大きく減っているはずです。「改善できる項目」には、まだ変換していない画像ごとに削減できるKB数の見込みが表示されます。

もうひとつの確認方法として、Chrome DevTools（F12）のNetworkタブを開き、「Img」で絞り込んで読み込まれた画像の「Type」列を見ます。webpと出ていれば、変換はきちんと効いています。

変換時の品質はどのくらいにすべき？

WebPの品質設定の考え方はJPGと同じで、数値が高いほど細部が残り、ファイルは大きくなります。違うのは、同じ見た目の品質を得るのに、WebPはJPGより10〜15ポイント低い数値で足りるという点です。

よくある質問