4 つの主要なウェブ画像形式
適切な画像形式を選ぶとファイルサイズを半分にできます — 間違えれば 2 倍になります。各形式をいつ使うかの実用的な概観です。
JPG (JPEG)
最適：写真、多くの色の階調がある複雑なシーン。
圧縮：非可逆。微妙な色データを恒久的に破棄。 透明度：非対応。 ブラウザ対応：100% — すべてのブラウザとデバイス。 典型的なファイルサイズ：1200 万画素の写真が 85% 品質で 2〜5 MB。
JPG は 1992 年以来、写真の標準です。ほぼ普遍的な対応により、画像がどのプラットフォームで表示されるか分からないときの安全な既定値になります。
PNG
最適：スクリーンショット、ロゴ、イラスト、テキストのある画像、透明度のある画像。
圧縮：可逆。すべてのピクセルが正確に保たれます。 透明度：対応（アルファチャンネル）。 ブラウザ対応：100%。 典型的なファイルサイズ：1200 万画素の写真が 20〜40 MB（写真には不向き）。
ピクセル単位で完璧な正確さが重要なとき PNG を使ってください — UI スクリーンショット、グラフィック素材、複数回編集する画像に。ウェブサイトで写真に PNG を決して使わないでください。ファイルが大きすぎます。
WebP
最適：JPG より小さなファイルが欲しく、PNG より広い形式の柔軟性が欲しいウェブ画像。
圧縮：非可逆と可逆の両モードが利用可能。 透明度：対応。 ブラウザ対応：すべての現代ブラウザ（Chrome、Firefox、Safari 14+、Edge）。IE 非対応。 典型的なファイルサイズ：同等の視覚的品質で JPG より 25〜35% 小さい。
WebP は Google が作り、今やほとんどのウェブ画像の推奨形式です。対象が現代ブラウザを使うなら、JPG から WebP への切り替えは視覚的なトレードオフなしにページ重量を減らす簡単な方法です。
AVIF
最適：最大の圧縮が重要な高品質画像 — ヒーロー画像、大きな製品写真。
圧縮：非可逆と可逆。 透明度：対応。 ブラウザ対応：Chrome 85+、Firefox 93+、Safari 16+。良いが普遍的ではない。 典型的なファイルサイズ：同等の品質で JPG より 40〜50% 小さい。
AVIF は主流のどの形式よりも最高の圧縮を提供します。トレードオフはエンコードの遅さ（当変換ツールは大きなファイルに数秒かかることがあります）と WebP よりやや低いブラウザ対応です。
簡単な判断ガイド
ウェブ用の写真 → WebP（最大の互換性には JPG） 透明度のあるロゴやアイコン → PNG（または WebP） 現代サイトのヒーロー画像 → AVIF メールで共有する画像 → JPG スクリーンショット → PNG 共有する iPhone 写真 → JPG（HEIC から変換）