JPG（JPEG）
JPG は写真向けに最適化された不可逆圧縮形式です。なめらかに変化する色調（肌・空・木々）に強く、人間が気付きにくい情報を捨てて圧縮します。圧縮率は強圧縮（小サイズだが目立つブロックノイズ）からほぼロスレス（大サイズで高品質）まで調整可能です。透過には非対応で、テキスト・線画・大きな単色領域には弱く崩れやすいです。すべてのブラウザ・OS で動作します。
PNG
PNG はアルファ透過に完全対応した可逆圧縮形式です。スクリーンショット・線画・アイコンなど、ピクセル単位で正確さが必要な画像に最適です。圧縮自体は良好ですが、写真では最新形式に比べて効率は劣り、典型的な写真では同じ品質の JPG の数倍のサイズになります。PNG-8（256 色パレット）はアイコン用途で非常に小さなファイルを作れますが、2026 年現在では出番はほぼありません。
WebP
WebP は Google が開発した現代的なフォーマットで、可逆／不可逆圧縮の両方、透過、アニメーションに対応します。写真では同じ品質で JPG より約 25〜35% 小さくなります。透過付きグラフィックスでは PNG より約 20〜25% 小さくなることが多いです。ブラウザサポートは Chrome / Firefox / Safari / Edge のすべての現代エンジンで動作します。新規の Web 用写真であれば、まず WebP を選んで問題ありません。
AVIF
AVIF は AV1 動画コーデックをベースにした比較的新しいフォーマットです。WebP より同じ視覚品質でファイルサイズを小さくでき、JPG 比で約 30〜50%、WebP 比で約 20% 削減できます。HDR・広色域・10/12 ビット深度に対応します。2026 年時点でブラウザサポートは全主要エンジンに広がっていますが、エンコードは WebP よりかなり遅く、大量の画像パイプラインでは問題になり得ます。帯域がエンコード時間より重要な場合に AVIF を選びましょう。
SVG
SVG はピクセルではなく、パス・図形・テキストで画像を記述するベクター形式です。任意サイズに拡大縮小しても品質が劣化せず、対話やアニメーションにも対応し、ロゴ・アイコン・イラストでは非常に小さなファイルになります。一方、写真には不向きです（詳細が増えるとファイルサイズが爆発的に増えるため）。Illustrator・Figma・Inkscape などのベクターツールで作った素材は、そのまま SVG として使うのがベストです。
HEIC / HEIF
HEIC（HEIF の画像バリアント）は新しい iPhone のデフォルト撮影フォーマットです。同じ品質で JPG の約半分のサイズになり、10 ビット色・透過・画像シーケンスにも対応します。ブラウザサポートは限定的で、Safari は対応していますが Chrome と Firefox は非対応です。Web 配信時は JPG・WebP・AVIF へ変換してから配信してください。本サイトの画像フォーマット変換は HEIC 入力をブラウザ内で直接処理できます。
選び方クイックチャート
- Web 配信向け写真: 安全策は WebP、エンコード時間を許容できるなら AVIF。
- 互換性重視の写真: JPG。
- スクリーンショット・UI モックアップ: PNG（または WebP ロスレス）。
- ロゴ・アイコン・イラスト: SVG。
- 透過が必要な画像: PNG、WebP、AVIF。
- iPhone で撮影した画像: アーカイブは HEIC、Web 用は変換。
解像度と画素密度
高 DPI ディスプレイでは、論理 200 × 200 ピクセルの画像を鮮明に見せるために 400 × 400 や 600 × 600 の実ピクセルで配信する必要があります。HTML の「srcset」と「sizes」属性で複数解像度を提供し、ブラウザに適切なものを選ばせます。これを怠ると、低 DPI 画面に必要以上に大きなファイルを送るか、高 DPI 画面に不鮮明な画像を送ることになります。
圧縮品質パラメータ
ほとんどのエンコーダは 0〜100 の品質パラメータを公開しています。JPG では 75〜85 が一般的な写真で原本と区別がつかないレベルです。60 を下回るとアーティファクトが目立ち始めます。WebP では 75 が良いデフォルトで、80〜85 ならほぼロスレスです。AVIF はスケールが異なり、品質 30 が JPG の 75 に近いです。グローバル設定を決める前に、必ず実際のコンテンツでテストしてください。