| この記事の要点 |
|
このカテゴリについて
画像形式はファイル形式の中で最も種類が多く、用途・圧縮・色深度・透過対応で使い分けが激しいジャンルです。大別するとラスタ画像(ピクセルの集合)とベクタ画像(数式で図形を表現)の 2 系統で、ラスタはさらに可逆圧縮(PNG)と非可逆圧縮(JPEG)に分かれます。
2020 年代の Web では WebP(Google 由来)と AVIF(AV1 派生)が主役で、同じ画質で JPEG/PNG の 50〜70% のサイズに収まります。<picture> 要素で次世代形式をメインに、JPEG/PNG をフォールバックに置くのが現代のベストプラクティスです。
画像形式で扱う主な拡張子
| 拡張子 | 概要 |
|---|---|
.jpg / .jpeg | 写真向け非可逆圧縮。最も普及。透過なし |
.png | 可逆圧縮 + アルファ透過。スクリーンショット / ロゴに最適 |
.gif | 256 色 + 簡易アニメーション。現代では WebP/APNG に置換進行中 |
.webp | Google 由来。可逆/非可逆/透過/アニメすべて対応。サイズ効率高 |
.avif | AV1 派生。さらに高効率だがエンコード負荷高 |
.svg | ベクタ画像。XML ベース、拡大しても劣化なし |
.heic / .heif | iPhone 標準。HEVC 圧縮で高効率 |
.bmp | Windows ビットマップ。無圧縮で巨大、現代用途は限定的 |
.tiff / .tif | 印刷業界・スキャナ向け。可逆圧縮、複数ページ可 |
.ico | Windows アイコン / favicon。複数サイズを 1 ファイルに格納 |
用途別の使い分け
| 目的 | 推奨形式 | 理由 |
|---|---|---|
| 写真(Web 配信) | WebP / AVIF(JPEG フォールバック) | 同画質で 50-70% 軽量化 |
| ロゴ・アイコン | SVG | 拡大しても劣化せず、CSS で着色可能 |
| UI スクリーンショット | PNG | 可逆 + 透過、テキストが滲まない |
| favicon | SVG + ICO | モダンブラウザは SVG、IE は ICO |
| 写真の長期保存(編集前提) | RAW (.cr3 / .nef / .arw) | センサー情報を保持、後から現像可 |
| 印刷業 | TIFF / PDF | 業界標準、CMYK 対応 |
| アニメーション | WebP / APNG | GIF より高効率かつフルカラー |
関連カテゴリ・記事
子ページ
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript で base URL を取得する方法|window.location.origin
- 4 YouTube Data API v3 エラー一覧|403・400・404 の原因と対処
- 5 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 6 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 7 Spring Frameworkのアノテーション一覧
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- djangoのテンプレートの作成とヘッダー・フッターの共通化 2026-10-03 21:41:49
- テンプレートフラグメント(ヘッダー等の共有化) 2026-10-03 21:41:49
- reCAPTCHA v3 使い方(サンプル付き) 2026-10-03 21:37:05
- Content-Type一覧|MIMEタイプとはとHTTPでの主な使用場面 2026-10-03 21:37:05
- SpringにおけるAOPの使い方 2026-10-03 21:37:05
- X (Twitter) API でツイートできないがエラーが出ない問題の原因と対処 2026-10-03 11:33:01
- X (Twitter) API アプリケーション登録完全ガイド|v2・Bearer Token・OAuth 2.0 PKCE 2026-10-03 11:33:01
- X (Twitter) API 完全ガイド|従量課金の料金・単価(2026年10月)と v2 移行 2026-10-03 11:32:40
- Google DeepMind とは?Gemini・AlphaFold の開発元 2026-10-03 11:26:56
- Cursor とは?AI 統合型コードエディタの使い方・料金 2026-10-03 11:26:56
- Claude (Anthropic) とは?AIチャットの使い方・モデルファミリ・API 2026-10-03 11:26:56
- AIベンダー一覧:OpenAI・Anthropic・Google DeepMind・Microsoft・Meta 2026-10-03 11:26:56
- クラウド・インフラ完全ガイド — AWS/Azure/GCP/Kubernetes 2026-10-03 11:26:56
- テキストエディタ完全比較 (VS Code / Cursor / Vim / Emacs / IDE) 2026-10-03 11:26:56
- プログラミング学習プラットフォーム|Scratch・micro:bit ほか 2026-10-03 11:26:56