WebP変換の方法5選
JPEG・PNGから30〜97%軽量化

WebPとは？Googleが開発した次世代画像フォーマット

WebP（ウェッピー）は、2010年にGoogleが発表した画像フォーマットだ。VP8動画コーデックの技術をベースに開発され、JPEGと同等の画質を維持しながらファイルサイズを25〜34%削減できるとGoogleは公式に発表している。実務では用途やソース画像によって30〜97%の削減率を達成するケースもある。

WebPは非可逆圧縮（Lossy）と可逆圧縮（Lossless）の両方をサポートしている。JPEGの代替としてLossy WebPを、PNGの代替としてLossless WebPを使うのが基本的な使い分けだ。さらにアニメーションにも対応しており、GIFの代替としても機能する。

Googleが開発したのは「ウェブの高速化」が目的だ。画像はWebページのデータ量の大部分を占めるため、画像サイズの削減はページ表示速度の改善に直結する。実際にGoogleはCore Web VitalsのLCP（Largest Contentful Paint）改善手段としてWebP採用を推奨している。

ブラウザ対応状況（2026年3月時点）

Can I Useのデータによると、WebPのグローバルブラウザ対応率は97%を超えている。IE11のサポート終了（2022年6月）以降、WebP非対応ブラウザを考慮する必要はほぼなくなった。新規サイトであれば、WebPをメインの画像フォーマットとして採用して問題ない。

WebPのメリット・デメリット

メリット

• ファイルサイズの大幅削減: JPEGと同品質で25〜34%、PNGと比較して最大97%の削減を実測で確認
• Core Web Vitals改善: 画像の軽量化によりLCPスコアが向上し、SEOに好影響
• 透過に対応: PNGと同様のアルファチャンネルをサポート。JPEGにはない機能
• アニメーション対応: GIFの代替として使え、同品質でファイルサイズが大幅に小さい
• 全主要ブラウザ対応: グローバル対応率97%以上。フォールバックの必要性はほぼない
• CDN・サーバー費用の削減: 転送量が減るため、帯域コストの節約につながる

デメリット

• 画像編集ソフトの対応が限定的: PhotoshopはWebP書き出しに対応しているが、一部の古い画像編集ソフトでは非対応
• Lossy圧縮の高圧縮域でブロックノイズが出やすい: 品質を極端に下げると、JPEGより目立つブロックノイズが発生する場合がある
• AVIFと比較すると圧縮効率で劣る: 同品質ではAVIFのほうが20〜30%小さくなるケースが多い
• SNS・メール添付での互換性: 一部のSNSやメールクライアントではWebP画像のプレビューに対応していない

WebP変換方法5選

JPEG・PNGをWebPに変換する方法を、手軽さ・対象者別に5つ紹介する。

方法1: ToolShare Lab 画像圧縮（ブラウザで即変換・無料・無制限）

最も手軽にWebP変換できる方法だ。ToolShare Labの画像圧縮ツールにJPEGやPNGをドラッグ&ドロップし、出力フォーマットで「WebP」を選択するだけでよい。変換処理はすべてブラウザ内で完結し、画像がサーバーに送信されることは一切ない。

libwebpエンコーダーをWebAssembly（WASM）でブラウザ上に搭載しているため、変換品質はGoogle公式のcwebpコマンドと同等だ。実測では31.2MBの画像ファイルがWebP変換後に841KBまで削減され、削減率は97%に達した。

方法2: Squoosh（1枚ずつ高品質に変換）

SquooshはGoogle Chrome Labsが開発したオープンソースの画像変換ツールだ。ブラウザ上で動作し、画像はサーバーに送信されない。圧縮前後の画像をスライダーで比較できるUIが特徴で、品質パラメータを細かく調整しながら最適な圧縮率を見つけられる。

WebPだけでなくAVIF・MozJPEG・OxiPNGなど複数のコーデックに対応し、リサイズや色空間変換の前処理も可能。ただしバッチ処理には非対応で、1枚ずつの処理になる。ヒーローイメージやOGP画像など、重要な画像を1枚ずつ丁寧に最適化したいデザイナー・フォトグラファー向けだ。

URL: squoosh.app

方法3: cwebp（Google公式CLI）

cwebpはGoogleが提供するWebP変換のコマンドラインツールだ。開発者やエンジニアがターミナルから直接WebP変換を行う場合に使う。品質・リサイズ・クロップなど細かいパラメータ制御が可能で、シェルスクリプトと組み合わせればバッチ処理も自在だ。

インストールはmacOSならbrew install webp、Ubuntuならapt install webpで完了する。基本的な変換コマンドは以下のとおり。

# JPEG → WebP（品質80）
cwebp -q 80 input.jpg -o output.webp

# PNG → WebP（ロスレス）
cwebp -lossless input.png -o output.webp

# ディレクトリ内の全JPEGを一括変換（bash）
for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done

方法4: WordPressプラグインで自動変換

WordPressでサイトを運営している場合、プラグインを導入すれば画像アップロード時に自動でWebP変換される。手動変換の手間がゼロになるため、更新頻度の高いブログやメディアサイトに適している。

代表的なプラグインを3つ紹介する。

• EWWW Image Optimizer: 無料プランでもWebP変換に対応。既存画像の一括変換機能あり。日本語ドキュメントが充実しており、国内ユーザーが多い
• ShortPixel Image Optimizer: 月100枚まで無料。Lossy/Glossy/Losslessの3モードを選択可能。WebP・AVIFの両方に対応
• Converter for Media: WebP変換に特化した軽量プラグイン。.htaccessを自動設定してWebP対応ブラウザにのみWebP画像を配信する

方法5: Gulp / Webpackでビルド時に自動変換

フロントエンド開発のビルドプロセスにWebP変換を組み込めば、コードをビルドするたびに画像が自動変換される。静的サイトやJAMstackプロジェクトで特に有効だ。

Gulp（gulp-webp）の設定例:

import gulp from 'gulp';
import webp from 'gulp-webp';

export function convertWebp() {
    return gulp.src('src/images/**/*.{jpg,png}')
        .pipe(webp({ quality: 80 }))
        .pipe(gulp.dest('dist/images'));
}

Webpack（imagemin-webp）の場合は、ImageMinimizerWebpackPluginにimagemin-webpを組み合わせて使う。Next.jsを使っている場合は、next/imageコンポーネントが自動でWebP配信を行うため、手動設定は不要だ。

5つの方法の比較

WebP導入時の注意点

pictureタグでフォールバックを設定する

グローバル対応率97%超とはいえ、WebP非対応のブラウザが完全にゼロになったわけではない。確実にすべてのユーザーに画像を表示するには、HTMLの<picture>要素でフォールバックを設定するのがベストプラクティスだ。

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

ブラウザはsource要素を上から順に評価し、対応するフォーマットがあればそれを使う。WebPに非対応の場合はimg要素のJPEGが表示される。width・height属性を明示することでCLS（Cumulative Layout Shift）を防ぎ、loading="lazy"で遅延読み込みを有効にする。

.htaccessによるサーバーサイド配信（Apacheの場合）

HTMLを変更せずにWebP配信を行う方法もある。Apacheサーバーの.htaccessでContent Negotiationを設定すれば、WebP対応ブラウザにはWebPを、非対応ブラウザにはJPEG/PNGを自動的に返すことが可能だ。元のJPEG/PNGファイルと同じディレクトリに.webpファイルを配置しておく必要がある。

WebP変換時の品質設定の目安

WebP vs AVIF: 次世代フォーマット比較

WebPの次に注目されている画像フォーマットがAVIFだ。AV1動画コーデックから派生したフォーマットで、2026年現在はChrome・Firefox・Safari・Edgeの全主要ブラウザが対応済み。WebPよりもさらに高い圧縮効率を持つ。

現時点での使い分けとしては、サイト全体の画像にはWebPを採用し、ファーストビューのヒーローイメージやLCPに影響する大型画像にはAVIFを使うのが現実的だ。pictureタグでAVIF → WebP → JPEGの順にフォールバックを設定すれば、すべてのブラウザをカバーできる。

<!-- AVIF → WebP → JPEG のフォールバック -->
<picture>
    <source srcset="hero.avif" type="image/avif">
    <source srcset="hero.webp" type="image/webp">
    <img src="hero.jpg" alt="説明文" width="1200" height="630">
</picture>