IMAGE

画像を Base64 に変換 — ブラウザで画像を Base64 Data URL に変換

画像を Base64 data URL に変換して、HTML・CSS・JSON に埋め込みます。すべてブラウザ内で動作。アップロード・アカウント・制限は一切なし。

● ローカル動作 · EXIF はアップロードされませんページ読み込み以降のツールによる通信：0件

Drop your image here

PNG, JPG, WebP, GIF, SVG, BMP (max 10MB)

こんなツールも

行をソート MD5 ハッシュ UUID ジェネレーター JSON → CSV Base64 エンコード PDF 分割 HAR → cURL TOML ツール .env ヘルパー MsgPack インスペクター PDF 圧縮 PDF → EPUB

エンコーダーを開く

画像の Base64 エンコードが解決するのは、特定の 1 つの問題です。それは、テキストしか受け付けないコンテキストで画像を運ぶ必要があるという問題です。この処理が必要になる場面としては、HTML メール（ほとんどのメールクライアントはデフォルトでリモート画像を読み込まない）、CSS ファイル（URL なしではバイナリデータを参照できない）、JSON ペイロード（有効な UTF-8 である必要がある）、コードコメントや README（バイナリ添付は git ホスティング間を移植できない）、単一ファイルの HTML エクスポートにおけるインライン SVG 風の使い方などがあります。エンコード自体はテキスト用の Base64 と同じで、入力 3 バイトごとに ASCII 文字 4 文字になりますが、data URL のラッパー（data:image/png;base64,...）が、どの MIME タイプを使うかをデコーダーに伝えます。

自明ではない判断は、いつ data URL を使い、いつ別ファイルを使うかです。data URL を使う根拠は、小さな画像に対しては強力です。たとえば 2 KB の favicon を data URL にすれば、余分な HTTP リクエストを 1 回節約でき、親ドキュメントと一緒に配信できます。逆の根拠は、大きな画像に対しては強力です。500 KB のヒーロー画像を data URL にすると、HTML が 33% 膨らんで 665 KB になり、ブラウザは個別にキャッシュできず、ペイロード全体をデコードし終えるまでレンダリングできません。実用的なしきい値はおおよそ 10 KB で、これを下回れば data URL が有利、上回れば別ファイルが有利です。

最終的なハンドオフとしては、送り先が HTML メールなら、data URL は画像がレンダリングされることを保証する唯一の方法であることが多くあります。ほとんどのメールクライアントはデフォルトでリモート画像をブロックするためです。送り先が小さな繰り返しパターンやアイコンを含む CSS ファイルなら、data URL でスタイルを自己完結させられます。送り先が JSON API のペイロードやデータベースのフィールドなら、data URL が正しい形式です。JSON はラッパーなしではバイナリを直接運べないためです。送り先が同じ画像を複数ページで使う公開 Web サイトなら、URL で参照する別ファイルが正解です。

使い方

画像を 1 枚以上ドロップする
JPG・PNG・WebP・GIF・BMP ファイルをドロップゾーンにドラッグするか、クリップボードから貼り付けます。各ファイルはローカルで読み取られ、Base64 エンコードはブラウザのタブ内で行われます。
出力形式を選ぶ
HTML/CSS 埋め込み用の data URL（`data:image/png;base64,iVBORw0KGgo...`）、JSON や YAML ペイロード用のプレフィックスなし生の Base64、または大きな画像向けの分割出力から選択できます。
結果をコピーまたはダウンロードする
エンコードされた文字列をクリップボードにコピーするか、.b64.txt ファイルとしてダウンロードできます。出力には元ファイルの MIME タイプが保持されるため、data URL をそのまま `<img src=...>` 属性に貼り付けられます。

よくある質問

どのような場合に Base64 data URL として画像を埋め込むべきですか？

親ドキュメントと一緒に読み込まれ、追加の HTTP リクエストを避ける必要があるような小さな画像（アイコン、10 KB 以下の UI 要素）に適しています。大きな画像には、URL で参照する別ファイルの方が適しています。Base64 はペイロードを 33% 膨らませ、ブラウザは data URL を個別にキャッシュできません。

data URL は画像の形式を保持しますか？

はい。MIME タイプのプレフィックスが元形式と一致します（PNG は `data:image/png;`、JPG は `data:image/jpeg;`、WebP は `data:image/webp;`、GIF は `data:image/gif;`）。ブラウザは MIME タイプをもとにデコーダーを選ぶため、data URL は无损でラウンドトリップします。

対応する最大サイズはどのくらいですか？

ブラウザタブの利用可能メモリ以外にハードな上限はありません。10 MB の画像は約 13.3 MB の Base64 テキストにエンコードされ、最近のブラウザならほぼ保持できます。非常に大きな画像（50 MB 以上）の場合、data URL として埋め込むのが適切かどうかを再検討してください。エンコード後の文字列が扱いにくくなります。

data URL は CSS で動作しますか？

SVG 画像も同じようにエンコードできますか？

はい。SVG も同様に Base64 にエンコードできます。ただし、SVG は元からテキストなので、Base64 を経由せず直接 HTML にインラインできます。SVG を CSS コンテキストで使う場合や、バイナリ-テキストエンコードを想定した JSON ペイロードで使う場合に限り、Base64 形式が有用です。

制限事項

サイズが 33% 増えるBase64 は常に入力を 4/3 に膨らませます。100 KB の画像は 133 KB の data URL になります。大きな画像にとっては、元サイズに加えて無視できないペナルティになります。しかもブラウザは data URL を個別にキャッシュできません。
デコードのラウンドトリップは非対応このツールはエンコードのみを行います。出力を検証したり、画像を元に戻したりしたい場合は、「Base64 を画像に」ツールを使用してください。エンコード自体は无损で可逆的であり、デコード後のバイトは元ファイルとビット単位で同一です。
大きな画像には不向き100 KB を超える画像の場合、data URL として埋め込むのは通常間違った選択です。HTTP リクエストのオーバーヘッドは小さく、data URL は独立してキャッシュできず、インライン化されたペイロードは親ドキュメントを肥大化させます。URL で参照する別ファイルを使用してください。

プラットフォーム別の注意点

macOS: Safari と Chrome はどちらも `<img>` および CSS コンテキストで data URL をデコードできます。README バッジ・コードコメント・インラインの CSS ルールに画像の文字列を入れたいが、別ファイルをホスティングできない場面では、ブラウザツールが最適です。
Windows: Edge と Chrome は HTML と CSS で data URL を問題なくレンダリングします。CSS ファイルや JSON マニフェストに小さな UI アイコンを埋め込みたくて、別アセットにするとデプロイが壊れるような場面では、ブラウザツールが最適です。
Linux: コマンドラインでの作業には `base64 -w 0 image.png` で生の Base64 を出力できます。`data:image/png;base64,` のプレフィックスを自動で付与したい場合や、複数の画像を一括でエンコードしたい場合は、ブラウザツールが最適です。
Web: 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。コマンドラインツールが利用できない制限のある環境や、チャットやメールから貼り付けたコンテンツをインラインアセットにしたい場合に便利です。