JPG・PNGをWebPに変換する方法｜サイトの画像を軽くする手順と、使えない場所

WebPはGoogleが開発した画像形式で、同じ見た目なら小さくなりやすく、公式の比較値はPNGより26％、JPEGより25〜34％小さいとされています。 変換は無料のSquooshやGoogleのcwebpででき、JPG・PNGへの逆変換にはパソコンの標準機能も使えます。 メール・Office文書・印刷・一部のSNSやモールでは使えない、または向かないため、元のJPG・PNGも残してください。

WebPとは｜JPG・PNGとの違いと圧縮率

WebPはGoogleが開発した、写真や図解の容量を抑えられるWeb向けの画像形式です。WebPには、画質と容量を調整する非可逆圧縮と、画素情報を復元できる可逆圧縮があります。拡張子は「.webp」で、商品写真から透過したロゴまで、幅広い画像を保存できます。

Googleが公表する容量差は、比較した画像と圧縮方式によって異なります。

「同等画質」は、画像の画素が完全に一致するという意味ではありません。手元のJPEGを再変換した際の削減率を保証する数値でもありません。GoogleのWebP概要と比較研究では、この条件を区別しています。

圧縮済みJPEGを可逆WebPにすると、かえって容量が増える場合もあります。変換後の形式名だけで判断せず、容量と見た目を並べて採用を決めてください。

JPG・PNGをWebPに変換する方法

少量なら比較画面のあるSquoosh、繰り返し処理するならGoogle公式のcwebpを使うと進めやすくなります。

無料の変換ツールとフリーソフトの選び方

プレビューとペイントは、ここではWebPをJPG・PNGへ戻す用途で使います。両者のJPG・PNGからWebPへの書き出し手順は、公開情報では確認できません。

SquooshでWebPに変換する手順

Squooshは、元画像と変換後の見た目を画面で比べられる無料のWebアプリです。

1. Squooshを開き、変換するJPG・PNGを画面にドラッグします。
2. 「Compress」の形式選択で「WebP」を選び、変換後の表示を確認します。
3. 写真は画質の項目を調整し、可逆圧縮が必要な画像は「Lossless」を選びます。
4. 比較表示を動かし、商品の質感、小さい文字、輪郭、透明部分を見比べます。
5. 表示されたファイル容量を元画像と比較し、ダウンロードボタンで保存します。

公式操作解説の題材はAVIFですが、この記事では出力形式にWebPを選びます。

公式のプライバシー説明によると、圧縮は端末内で行われ、画像はサーバーへ送信されません。一方、基本的な訪問情報や変換前後の容量値などは収集すると説明されています。画像を送信しないことと、通信が一切ないことは区別してください。

cwebpでJPG・PNGを変換する手順

cwebpは、コマンドを入力して画像をWebPへ変換するGoogle公式の道具です。

1. Googleの公式ダウンロードページから、OSとCPUに合う配布物を取得します。
2. 配布物を展開し、ターミナルなどでcwebpを実行できる状態にします。
3. 入力画像と保存先を指定して変換し、生成されたWebPを開いて確認します。

以下は、cwebpを実行できる環境でJPGを変換する例です。Windowsでは、通常は実行ファイル名を「cwebp.exe」として入力します。

cwebp -q 75 "photo.jpg" -o "photo.webp"

「-q」は品質の指定で、範囲は0〜100、既定値は75です。非可逆圧縮では一般に低い値ほど小さくなりますが、画質も変わります。

「-q 100」にしても、可逆圧縮にはなりません。 PNGを可逆WebPにする場合は、次のように「-lossless」を指定します。

cwebp -lossless -exact "illustration.png" -o "illustration.webp"

「-exact」は、完全に透明な部分にある見えない色情報も保持する指定です。各指定の詳しい説明は、cwebpの公式仕様で確認できます。

Photoshopを契約している場合

Photoshopデスクトップ版は23.2以降でWebPに標準対応し、対象は8bit RGB画像です。

1. JPG・PNGを開き、画像がRGB・8bitの条件を満たすことを確認します。
2. 「ファイル」→「コピーを保存」を選び、形式を「WebP」にします。
3. 「Lossless」か「Lossy」を選び、Lossyでは品質を調整して保存します。

WebPをJPG・PNGに変換する方法

WebPを開けるプレビューやペイントで保存形式を指定するか、dwebpでPNGに変換します。

MacのプレビューでJPEG・PNGにする

WebPをプレビューで開ける環境では、Appleの書き出し手順を使えます。

1. WebPをプレビューで開き、「ファイル」→「書き出す」を選びます。
2. 「フォーマット」で「JPEG」または「PNG」を選びます。
3. JPEGでは必要に応じて品質を調整し、保存名と保存先を決めて保存します。

WindowsのペイントでJPEG・PNGにする

WebPをペイントで開ける場合は、次の流れで保存形式を指定します。

1. 「ファイル」→「開く」から、変換したいWebPを開きます。
2. 「名前を付けて保存」で「JPEG画像」または「PNG画像」を選びます。
3. 元画像と区別できる名前で保存し、色や透明部分が保たれているか確認します。

dwebpでWebPをPNGにする

dwebpでは、次のコマンドでWebPをPNGに変換できます。

dwebp "photo.webp" -o "photo.png"

標準の出力形式はPNGで、JPEGを直接出力する道具ではありません。JPGが必要なら、作成したPNGをプレビューなどで開いてJPEGに保存します。

拡張子を「.webp」から「.jpg」に変えても、画像データの形式は変わりません。また、非可逆圧縮で失った細部は、PNGへの変換では復元できません。dwebpの公式仕様では、アニメーションWebPも対象外です。

一括で変換する

複数画像をWebPへ一括変換する場合は、cwebpを繰り返し実行し、元画像とは別の場所に保存します。

1. 元画像を保管し、変換対象だけを作業用フォルダーへ複製します。
2. 写真は非可逆、図解は可逆など、種類ごとの初期設定を決めます。
3. 少量で容量と画質を確認し、問題がなければ同じ設定で一括処理します。
4. 出力件数と失敗した画像を確認し、公開に使うファイルを選別します。

次はmacOSのターミナルで、現在のフォルダーのJPGを処理する例です。cwebpを実行できる状態で使い、結果は別フォルダーに保存します。

mkdir -p webp-out
for f in ./*.jpg; do
  [ -f "$f" ] || continue
  cwebp -q 75 "$f" -o "webp-out/${f##*/}.webp"
done

この例は小文字の「.jpg」が対象で、PNG・JPEG拡張子は含みません。出力名は「photo.jpg.webp」のようになり、元の拡張子も残せます。

再実行すると同名の出力を上書きするため、結果を残す場合は保存先を変えます。

古い記事で紹介されるSquoosh CLIは、Webアプリと保守状況が異なります。公式リポジトリでは2023年1月3日に積極的な保守の終了が説明されています。

WebPが使えない・向かない場所

WebPはすべての用途に共通する形式ではないため、外部へ渡す画像は登録先や受け手の条件を優先します。

メール配信のMailchimp公式案内は、幅広いメールソフトで表示するためJPG・GIF・PNGを使うよう案内しています。添付できることと本文内で表示できることも分け、実際の宛先環境へテスト送信します。

Officeについては、MicrosoftがWebPの挿入対応を案内しています。一方、ExcelのIMAGE関数は、Web版とAndroidではWebP非対応と明記しています。この制限を、Office全体の非対応と読み替えないでください。

印刷に使う画像は、Web用に軽量化したファイルより元の撮影・制作データを優先します。JPGへの変換だけでは、解像感や印刷向けの色設定の問題は解決しません。

SNS・モールの商品画像でWebPを使う条件

SNSやモールへ登録する画像は、サービス名だけで判断せず、登録機能ごとの公式仕様に合わせます。

以下は、2026年10月27日時点の公開公式資料で確認できる条件です。

Yahoo!ショッピングは本文とPNG対応の追記を両方読む

公式API仕様には「GIFもしくはJPEG形式のみ」と、2022年5月以降のPNG対応の追記が併存しています。本文だけでPNG不可と断定せず、迷う場合は共通して記載されるJPEGで用意します。

同APIには、画像アップロード上限「10,000枚／1時間」もあります。上限超過のエラーコードは、2024年12月6日に429から503へ訂正されています。

楽天市場とGoogleの商品画像で注意する点

楽天市場の公開解説は形式を例示するページで、WebPの登録可否は公開情報では確認できません。

Google Merchant Centerは、2027年1月31日から全商品画像に500×500px以上を求めると告知しています。軽量化の際も、連携先で必要な画像寸法を下回らないようにします。

OGP画像はWebPと分けて用意する

SNSでURLを共有した際のOGP画像は、ページ内のWebPと分けてJPG・PNGで用意する運用が実用的です。

OGPはURL共有時のプレビュー用で、ページ本文の画像と別の画像を指定できます。

LinkedInの共有要件とLINEのURLプレビュー説明では、説明の範囲が異なります。専用のJPG・PNGを用意しても、全SNSでの表示を保証する共通条件にはなりません。

自動変換して配信する場合は、OGP用URLの返す形式も確認します。ページURLを実際に共有し、文字の欠けや切り抜かれ方まで確かめてください。

HTMLでWebPと元の形式を出し分ける

HTMLのpicture要素を使うと、対応するブラウザへWebPを渡し、代替としてJPG・PNGを指定できます。

制作担当者には、MDNのpicture要素の説明に沿って、次のように依頼できます。

<picture>
  <source srcset="/images/product.webp" type="image/webp">
  <img src="/images/product.jpg" alt="商品の正面写真">
</picture>

WebPはsourceの「srcset」に、代替画像はimgの「src」に指定します。透明背景が必要な画像では、代替画像をJPEGではなくPNGにしてください。

ブラウザは形式や条件を見て画像を選び、適切な候補がない場合はimgを使います。ただし、WebPの取得失敗時に必ず代替画像へ切り替える仕組みではありません。メールやOGP、モールの登録条件を解決する方法でもありません。

WebP変換後にサイト・LPの表示を確認する

WebPは作成して終わりにせず、公開ページでの見た目と実際の通信量まで確認して採用します。

当社では、サイトやLPの画像を公開前にWebPへ変換しています。生成したPNG約1.2MBが、WebP約47KBになった例があります。

これは個別の実測例であり、画像容量の削減率とページ全体の表示速度の改善率は別です。

1. 元のJPG・PNGや制作データを残し、再編集や他媒体への転用に備えます。
2. 掲載時に必要な画像寸法を確認し、過大な画像はリサイズも検討します。
3. 変換前後を同じ表示サイズで比べ、商品の質感、文字、輪郭、透過部分を見ます。
4. ファイル容量を比較し、増えた画像は設定の変更や元形式の採用を検討します。
5. 確認用ページを開き、パソコンとスマホで切れやぼけがないか確かめます。
6. 公開後のページで画像の参照先を確認し、通信量と表示速度を測り直します。

確認には、ブラウザのNetworkツールやLighthouseなどを利用できます。

サイト全体を見直す場合の関連記事は「ホームページの作り方」です。形式以外の軽量化は、関連記事「画像の圧縮」も併せて確認してください。

よくある質問（FAQ）

WebPの変換では、道具の追加が必要か、画質を維持できるか、保存先で開けるかを用途別に判断します。

WebP変換にフリーソフトは必要ですか？

追加のフリーソフトは必須ではなく、ブラウザで使える無料のSquooshで変換できます。WebPからJPG・PNGへ戻す場合は、対応環境のプレビューやペイントも使えます。継続的な一括変換には、無料のGoogle公式ツールcwebpが選択肢になります。

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

非可逆圧縮では画質が変わり、圧縮を強めるほど細部が失われる場合があります。可逆圧縮は画素情報を復元できますが、元のJPEGですでに失った情報は戻りません。商品写真は質感、文字入り画像は小さな注記を見比べて判断してください。

GIF・アニメーションやMP4もWebPに変換できますか？

WebPはアニメーションに対応し、GIFからはGoogle公式のgif2webpを使えます。

gif2webp "banner.gif" -o "banner.webp"

連番画像から作る場合はimg2webpがあり、cwebp・dwebpはアニメーション用途には使えません。

これらはMP4を直接変換する手順ではないため、動画とは工程を分けて考えます。アニメーションの変換後は、画質に加えて動き、ループ、透明部分も確認してください。

WebPで保存されてしまう画像を開けないときは？

サイト側がWebPを配信している場合、画像の保存でもWebPになることがあります。URLの末尾だけでは、実際に受け取った画像形式を判断できない場合もあります。

拡張子だけを書き換えず、対応アプリで開いてJPG・PNGに変換してください。標準アプリで開けない静止画は、dwebpでPNGにしてから利用できます。元の写真や制作データがあれば、そこから必要な形式を書き出す方法を優先します。