JPEGの仕組みを図にした。写真に強くて文字に弱い理由

• JPEGは捨てて小さくする方式。捨てたぶんは戻らない
• 写真では捨てても気づかないが、文字と線では見える
• 透過が扱えず、保存し直すたびに劣化が重なる

「画面の写しをJPEGで保存したら、文字がぼやけた」。これはJPEGの不具合ではなく、設計どおりの挙動だ。何をしている形式なのかを図にした。

やっていることは「捨てる」

MDNの分類では、JPEGは非可逆（lossy）圧縮にあたる。元に戻せないという意味だ。方式としては離散コサイン変換に基づくと説明されている。

要点は図の右側だ。同じ処理をしているのに、写真では気づかず、文字では見える。

なぜ写真では気づかないのか

写真は、もともと色が少しずつ変わっていく。空のグラデーション、肌の陰影、木の葉の重なり。どこからどこまでが境目か、元から曖昧だ。

そこで細かい差を省いても、見ている側は違いに気づかない。省いたぶんだけ容量が減る。これがJPEGが写真で強い理由になる。

なぜ文字では見えるのか

文字と線は逆で、境目がはっきりしていることが情報そのものだ。黒と白の境界が1画素で切り替わる。

そこで「細かい変化」を省くと、省かれるのは境界そのものになる。結果として、縁に薄い色が滲む。MDNも「テキストを含む画像では、非可逆圧縮でテキストがぼやける」として、画面の写しには可逆圧縮を勧めている。

見分ける基準は1つ

形式を選ぶときの判定はこれで足りる。

• 境目が曖昧なもの（写真、風景、人物）→ JPEG（またはWebP）
• 境目がはっきりしているもの（文字、線画、図、画面の写し、アイコン）→ PNG（またはWebP）

透過が扱えない

MDNの一覧では、JPEGの透過対応は「非対応」になっている。背景を抜いた画像をJPEGで保存すると、抜いた部分が白か黒で塗りつぶされる。

ロゴやアイコンをJPEGにしてはいけないのは、にじみの問題だけではなくこれもある。

保存し直すと劣化が積み上がる

ここが実務でいちばん効く。開いて保存するたびに、捨てる処理がもう一度かかる。

1. JPEGで保存する → 細かい情報が捨てられる
2. それを開いて少し加工し、またJPEGで保存する → 残っていたものから、さらに捨てられる
3. 繰り返すと、見て分かるほど崩れる

対策は単純で、編集中は捨てない形式で持ち、最後に一度だけJPEGにする。元データを残しておけば、作り直しも効く。

品質の設定について

保存時に選べる品質の数値は、どれだけ捨てるかの指定にあたる。下げるほど小さくなり、下げるほど戻らなくなる。

数値を上げれば劣化は減るが、上げすぎると捨てない形式より大きくなることがある。その場合は形式の選択を間違えている。

容量を減らす手順そのものは生成した画像をそのまま載せたら重かった。軽くする手順を決めたに書いた。

JPEGにしてはいけないもの

判断に迷わないよう、該当するものを挙げておく。

• 画面の写し — 文字が入る。MDNも可逆圧縮を勧めている
• ロゴ・アイコン — 透過が使えず、縁がにじむ
• 図・グラフ — 線と文字の塊になる
• 編集の途中のデータ — 保存のたびに劣化が重なる
• 人に渡す素材 — 相手が加工するなら、捨てていないものを渡す

逆に、最終的に表示するだけの写真はJPEGで困らない。使い分けの線はここにある。

いま選ぶとどうなるか

MDNは写真について「WebPまたはJPEG。代替としてJPEG」という書き方をしている。新しい形式を先に置き、互換性の高いJPEGを後ろに控えさせる形だ。

JPEGが不要になったわけではない。どこでも開けるという性質は、いまも他の形式より強い。

まとめ

• JPEGは非可逆。捨てて小さくするので元には戻らない
• 写真は境目が元から曖昧なので、捨てても気づかない
• 文字と線は境目が情報そのものなので、捨てるとにじみとして見える
• 透過は扱えない
• 保存し直すたびに劣化が重なる。編集中は捨てない形式で持つ
• 選ぶ基準は「境目がはっきりしているか」の一点でよい

出典

• MDN「ウェブで使用される画像ファイルの種類と形式」（圧縮方式、透過の対応、用途別の推奨）

図は本記事のために作成したもの。本記事は2026年10月13日時点の内容に基づく。