ウェブで使える画像フォーマットは過去最多——そして、これは良いニュースです。それぞれが異なる仕事のために設計されており、正しいフォーマットを選ぶだけでページが 5〜10 倍軽くなります。本記事は 2026 年で押さえておくべき 7 つのフォーマット ——JPG・PNG・WebP・AVIF・SVG・GIF・HEIC—— の実践リファレンスです。
JPG / JPEG —— 写真の標準
1992 年公開、写真の事実上の標準。非可逆圧縮、24bit カラー、透過なし。ブラウザ対応 100%。連続階調（写真・グラデーション）には依然として優秀ですが、同じ画質なら WebP・AVIF のほうが小さくなります。
使う：互換性最優先、メール添付、カメラからの書き出し。避ける：ロゴ・スクリーンショット・鋭いエッジ・透過が必要な画像。
PNG —— 可逆と透過
1996 年に登場し、古い GIF を置き換えました。可逆圧縮、アルファ透過、グラフィックに最適。代償はサイズ：同じ写真は JPG の 5〜10 倍になります。
使う：透過、ロゴ、アイコン、スクリーンショット、シャープなグラフィック。避ける：本番サイトの写真。WebP に変換 しましょう。
WebP —— 現実的な現代標準
Google 製、2010 年から安定。2026 年のウェブ画像の「無難な単一解」。可逆/非可逆・アルファ透過・アニメーション対応。同画質で PNG より 25〜35%、JPG より 25% 小さく、ブラウザ対応は 97% 超。
使う：ウェブへの公開全般。避ける：メール添付（一部クライアントで未対応）、保存用マスター。
AVIF —— 帯域幅の覇者
AV1 ベース。現代フォーマットの中で最小。同画質で WebP よりさらに 20〜30% 小さく、HDR、広色域、透過、アニメに対応。2025 年以降ブラウザ対応 95% 超。難点はエンコードが遅く、編集ツールがまだ追いついていないことです。
使う：帯域がシビアなとき（モバイル中心・画像が多いサイト）。<picture> で AVIF → WebP → JPG/PNG の順で配信。避ける：ワークフローがまだ非対応のとき。
SVG —— ベクターで無限解像度
SVG は本質的に他と別物：図形を記述する XML で、ピクセルではありません。ロゴ、アイコン、図表、イラストはどこまで拡大しても鮮明。書き方しだいで超軽量。CSS で装飾、JS でアニメ可能。
使う：ロゴ、アイコン、インフォグラフィック、フラットなイラスト。公開前に必ず SVG オプティマイザー を通します。避ける：写真（ベクターで扱うものではありません）。
GIF —— レガシーアニメ
1987 年生まれ。アニメに対応しますが、構造的に非効率：256 色、ファイルが重い、まともな音声なし。2026 年では多くの場合 MP4 動画、アニメ WebP、アニメ AVIF に置き換えるのが正解。
使う：受け取り側プラットフォーム（一部チャット）が GIF しか受けないとき。避ける：自分で管理する現代サイトのほぼすべて。
HEIC / HEIF —— iPhone のフォーマット
iOS 11 以降、iPhone 標準。同画質で JPG の約半分のサイズ、HEIC + Live Photos も対応。難点はブラウザ対応が限定的で、デスクトップツールも整っていないこと。
使う：iPhone での撮影と iCloud 保存。避ける：ウェブ公開。HEIC → JPG ツール で変換してから。
用途別ベストチョイス
- ランディングページの主要写真 →
<picture>で AVIF + WebP + JPG フォールバック - ヘッダーのブランドロゴ → SVG（必要なら PNG フォールバック）
- ドキュメントの UI スクショ → 可逆 WebP（最大互換なら PNG）
- EC の商品リスト写真 → AVIF + WebP、遅延読み込み
- 動画チュートリアル → MP4（autoplay/muted/loop）— GIF は不可
- メール署名 → JPG（互換性）または透過 PNG
- 写真家のアーカイブマスター → 元 RAW + JPG 副本。PNG はグラフィック作業のみ。
現代の picture 要素パターン
<picture> は最良の友。新しいブラウザには新しいフォーマット、古いブラウザには優雅な代替を：
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/24picture/photo.jpg" alt="..." width="1600" height="1067" loading="lazy" decoding="async">
</picture>ブラウザは上から順に試し、最初に対応した形式を使います。最後の <img> が最終フォールバック。
判断早見表
- ウェブの写真 → AVIF（WebP/JPG フォールバック付き）
- アーカイブ写真 → 高画質 JPG
- ロゴ / アイコン / イラスト → SVG
- UI スクショ → 可逆 WebP または PNG
- 透過のあるウェブ画像 → WebP
- アニメーション → MP4（またはアニメ WebP）
- iPhone 撮影 → HEIC、ウェブには WebP/JPG
実際に使うツール
- JPG → PNG：透過を追加
- PNG → WebP：グラフィックの軽量化
- HEIC → JPG：iPhone 写真
- 画像圧縮：あらゆるフォーマットを軽く
- SVG 最適化：ロゴ・アイコン
- バッチ変換：フォルダ単位で一気に
Pro Tip：素材タイプごとに本番フォーマットを 1 つに統一しましょう。写真 → AVIF/WebP、グラフィック → SVG または可逆 WebP、アニメーション → MP4。それ以外はフォールバックや例外。
まとめ
画像フォーマットは宗教ではなく、道具箱です。JPG と PNG が過去を、WebP と AVIF が現在を担い、SVG はジオメトリ全般、GIF はほぼ歴史。各画像に最適なフォーマットを選べば、ページは速く、ビジュアルは鋭く、帯域コストは低く保てます。
