◀ 3.

WebP / AVIF / JPEG / PNG / SVG / GIF など主要画像形式の選び方完全ガイド

▶
この記事の要点
  • 画像形式: ラスタ（ピクセルの集合）/ ベクタ（数式表現）/ アニメ / HDR の 4 系統
  • Web の現代スタックは WebP / AVIF へ移行中。JPEG / PNG はフォールバック用
  • ロゴ・アイコンはSVG。拡大しても劣化せず、CSS で着色も可能
  • 写真の長期保存は RAW / 配布は JPEG / 透過が要るなら PNG / WebP / AVIF
  • iPhone 標準は HEIC。互換性のため共有時は JPEG 変換が一般的

このカテゴリについて

画像形式はファイル形式の中で最も種類が多く、用途・圧縮・色深度・透過対応で使い分けが激しいジャンルです。大別するとラスタ画像（ピクセルの集合）とベクタ画像（数式で図形を表現）の 2 系統で、ラスタはさらに可逆圧縮（PNG）と非可逆圧縮（JPEG）に分かれます。

2020 年代の Web では WebP（Google 由来）と AVIF（AV1 派生）が主役で、同じ画質で JPEG/PNG の 50〜70% のサイズに収まります。<picture> 要素で次世代形式をメインに、JPEG/PNG をフォールバックに置くのが現代のベストプラクティスです。

画像形式で扱う主な拡張子

拡張子概要
.jpg / .jpeg写真向け非可逆圧縮。最も普及。透過なし
.png可逆圧縮 + アルファ透過。スクリーンショット / ロゴに最適
.gif256 色 + 簡易アニメーション。現代では WebP/APNG に置換進行中
.webpGoogle 由来。可逆/非可逆/透過/アニメすべて対応。サイズ効率高
.avifAV1 派生。さらに高効率だがエンコード負荷高
.svgベクタ画像。XML ベース、拡大しても劣化なし
.heic / .heifiPhone 標準。HEVC 圧縮で高効率
.bmpWindows ビットマップ。無圧縮で巨大、現代用途は限定的
.tiff / .tif印刷業界・スキャナ向け。可逆圧縮、複数ページ可
.icoWindows アイコン / favicon。複数サイズを 1 ファイルに格納

用途別の使い分け

目的推奨形式理由
写真（Web 配信）WebP / AVIF（JPEG フォールバック）同画質で 50-70% 軽量化
ロゴ・アイコンSVG拡大しても劣化せず、CSS で着色可能
UI スクリーンショットPNG可逆 + 透過、テキストが滲まない
faviconSVG + ICOモダンブラウザは SVG、IE は ICO
写真の長期保存（編集前提）RAW (.cr3 / .nef / .arw)センサー情報を保持、後から現像可
印刷業TIFF / PDF業界標準、CMYK 対応
アニメーションWebP / APNGGIF より高効率かつフルカラー

関連カテゴリ・記事

Post Share
子ページ
  1. JPEG（.jpg / .jpeg）
  2. PNG（.png）
  3. GIF（.gif）
  4. SVG（.svg）
  5. WebP（.webp）
  6. AVIF（.avif）
  7. HEIC（.heic / .heif）
  8. BMP（.bmp）
  9. TIFF（.tiff / .tif）
  10. ICO（.ico）
同階層のページ
  1. ファイル拡張子とは
  2. テキスト・ドキュメント形式
  3. 画像形式
  4. 音声・動画形式
  5. アーカイブ・圧縮形式
  6. 実行ファイル・パッケージ
  7. プログラミング・スクリプト
  8. Web・データ・設定
  9. データベース・データ交換
  10. フォント
  11. システム・仮想化
2026-06-22 08:44:09 atom 21

人気ページ

最近更新/作成されたページ