🖼️ GIF画像
アニメーション対応で 256 色まで。レガシー環境の互換性確認に
102,400 bytes
image/gif
104,857,600 bytes
image/gif
10,240 bytes
image/gif
10,485,760 bytes
image/gif
1,048,576 bytes
image/gif
26,214,400 bytes
image/gif
512,000 bytes
image/gif
52,428,800 bytes
image/gif
5,242,880 bytes
image/gif
GIF画像について
GIF (Graphics Interchange Format) は最大 256 色のインデックスカラー画像フォーマットです。複数フレームによるアニメーションに対応し、ロスレス圧縮を採用しています。MIME タイプは image/gif です。
各サイズの GIF を用意しています。レガシー環境での表示確認、アップロードバリデーションのテスト、アニメーション処理の検証に使えます。
GIF の特徴
- 最大 256 色 — フルカラー写真には向かない
- 複数フレームを 1 ファイルに格納してアニメーションを表現する
- 透過は 1 bit のみ — 半透明は表現できない
- 全フレームを展開するとメモリ消費がフレーム数に比例して増える
関連するリファレンス・記事
📖 つまずきやすいポイント
1 KB から 100 MB まで、PNG / JPEG / GIF / WebP を各サイズで用意しています。アップロード上限の確認、サムネイル生成、画像ライブラリの検証に使えます。形式ごとの違いは上の解説にありますが、実装で踏むのはたいてい形式に依らない共通の罠です。
| ケース | 何が起きるか | どうする |
|---|---|---|
| 小さい画像なのにメモリを使い切る | 必要なメモリはファイルサイズではなく展開後のピクセル数で決まります。20 KB の PNG でも 10,000 × 10,000 px なら、RGBA で約 400 MB を要求します。 | サイズ上限とは別に寸法の上限を設けます。デコード前にヘッダだけ読んで幅 × 高さを確認できます (PHP は getimagesize()、Python の Pillow は Image.open() の直後、load() を呼ぶ前)。 |
| 縦で撮った写真が横倒しで表示される | カメラは本体を回さず、EXIF の Orientation タグに「どちら向きか」だけを書きます。タグを読まない処理系では、撮ったままの向きで出ます。 | サムネイル生成の前に Orientation を読んで実際に回転させ、タグを消します。回転だけしてタグを残すと、対応ブラウザで二重に回ります。中身の確認は EXIF ビューアで。 |
| 変換したらアニメーションと透過が消えた | ブラウザの Canvas を通す変換は1 フレームしか扱えません。アニメーション GIF は 1 コマ目の静止画になります。JPEG へ変換すれば透過は白か黒に潰れます。 | アニメーションを保ったまま変換するなら、Canvas ではなく ImageMagick や libvips のような複数フレームを扱える処理系が要ります。透過を残すなら出力先は PNG か WebP を選びます。 |
| 画像に見えるファイルが画像ではない | 拡張子も Content-Type も送信側が名乗る値です。末尾に別のデータを連結した画像は、ビューアでは普通に開きます。 |
先頭バイトで判定したうえで、再エンコードして保存します。読み込んで書き出し直せば、余分なデータも埋め込まれたメタデータも落ちます。バイト列は マジックバイト表を参照。 |
ユーザーが投稿した画像をそのまま配信する場合、SVG だけは扱いが違います。SVG は画像ではなくスクリプトを実行できる文書なので、同一オリジンで配信するとクロスサイトスクリプティングの経路になります。別ドメインから配信するか、Content-Security-Policy と Content-Disposition: attachment で止めてください。