PNG・JPEG・WebPの使い分け：画質、透過、互換性を比較
PNGは可逆圧縮とアルファを扱い、文字、図、透過ロゴに向きます。JPEGは写真向けの非可逆形式、WebPは可逆・非可逆、透過、アニメーションに対応します。
公開 · 更新 · FaultNote 編集方針
この記事が役立つ人・作業前の準備
- 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を一枚だけ掲載し、対象ブラウザーと共有先で開く
運用上の注意
品質設定、色プロファイル、メタデータで結果は変わります。公開時は位置情報の保持も確認します。
写真と画面画像で判定箇所を変える
写真は空や壁の滑らかな濃淡、髪や草の細部を確認します。画面キャプチャは小さい文字、細線、単色の境界を確認します。同じ品質設定でも目立つ劣化の位置が違うため、写真一枚の結果を操作説明画像へ流用しません。
透明なロゴでは背景を白・黒の両方にして縁を見ます。PNGからJPEGへ書き出すときは透明部分をどの色で塗るか決めてから変換します。編集途中は元画像を残し、配布用に縮小した画像を次回の編集元にしない運用が重要です。
サイズをそろえて書き出しを比較する
先に配信先の表示幅に合わせたコピーを作り、そのコピーから各形式へ書き出します。解像度が違う画像同士の容量比較では、形式の差とピクセル数の差が混ざります。100%表示と実際の掲載サイズの両方で確認します。
WebPが開けない提出先ではPNGまたはJPEGを用意します。ブラウザーで表示できることと、画像編集ソフト・印刷受付・業務システムで受け付けることは別です。ファイルの種類を指定する提出規則を最終判断に使います。
具体例から決める判断の分岐
例えば、操作手順の画面画像は細い文字が読めることが合否の中心で、旅行写真は色の階調と細部を保ちながら転送量を抑えることが中心です。写真向けの強い圧縮を小さい文字へそのまま使うと、境界のにじみが説明の読みやすさを損ないます。形式だけでなく画像の役割を先に決めます。
ネット掲載では、ページ上で小さく表示している巨大画像も通信時には元の容量を読み込みます。幅を適正化することと圧縮形式を選ぶことを順番に行い、画像の内容によって結果を判断します。比較のために解像度をそろえないと、形式を変えた効果を評価できません。
印刷用や編集用の原本とWeb配布用は分けます。透明ロゴを写真の上へ置く場合、白背景では見えなかった縁が現れることがあります。掲載背景で確認し、軽量な配布版ができても元の透明画像や高解像度写真を上書きしないようにします。
表は横にスクロールできます →
| 条件 | 検討する方法 | 合格の条件 |
|---|---|---|
| 小さい文字の手順画像 | PNGまたは可逆の候補 | 100%表示で細線と文字を読む |
| 写真中心の掲載 | JPEGとWebPを比較 | 同じ寸法で階調と細部を確認 |
| 背景を抜いたロゴ | 透明対応形式 | 白・黒・掲載背景で縁を確認 |
| 提出先が形式を指定 | 指定形式 | 受付条件と上限容量を満たす |
試験から切り替え完了までの手順
例として、横幅1200ピクセルの操作画像を記事へ載せる場合は、まずその幅のコピーを作り、同じコピーから候補を出力します。実際のスマートフォン表示で文字が読めないなら、形式を変える前に必要部分を切り出して文字の見える大きさを確保します。JPEGだけ文字の縁がにじむならPNGや可逆設定の候補を残し、写真の領域が大きい画像は別に比較します。透明な矢印を重ねた画像では、最終背景で矢印の縁が欠けないことも合格条件です。候補の容量と見た目を記録し、受け付ける形式の中から選びます。次回の修正は配布版ではなく原本から行い、非可逆圧縮を繰り返さないようにします。
- 原本をコピーし、配信に必要な幅と高さを決めます。
- そのコピーからPNG、JPEG、WebPの候補を作り、寸法とファイル容量を記録します。
- 文字、斜め線、階調など失われると困る部分を100%表示で確認します。
- 掲載予定の大きさと背景でも確認し、透明画像の縁を見ます。
- 実際の提出先または受信アプリで開き、形式が受け付けられるか確認します。
- 採用した配布版を別フォルダーへ保存し、次回編集に使う原本を保持します。
注意点・利用条件
- 拡張子変更だけでは変換になりません
- 非可逆圧縮の細部は戻りません
よくある質問
画面写真をJPEGにする？
文字のにじみをPNGと比較します。
WebPは必ず最小？
内容と設定で変わります。
PNGへ変換すればJPEGの劣化は戻りますか？
戻りません。PNGは変換後の画素を保存できますが、以前の非可逆圧縮で失った細部を復元するものではありません。画質を戻したい場合は撮影原本や編集前のデータから書き出し直します。
一番小さいファイルを選べばよいですか？
読めない文字や消えた透明部分があれば不適切です。必要な見た目と受信先の互換性を先に満たし、その候補の中で容量を比較します。容量だけの順位を用途別の品質順位へ置き換えないでください。
出典・確認日
情報確認日：。仕様・操作方法・価格などの確認に使用した出典を掲載しています。適用条件や現在の情報は各リンク先で確認してください。