GIF を Base64 に変換

GIF を Base64 に変換する方法

1. .gif ファイルを枠にドロップするか、ファイル選択で選びます。
2. アニメーション GIF なら、最大幅、変換先、メタデータ（EXIF）を削除 には触れないでください。
3. 出力形式 を選びます。Data URI、CSS background-image、HTML <img>、Markdown、プレーン Base64 があります。
4. 出力をコピー を押します。メーターには、テキストがファイルよりどれだけ大きいかが表示されます。

プレビューではアニメーションが再生されるので、コピーする前に正しいファイルか確認できます。

アニメーションと再エンコードのオプション

出力の上にあるオプションは、画像を canvas に描き直します。canvas が持てるのは 1 枚の静止画だけで、ブラウザは canvas から GIF ファイルを書き出せません。そのため再エンコードした GIF は、最初のフレームだけ の PNG（選べば JPEG か WebP）になります。アニメーションの静止サムネイルを作るには便利です。アニメーションを残したいなら、オプションはオフのままにしてください。

アニメーション GIF が大きすぎる場合は、このツールにかける前に対処する必要があります。GIF エディターでフレーム数、寸法、カラーパレットを減らすか、短いループの MP4 や WebM に置き換えてください。動画のほうが、同じクリップの GIF よりたいていずっと小さくなります。

GIF の Base64 の見た目

下の 1×1 透明 GIF は 42 バイトで、Base64 では 56 文字です。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" width="1" height="1">

かつてはテーブルレイアウトの穴埋めに使われ、今でも遅延読み込みする画像のプレースホルダーの src として見かけます。有効な画像なら、壊れた画像のアイコンも余分なリクエストも出ないからです。

アニメーション GIF の Base64 サイズ

GIF の圧縮は今の基準では弱く、アニメーション GIF はすべてのフレームを保存します。2 秒のリアクション GIF でも数 MB になることは珍しくなく、Base64 のテキストにすれば数 MB の文字列になります。埋め込むのは、読み込み中のスピナーや小さなアイコンのような小さな GIF だけにしてください。それより大きなものは、通常のファイルならキャッシュや遅延読み込みができますが、Data URI はそれを含むページごとに毎回ダウンロードされます。

メールは Base64 の GIF に向いていません。Gmail などの Web メールは Data URI の画像を表示しないので、ニュースレターのアニメーション GIF はサーバーに置いたファイルへのリンクにします。メールの Base64 をご覧ください。

Node.js で GIF をエンコードする

import { readFileSync } from "node:fs";

const gif = readFileSync("spinner.gif");
const uri = `data:image/gif;base64,${gif.toString("base64")}`;

ストリームや URLセーフな出力については Node.js の Base64 で解説しています。Base64 文字列を再生できるファイルに戻すには、Base64 を GIF に変換 を使ってください。

よくある質問