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. システム・仮想化

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