JPEG・PNG・WebP・AVIFの違いとは？画像形式の使い分けと圧縮のコツ

画像形式の違いを理解するには、2つの軸で整理するのが近道です。1つ目は圧縮の方式です。

• 非可逆圧縮（lossy）: 人の目で気づきにくい情報を捨てて、大幅に小さくする。元のデータには戻せない。JPEGや、WebP・AVIFの非可逆モード
• 可逆圧縮（lossless）: 情報を一切失わずに圧縮する。展開すると元のピクセルが完全に再現される。PNG・GIFや、WebP・AVIFの可逆モード

2つ目は、画像をどう表現するかです。写真のように点（ピクセル）の集まりで表す「ラスター画像」と、線や図形を座標と数式で表す「ベクター画像」があります。JPEG・PNG・WebP・AVIF・GIFはラスター画像、SVGはベクター画像です。ラスター画像は拡大するとぼやけたりギザギザになったりしますが、ベクター画像はどれだけ拡大しても輪郭が鮮明なままです。

非可逆圧縮は、色や明るさがなだらかに変化する写真では効果が大きい一方、文字や細い線のようにくっきりした境界の周りにはノイズ（ブロックノイズやモスキートノイズ）が出やすいという性質があります。この性質が、用途別の使い分けの基本になります。

• JPEG: 写真向けの非可逆圧縮。対応環境が最も広い。透過（透明部分）やアニメーションには対応しない。保存し直すたびに劣化が積み重なる
• PNG: 可逆圧縮で、透過（アルファチャンネル）に対応。スクリーンショット・図・ロゴなど、くっきりした画像に向く。写真をPNGにするとJPEGの数倍のサイズになることが多い
• GIF: 最大256色のパレットで表現する可逆圧縮。アニメーションに対応するが、色数が少なく、同じ内容の動画よりファイルが大きくなりやすい。透過は「透明か不透明か」の2段階のみ
• WebP: Googleが開発した形式。非可逆・可逆の両方と、透過・アニメーションに対応する。同じ見た目ならJPEGやPNGより小さくなることが多く、現在の主要ブラウザはすべて対応している
• AVIF: 動画コーデックAV1をもとにした新しい形式。WebPよりさらに高い圧縮率を期待でき、透過やHDRにも対応する。主要ブラウザの最新版は対応しているが、エンコード（保存）に時間がかかり、対応していない画像編集ソフトもまだある
• SVG: XMLで記述するベクター形式。アイコン・ロゴ・図形に最適で、どんなサイズでも鮮明に表示でき、CSSで色を変えることもできる。写真のような画像には向かない

iPhoneで撮影した写真のHEIC（HEIF）形式は、保存効率は高いものの、Webブラウザや画像ツールでは表示・読み込みに対応していないことが多い形式です。Webに載せる場合は、JPEGなどに変換してから使いましょう。

なお、SVGは中にJavaScriptを埋め込める形式でもあります。利用者がアップロードしたSVGをそのまま同じドメインで配信すると、スクリプトが実行されてしまう危険があるため、ユーザー投稿を受け付けるサービスではSVGを許可しないか、無害化してから扱うのが一般的です。

迷ったときは、次の目安で選ぶとほとんどのケースに対応できます。

• 写真・グラデーションの多い画像 → WebP（または AVIF）。互換性を最優先するならJPEG
• スクリーンショット・文字の入った画像・図表 → PNG、または可逆モードのWebP
• ロゴ・アイコン・単色のイラスト → SVG。SVGが用意できなければPNG
• 透明部分のある写真や商品画像 → WebP・AVIF・PNG（JPEGは透過に対応しない）
• 短いアニメーション → 動画（MP4・WebM）やアニメーションWebP。GIFは互換性が必要な場合に限る

新しい形式を使いつつ、古いブラウザにも対応したい場合は、HTMLのpicture要素で複数の形式を用意し、ブラウザに対応しているものを選ばせる方法があります。上から順に評価され、対応していない形式は読み飛ばされます。

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="商品の写真" width="800" height="600">
</picture>

JPEGやWebPを保存するときの「品質」は、どれだけ情報を捨てるかを決める設定です。数値が低いほどファイルは小さくなりますが、ノイズやぼやけが目立つようになります。品質の数値は形式やソフトによって基準が異なるため、「品質80ならこの画質」とは一概に言えませんが、写真をWebに載せるなら75〜85程度から試し、実際の表示サイズで見比べながら調整するのが現実的です。

• 品質を100にしても元の画像と完全に同じにはならず、ファイルは大きくなりやすい
• 非可逆形式で保存し直すたびに劣化が蓄積するため、編集は元画像から行い、最後に1回だけ圧縮する
• 元画像はPNGや撮影したままのファイルで保管しておく
• すでに強く圧縮された画像を再圧縮しても、ほとんど小さくならないか、かえって大きくなることがある
• PNGのような可逆形式には品質の設定がなく、サイズを減らすには色数を減らすか、画像を小さくする

このサイトの画像圧縮ツールでは、画像をJPEGまたはWebPに変換しながら、品質を1〜100の範囲（初期値は75）で調整できます。圧縮前後のプレビューとファイルサイズ、削減率を並べて表示するので、品質とサイズのバランスを確認しながら選べます。元の画像がすでに十分圧縮されている場合は、圧縮後のほうが大きくなることもあります。また、形式を変えたいだけなら画像形式変換ツールで、PNG・JPEG・WebPの間で変換できます（JPEG・WebPを選んだときは品質も指定できます）。透過のあるPNGをJPEGに変換すると、透明部分は白で塗りつぶされます。

ファイルサイズに最も大きく影響するのは、実は画質の設定よりも画像のピクセル数です。スマートフォンで撮った4000×3000ピクセルの写真を、幅800ピクセルの枠に表示するだけなら、ピクセル数は約25分の1で足ります。表示されない分のデータまでダウンロードさせるのは、表示速度の点でも通信量の点でも無駄です。

ただし、スマートフォンや高解像度ディスプレイでは、CSS上の1ピクセルを2〜3個の物理ピクセルで表示します（デバイスピクセル比）。幅800ピクセルで表示する画像を鮮明に見せたいなら、1600ピクセル程度の画像も用意しておき、srcset属性でブラウザに選ばせるのが理想です。

<img
  src="photo-800.webp"
  srcset="photo-800.webp 800w, photo-1600.webp 1600w"
  sizes="(max-width: 800px) 100vw, 800px"
  width="800" height="600"
  loading="lazy"
  alt="海辺の風景">

img要素にwidthとheightを指定しておくと、画像の読み込み前から表示領域が確保され、読み込み後にレイアウトがずれる現象（CLS）を防げます。ページの最初に見えない位置にある画像には loading="lazy" を付けると、必要になるまで読み込みを遅らせられます。

このサイトの画像リサイズツールでは、幅・高さ・倍率（％）のいずれかでサイズを指定し、縦横比を保ったまま縮小できます。出力形式はPNG・JPEG・WebPから選べます。圧縮・変換・リサイズのいずれのツールも、PNG・JPEG・GIF・WebP・BMPの画像を読み込め、処理はすべてブラウザの中で行われるため、画像がサーバーに送信されることはありません。ただし、ブラウザで描き直して保存するため、撮影日時や位置情報などのEXIF情報は残らず、アニメーションGIFは静止画になります。AVIFでの出力には対応していないため、AVIFが必要な場合は専用のソフトを使ってください。