スマートフォンで撮った写真を保存するとき、JPEG、PNG、WebPといった名前を見かけます。「PNGの方が高画質」「JPEGなら軽い」と言われますが、形式名だけで画質や容量が決まるわけではありません。写真と文字入りの図では、残したい情報が違うからです。何を比較すれば、目的に合った保存形式を選べるのでしょうか。
画質を考える前に、何を失ってはいけないか
同じ画像でも、写真と図解では気になる部分が異なります。人物の写真なら肌や空の滑らかな色の変化、地図や文字入り画像なら線の境目や小さな文字が大切です。圧縮によって色が少し変わっても写真では気づきにくい場合がありますが、細い文字の周りににじみが出ると図解では読みにくくなります。
JPEGは通常、画素の情報の一部を省いて容量を小さくする非可逆圧縮を使います。PNGは通常、保存と読み出しの間で画素の情報を変えない可逆圧縮を使います。ただし、PNGだから元画像の情報が最初から高品質になるわけではありません。ぼやけた画像をPNGで保存しても、ぼやけたままです。
画質という言葉には、撮影時のピント、画像の縦横の画素数、圧縮による変化、表示するときの拡大など複数の要素が含まれます。形式を比較するときは、そのうち何を固定しているのかを先に決めます。
同じ写真を保存してサイズと細部を見る
横1600画素・縦900画素の写真を一枚用意し、同じ縦横サイズのままJPEGとPNGに保存してみましょう。比較する数字はファイル容量、見る場所は細かい葉っぱや髪の毛、文字が入っていればその周辺です。JPEGの画質設定が変われば容量も変わるため、画質設定も記録します。
仮にJPEGが300KB、PNGが1800KBだったとします。この例ではPNGはJPEGの6倍の容量ですが、必ず6倍きれいという意味ではありません。視覚的な差を感じない写真もあります。逆に細かな図形が多い画像では、PNGの方が文字や線を保ちやすく、結果として容量面でも有利な場合があります。
別の比較として、文字の入ったシンプルな図を同じ形式で保存してみます。白い背景に黒い文字だけの画像は、写真とはデータの規則性が違います。どの形式が適切かを知るには、写真一枚だけの試験で結論を出さず、画像の種類も変えて確かめる必要があります。
透明な背景と、表示できる環境の違い
アイコンをサイトの色付き背景に載せる場合、背景を透明にできるかが重要です。一般的なJPEGには透過情報を保存する仕組みがありません。一方、PNGやWebPには透明部分を扱える形式があります。背景を消したつもりが白い四角になってしまうのは、透明度の扱いと関係することがあります。
WebPには可逆圧縮と非可逆圧縮の両方があり、さらに透明部分にも対応できます。つまり「WebPは必ず非可逆」「PNGは必ず軽い」といった決めつけは避けたいところです。MDNの画像形式ガイドは、写真、文字入り画像、透明画像など、使い道に合わせた形式の違いを整理しています。
ただし、すべての閲覧ソフトや古い編集ソフトで、同じように扱えるとは限りません。Webサイトで使う画像と、印刷所や他人の編集ソフトへ渡す画像では、優先する条件が変わります。利用環境が決まっているなら、受け取る側で一枚開けるか確かめると確実です。
何度も保存すると違いが出る理由
画像をJPEGで開いて編集し、またJPEGで保存する操作を繰り返すと、設定や編集内容によって圧縮による変化が重なることがあります。だから、編集作業の途中の元データと、配布用の軽い画像を分けておく方法が役立ちます。
しかし「JPEGをPNGに変換すれば元の画質に戻る」ということはありません。すでに失われた細部は、保存形式を変えるだけでは復元できないからです。逆に高画質の元画像が残っていれば、そこから改めて配布用画像を作り直せます。
ウェブページが重いときは、形式だけでなく、表示サイズより過剰に大きい画像を読み込んでいないかも調べましょう。幅400画素で表示するのに幅4000画素の画像が常に必要とは限りません。画素数、形式、圧縮設定を分けて考えると対策の効果を確かめやすくなります。
写真と図を自分で選び分ける判断表
| 用途 | 最初の候補 | 確認すること |
|---|---|---|
| 一般的な写真 | JPEG／WebP | 圧縮率と細部の見た目 |
| スクリーンショットや細い文字の図 | PNG／可逆WebP | 文字のにじみ・小サイズの判読性 |
| 透明背景のロゴ | PNG／WebP | 透過表示と対応ソフト |
| 編集用の原本 | 可逆形式や編集専用形式 | 再保存・再編集のしやすさ |
最初に選ぶなら、写真はJPEG、細い線や文字を正確に残したい図・透過を必要とする画像はPNGが候補です。ただし、画質設定や実際の利用環境で比較して決めましょう。
写真では見た目と容量の釣り合いを確かめ、文字の多い図では小さく表示したときの判読性を重視します。背景が透けるアイコンには透明度を扱える形式が必要です。さらに相手が閲覧できるか、編集し直す必要があるかも確認してください。
同じ画像を保存する実験では、比較対象を「元画像」「JPEG」「PNG」「WebP」として、縦横画素数・容量・小さく表示した見え方・透明度の有無を記録すると、形式名だけでは分からない違いが見えてきます。結論は「常にどれが最高か」ではなく「今回どの情報を守るか」で決めます。
サイトのアイキャッチ画像なら、特にスマートフォン幅へ縮小したときの文字の読みやすさを先に確認しましょう。見出しの文字を小さくして軽い形式へ変えても、読めなくなれば目的を果たせません。画像形式は、読みやすい設計を支える道具の一つです。
比較に失敗しやすい三つのケース
第一に、画像の縦横サイズが変わっている場合です。JPEGだけを半分の幅にして比較すれば軽くなるのは自然ですが、形式の効果なのか画素数の効果なのか分かりません。第二に、元画像がすでに低画質の場合です。形式を変更しても元の細部は戻りません。第三に、画像を見る倍率が違う場合です。画面を大きく拡大すれば、普通の表示では気づかなかった違いが目立ちます。
公平な比較では、元画像を一枚にそろえ、幅・高さを変えず、可能なら保存時の品質設定を記録します。そして実際に利用する大きさまで縮小して読みやすさを比べます。印刷するなら印刷サイズ、SNSならスマートフォン上の表示サイズで確認する方が目的に近い判断になります。
最後に「容量が小さい方を採用する」という一つの基準だけではなく、「文字が読める」「色や輪郭が不自然でない」「必要な透明部分が使える」の合格条件を先に決めます。比較とは、数字を集めることよりも、何を残したいかに合わせて同じ条件で判断することです。
