PNG・JPEG・WebPの使い分け：画質、透過、互換性を比較

この記事が役立つ人・作業前の準備

PNG / JPEG / WebPの違いを知りたい人
安全に小さく試したい人

用意するもの

元データを残してテスト用コピーを作る
利用先の対応条件と保存先を確認する

比較基準

PNGは可逆圧縮とアルファを扱い、文字、図、透過ロゴに向きます。JPEGは写真向けの非可逆形式、WebPは可逆・非可逆、透過、アニメーションに対応します。

表は横にスクロールできます →

比較基準
基準	PNG	JPEG	WebP
圧縮	可逆	主に非可逆	可逆・非可逆
透過	アルファ対応	通常は非対応	アルファ対応
代表用途	文字・UI・透過素材	写真・広い受け渡し	Web配信・透過・アニメーション

ケース別の選び方

画面説明や原本はPNG、広い環境へ写真を渡すならJPEG、Web配信量を調整するならWebPです。掲載先の対応も確認します。

たとえば製品写真と文字入り図版が混在するページでは、一律変換せず写真をJPEGまたは非可逆WebP、ロゴや操作図をPNGまたは可逆WebPに分けます。入稿先がJPEGのみなら互換性を優先し、透過素材は背景を合成したコピーを渡します。WebP対応でも、印刷ソフトや古い社内ツールへ再利用するならPNG/JPEGの原本を残す方が安全です。

最初に試す操作

同じ画像を三形式へ書き出し、等倍と掲載幅で文字、暗部、透過を比較します。非可逆形式は原本から毎回出力します。

元画像を複製し、画像編集アプリでPNGとして書き出す
同じ寸法のJPEGを品質設定を記録して書き出す
同じ寸法のWebPを可逆または非可逆と明記して書き出す
等倍と実際の掲載幅で文字の縁、写真の暗部、透過背景を見比べる
CMSへWebPを一枚だけ掲載し、対象ブラウザーと共有先で開く

運用上の注意

品質設定、色プロファイル、メタデータで結果は変わります。公開時は位置情報の保持も確認します。

注意点・利用条件

拡張子変更だけでは変換になりません
非可逆圧縮の細部は戻りません

よくある質問

画面写真をJPEGにする？

文字のにじみをPNGと比較します。

WebPは必ず最小？

内容と設定で変わります。

公式情報・確認日

情報確認日：2026-09-05。対応OS・プラン・画面構成の変更は、以下の公式情報で確認できます。