JPG

JPG（JPEGとも呼ばれます）は、写真や複雑な画像向けに作られた非可逆形式です。人の目では気付きにくい視覚情報を捨て、ファイルを小さくします。

JPG圧縮の仕組み

JPGは人の視覚特性を利用し、複数の手順で圧縮します。まず画像をRGBからYCbCr色空間へ変換し、明るさ（輝度）と色（色差）を分けます。人の目は色の変化より明るさの変化へ敏感なため、色差チャンネルを低い解像度で保存できます。この処理をクロマサブサンプリングと呼びます。

次に、画像を8×8ピクセルのブロックへ分けます。各ブロックへ離散コサイン変換（DCT）を適用し、ピクセル値を周波数成分へ変換します。高周波成分は細かな模様や鋭い輪郭、低周波成分は緩やかな色の変化や大きな形を表します。

圧縮では、品質設定に応じて高周波成分を捨てます。高品質（85〜95%）では細部を多く保つ代わりに、ファイルも比較的大きくなります。低品質（30〜50%）では多くを捨て、小さくできますが、鋭い輪郭の周りのぼやけ、グラデーションの色の帯、滑らかな領域のブロック模様などが見えるようになります。

このブロック単位の方式は、滑らかなグラデーションや複雑な質感を多く含む写真に適しています。一方、スクリーンショットにある文字やUIの鋭くコントラストの高い輪郭は、アルゴリズムが捨てる細部に当たるため、JPGには向きません。

JPG、PNG、WebPの違い

• JPG： 非可逆圧縮だけに対応します。写真を小さなファイルにできます。透過には対応しません。鋭い輪郭や文字の周りにノイズが出ます。ブラウザ、画像ビューアー、書類形式で幅広く使えます
• PNG： 可逆圧縮だけに対応します。すべてのピクセルを正確に保ち、透過にも対応します。スクリーンショット、文字、UI要素に適しています。写真ではJPGより大きくなります
• WebP： 非可逆モードと可逆モードの両方、透過に対応します。同等の画質ならJPGとPNGより小さくなるのが一般的です。現在のブラウザで広く対応し、ネイティブアプリでも利用が増えています

スクリーンショットには、ほぼ常にPNGのほうが適しています。Webで表示する写真には、幅広い互換性を持つJPGが標準的な選択肢です。ただし、ファイルを小さくしたい場合はWebPも多く使われています。

JPGが適している場面

• 写真： 複雑な色のグラデーション、自然な質感、連続した色調を持つ画像を、目立つ画質低下を抑えながら効率よく圧縮できます
• ヒーロー画像とバナー： ページの読み込み時間へファイルサイズが直接影響し、ピクセル単位の正確さを求めない大きな写真背景に使えます
• サムネイルのプレビュー： 表示サイズでは細部が見えない小さな画像です。中程度の品質なら、すばやく読み込める小さなファイルを作れます
• メール添付： 相手の環境がWebPへ対応しているか分からず、ファイルも小さくする必要がある場合に使います。JPGは互換性の高い非可逆形式です
• SNSへのアップロード： 多くのサービスがアップロード画像を再圧縮します。高品質のJPGから始めると、サービス側の圧縮へ比較的よい元画像を渡せます

文字入りのスクリーンショット、透過が必要な画像、べた塗りと鋭い輪郭を持つ図、繰り返し編集して保存する素材にはJPGが向きません。保存するたびに非可逆圧縮による劣化が重なります。

よくある失敗

• 文字入りのスクリーンショットをJPGにする： JPG圧縮は文字の輪郭をぼかし、コントラストの高い境界に波状のノイズを加えます。小さな文字が読みにくくなり、UIラベルもにじんで見えます。読ませる文字がある画像にはPNGを使います
• 圧縮済みのJPGを再圧縮する： 保存するたびに非可逆圧縮が重なり、さらに画質が落ちます。これは世代劣化と呼ばれます。以前に圧縮したJPGではなく、必ず元画像から編集してください
• ファイルを小さくするため品質を下げすぎる： 60〜70%未満では、滑らかな領域のブロック模様、輪郭周辺の色のにじみ、細部の欠落がはっきり見えやすくなります。非常に低い品質で得られる容量削減は、多くの場合、見た目の劣化に見合いません
• JPGが透過に対応すると思う： 透明背景の画像をJPGで保存すると、その領域が単色で埋まります。透過が必要ならPNGまたはWebPを使ってください