使い方
- GIF をドロップエリアにドロップするか、クリックして選択するか、画像を貼り付けます。
- アニメーションを保つには、「変換形式」を「元の形式のまま」にし、「最大幅」は設定しないでおきます。
- 元のサイズとエンコード後のサイズを確認します。アニメーション GIF はすぐにサイズが大きくなります。
- img タグや CSS の背景画像の出力をコピーするか、data URI、Base64 文字列のみ、Markdown のいずれかの形式を使います。
GIF 形式について
GIF（Graphics Interchange Format、MIME タイプ image/gif）は 1987 年に登場した形式です。各フレームは最大 256 色のパレットを使い、LZW でロスレス圧縮されます。透過は「完全に透明」か「不透明」かの二択で、パレットの 1 色を透明として指定できますが、半透明は表現できません。1 つのファイルに、それぞれ表示時間を持つ多数のフレームとループ回数を格納できるため、GIF は短いアニメーションの定番形式になりました。
GIF の Base64 は、一般的な GIF89a では R0lGODlh、古い GIF87a では R0lGODdh で始まります。
アニメーションを保つには
元の形式のままにすると、ツールはファイルのバイト列をそのままエンコードします。そのため data URI は、<img> タグで使っても CSS の背景として使っても、元のファイルとまったく同じようにアニメーションします。
PNG、JPEG、WebP に変換したり「最大幅」を設定したりすると、ブラウザ内で画像が描画し直され、最初のフレームだけが残ります。アニメーションの静止画プレビューが欲しい場合には便利ですが、アニメーションのまま使いたい場合はどちらのオプションも使わないでください。
GIF の data URI が今でも有効な場面
- CSS で使う、小さな読み込み中スピナーやアニメーションするステータスアイコン。
- プレースホルダーの
srcとして使われる、昔ながらの 1x1 の透明ピクセル。わずか数十バイトで、Base64 でも 100 文字を大きく下回ります。 - 色数の少ないシンプルな線画。GIF ならコンパクトに収まります。
大きなアニメーションには向きません。2 MB のリアクション GIF は約 2.7 MB のテキストになり、単独ではキャッシュできません。動画ファイルやアニメーション WebP をホストするほうがはるかに軽量です。
.loading {
background: url("data:image/gif;base64,R0lGODlh...") no-repeat center;
}
<img src="data:image/gif;base64,R0lGODlh..." width="32" height="32" alt="Loading">よくある質問
Base64 エンコード後も GIF はアニメーションしますか？
はい。元の形式のままにし、リサイズしなければアニメーションします。Base64 には、すべてのフレームとループ設定を含むファイル全体が格納されます。
変換後に GIF が動かなくなったのはなぜですか？
PNG、JPEG、WebP への変換やリサイズを行うと、最初のフレームから画像が描画し直されます。このツールではアニメーション PNG やアニメーション WebP を作成できないため、動きを残すには元の GIF のままにしてください。