画像を Base64 に変換

あらゆる画像を Data URI に。HTML・CSS のスニペットもそのまま貼り付け可能。

画像をここにドロップ
クリックでファイルを選択、またはクリップボードから貼り付け

Base64 Data URI は画像をテキストとしてコードに直接埋め込み、HTTP リクエストを 1 回削減します。CSS、HTML メール、単一ファイルのデモにおける小さなアイコン・ロゴ・プレースホルダーグラフィックの定番テクニックです。

画像をドロップすると Data URI が即座に生成されます —— ボタン押下は不要。生の Base64 文字列に加えて、HTML の <img> タグと CSS の background-image プロパティの完成済みスニペット、そして Base64 がバイナリ比で約 33% 膨らむことを示すサイズ比較も表示されます。

エンコードは純粋なテキスト変換なので、あなたの端末上でミリ秒で完了します。アイコンもアバターもスクリーンショットも、サーバーには一切触れられません。

使い方

  1. 画像をドロップまたは貼り付けます（コピーしやすいよう 1 枚ずつがおすすめ）。
  2. Data URI をコピーするか、完成済みの HTML・CSS スニペットを取得します。
  3. コードに貼り付けて完了。ホスティングは不要です。

このツールのポイント

よくある質問

Base64 画像はどんなときに使うべき？
おおよそ 5〜10 KB 以下の小さな素材：小さなアイコン、箇条書き記号、シンプルなロゴなど。そこでは削減できる HTTP リクエストが 33% のサイズ増を上回ります。写真やそれ以上の大きさの画像は、通常どおり圧縮ファイルとして配信すべきです。Base64 では肥大化し、キャッシュも活かせません。
Base64 版はなぜ元ファイルより大きいの？
Base64 は 3 バイトのバイナリを 4 文字のテキストにエンコードするため、約 33% 増えます。サーバー側の Gzip 圧縮で一部は取り戻せますが、エンコード後の方が依然として大きくなります。
メールで Base64 画像は使えますか？
対応はまちまちです。セキュリティ上の理由から、多くのデスクトップメールクライアントやウェブメールが Data URI を除去・ブロックします。メールマーケティングでは通常どおり画像をホストしてください。
サイズ制限はありますか？
技術的にはありませんが、数 MB の文字列をテキストエリアに置くとブラウザやエディターがもっさりします。アイコンや中程度のグラフィックなら快適です。巨大な写真はファイルとして参照する方が得策です。