3.

GIF(.gif)画像形式の完全ガイド — 256色制限・LZW・アニメーション・WebP/MP4 への置換

編集
この記事の要点
  • GIF (Graphics Interchange Format) は 1987 年に CompuServe が策定した 256 色制限の可逆圧縮 画像形式
  • 圧縮は LZW で、かつて Unisys の特許でフリーソフトに使用料が課された (現在は 特許失効済み)
  • アニメーション 機能を持つことから、SNS のリアクション画像・ミーム文化の中心メディアとなった
  • 透過は 1bit (透明か不透明か) のみ で、半透明は表現できない (PNG / WebP との大きな違い)
  • 256 色パレット 制限により写真には不向き。ディザリングで擬似的に色数を増やすが品質には限界がある
  • 現代では WebP / APNG / MP4 (動画) での置換が進んでいる。同じ尺なら MP4 が 10 分の 1 以下のサイズになる
  • マジックナンバーは GIF87a または GIF89a の ASCII 文字列で、バージョン差は透過とアニメの有無

概要

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 = GIF87a1987 年版 (透過なし、アニメなし)
または47 49 46 38 39 61 = GIF89a1989 年版 (透過、アニメ、コメント等)
7-10 バイト目2 バイトずつ論理画面の幅・高さ (リトルエンディアン)
11 バイト目パックドフィールドグローバルカラーテーブル有無、色解像度
区切り2Cイメージブロック開始
区切り21 F9Graphic 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 / 動画に置換。

関連形式との比較

形式色数透過圧縮アニメ同尺のサイズ感
GIF256 色まで1bitLZW 可逆あり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) の設定を誤ると、残像が積み重なる事故が起きる。

関連リンク

編集
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)

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