| この記事の要点 |
|
概要
GIF (Graphics Interchange Format、発音は「ジフ」または「ギフ」で長らく議論が続いた) は、1987 年に CompuServe が策定した可逆圧縮のラスタ画像形式である。インターネット黎明期の事実上の標準で、Web ブラウザ Mosaic / Netscape Navigator が両対応していたため、初期ウェブのほぼすべての画像が GIF だった。当時の電話回線では、画像サイズを 256 色に絞ること自体が実用上の必須条件だった。
後年、アニメーション (複数フレームを 1 つのファイルに連結し、各フレームに表示時間を持たせる仕組み) が拡張仕様 GIF89a で加わり、これがミーム・リアクション動画文化を生んだ。Twitter / Discord / Slack で動く絵文字や反応画像のほとんどは、技術的には GIF か MP4 ループのいずれかである。
内部構造とマジックナンバー
GIF は ASCII で読めるシグネチャから始まる珍しい形式で、テキストエディタで開いても先頭の 6 バイトは判読できる。
| 場所 | HEX / ASCII | 意味 |
|---|---|---|
| 先頭 6 バイト | 47 49 46 38 37 61 = GIF87a | 1987 年版 (透過なし、アニメなし) |
| または | 47 49 46 38 39 61 = GIF89a | 1989 年版 (透過、アニメ、コメント等) |
| 7-10 バイト目 | 2 バイトずつ | 論理画面の幅・高さ (リトルエンディアン) |
| 11 バイト目 | パックドフィールド | グローバルカラーテーブル有無、色解像度 |
| 区切り | 2C | イメージブロック開始 |
| 区切り | 21 F9 | Graphic Control Extension (透過色・遅延) |
| 末尾 | 3B | トレイラー (ファイル終端) |
1 つのファイルに複数のイメージブロックを並べることでアニメーションを実現する。各フレームの直前に Graphic Control Extension を置き、表示時間 (1/100 秒単位) と透過色のインデックスを指定する。
主な用途
- SNS のリアクション・ミーム画像: Slack / Discord / Twitter で「うけた」を表現する短いループ動画。
- UI のローディングインジケータ: クルクル回るスピナー画像。現在は CSS アニメや SVG にほぼ置換された。
- チュートリアル動画の短いキャプチャ: 操作デモを 5-10 秒のループに収める用途。GitHub の README で頻出。
- 初期ウェブのバナー広告・ボタン: 90 年代〜2000 年代前半は GIF アニメ広告が氾濫した。今は CSS / Lottie / 動画に置換。
関連形式との比較
| 形式 | 色数 | 透過 | 圧縮 | アニメ | 同尺のサイズ感 |
|---|---|---|---|---|---|
| GIF | 256 色まで | 1bit | LZW 可逆 | あり | 1.0 (基準) |
| APNG | フルカラー | 8bit α | Deflate 可逆 | あり | 0.7〜1.2 |
| WebP | フルカラー | 8bit α | 非可逆/可逆 | あり | 0.3〜0.5 |
| MP4 (H.264) | フルカラー | なし | 非可逆 | あり (動画) | 0.05〜0.15 |
| WebM / AV1 | フルカラー | あり (一部) | 非可逆 | あり (動画) | 0.04〜0.10 |
「アニメ GIF」を実装したい場合、ウェブの今の常識は <video autoplay muted loop playsinline> で MP4 / WebM を再生するアプローチで、ファイルサイズが桁違いに小さくなる。GIF を直接配信するのは互換性のためだけ、と割り切ってよい。
編集・閲覧ツール
- ImageMagick:
magick -delay 10 -loop 0 frame*.png out.gifで連番画像から GIF アニメを生成。 - FFmpeg: 動画 → GIF。
ffmpeg -i in.mp4 -vf "fps=15,scale=480:-1" out.gif。palettegen / paletteuse を使うと品質が大幅に上がる。 - gifsicle: GIF 専用の最適化・編集 CLI。フレーム削除、パレット最適化、サイズ削減に強力。
- ScreenToGif (Windows): 画面キャプチャを直接 GIF / APNG / MP4 で吐ける軽量ツール。
- Photoshop: タイムラインパネルでフレーム単位編集。「Web 用に保存 (従来形式)」で GIF 書き出し。
注意点・落とし穴
- 256 色制限による色破綻: 写真や複雑なグラデーションを GIF にすると、ディザリングしてもバンディング (色の段差) が目立つ。動画 → GIF 変換時は palettegen で各クリップ最適パレットを作るのが定石。
- 1bit 透過の縁ガビガビ問題: 半透明が使えないので、丸いアイコンの縁が背景色と完全に切り替わる。背景色が決まっているなら同色で縁を作る、決まっていないなら PNG / WebP に切り替える。
- 巨大化しやすい: 30 秒のループで 20MB 超の GIF が珍しくない。SNS / Slack の添付サイズ制限を超える。
- LZW 特許 (歴史的事情): かつて Unisys 特許でフリーソフトに使用料を求める動きがあり、これが PNG 誕生の直接の動機。特許は失効済み なので現在は気にしなくてよい。
- アクセシビリティ: 自動再生 GIF は前庭障害・てんかんの誘因になり得る。重要な情報は GIF だけで伝えず、代替テキストを必ず添える。
- フレーム重ね合わせモード: 各フレームを「直前にどう重ねるか」(restore previous / restore background / do not dispose) の設定を誤ると、残像が積み重なる事故が起きる。
関連リンク
- 画像形式 — 本カテゴリの親ページ
- ファイル拡張子とは — 拡張子全般の概論
- PNG (.png) — 静止画では GIF の上位互換
- WebP (.webp) — アニメ用途で GIF の置換候補
- AVIF (.avif) — さらに高効率な次世代形式
- アニメーション コンテンツでの動画フォーマットの使用 — GIF を MP4 / WebM に置き換える具体的な実装ガイド
- 次世代フォーマットでの画像の配信 — <picture> での切り替え
子ページ
子ページはありません
人気ページ
- 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