画像を Base64 に変換するには？

画像を変換ツールにドロップするか貼り付けてください。Base64 文字列、データ URI、そのまま使える HTML、CSS、Markdown、JSON のスニペットが、それぞれコピーボタン付きですぐに表示されます。

Base64 を画像に変換するには？

「Base64 → 画像」に切り替え、データ URI または生の Base64 文字列を貼り付けてください。画像がすぐにプレビューされ、正しい拡張子でダウンロードできます。

Base64 にすると画像は大きくなりますか？

はい、約 3 分の 1 大きくなります。3 バイトごとに 4 文字になるためです。埋め込みが有効なのはリクエストを 1 つ減らせる小さな画像で、大きな写真には向きません。

CSS で Base64 画像を使うには？

URL として使います：background-image: url("data:image/png;base64,…");。CSS のスニペットをコピーすれば、すでにその形になっています。

SVG は Base64 でエンコードすべきですか？

通常は不要です。URL エンコードした SVG のデータ URI の方が Base64 版より小さく、読みやすさも保たれ、最近のすべてのブラウザが対応しています。このツールは SVG ファイルに対して既定でこの形式を生成します。

Base64 画像はメールで表示されますか？

対応はまちまちで、Gmail を含む多くの Web メールはデータ URI の画像をブロックします。メールでは、cid: で参照する添付画像やサーバーに置いた画像の方が確実です。

画像はアップロードされますか？

いいえ。画像はブラウザ内で読み込まれてエンコードされ、サーバーには何も送信されません。

画像 Base64 変換

画像を HTML、CSS、JSON 用の Base64 データ URI に変換し、元にも戻せます。処理はすべて端末内で完結し、アップロードは一切ありません。

入力: PNG · JPEG · WebP · GIF · SVG · ICO · Base64
出力: Base64 · data URI · HTML · CSS · image file

Base64 に変換する画像をドロップ

PNG、JPEG、WebP、GIF、AVIF、SVG などに対応。クリップボードから画像を貼り付けることもできます。端末の外に出ることはありません。

画像を Base64 に、Base64 を画像に変換

この画像 Base64 変換ツールは、PNG、JPEG、WebP、GIF、SVG を Base64 文字列とデータ URI に変換し、実際に貼り付けるスニペットも書き出します。HTML の img タグ、CSS の background-image ルール、Markdown、JSON 文字列です。逆方向にも使えます。データ URI や生の Base64 を貼り付けると画像が表示され、実際の形式を確認してダウンロードできます。画像はお使いの端末で読み込まれ、アップロードされることはありません。

画像を Base64 に変換する方法

画像をページにドロップするか、選択するか、Ctrl/⌘ + V でクリップボードから貼り付けます。
プレビュー、寸法、サイズを確認します。写真ならWebP で再エンコードをオンにすると文字列が小さくなります。SVG なら URL エンコードした SVG をオンのままにします。
必要な形式をコピーします。生の Base64、データ URI、HTML の <img> タグ、CSS の background-image、Markdown、JSON 文字列から選べます。
逆方向に変換するには Base64 → 画像に切り替え、文字列を貼り付けて、画像をダウンロードするか別のツールに送ります。

データ URI とは

データ URI は、ファイルの中身を URL に直接入れたものです：data:image/png;base64,iVBORw0KGgo…。カンマの前の部分でメディアタイプと Base64 エンコードであることを示し、残りが画像そのものです。src 属性、CSS の url()、Markdown の画像など、ブラウザが画像の URL を受け付ける場所ならどこでもデータ URI が使え、別のリクエストなしで画像が届きます。

その代償はサイズです。Base64 にするとデータは約 33% 大きくなり、埋め込んだ画像は単独でキャッシュできず、それを含む HTML や CSS のたびに再びダウンロードされます。埋め込みが効果的なのは、アイコン、小さなロゴ、プレースホルダー、HTML メールや単一ファイルのドキュメント内の画像といった小さな画像で、数百 KB の写真では得るものより失うものの方が大きくなります。

どのスニペットを使うか

生の Base64: エンコードされたバイトだけです。Base64 を求め、形式を別に保存する API や JSON のフィールド向けです。
データ URI: 完全な data: URL で、画像の URL を受け付けるどこにでもそのまま使えます。
HTML <img>: データ URI、ファイル名から作った alt テキスト、画像の幅と高さを含む img タグです。幅と高さがあるとレイアウトのずれを防げます。
CSS background-image: スタイルシート用の宣言です。小さな繰り返しの装飾に向いており、クリティカル CSS 内の大きな画像には避けてください。
Markdown と JSON: Markdown 構文の画像と、正しく引用符で囲みエスケープした JSON 文字列としてのデータ URI です。

SVG：Base64 より URL エンコードが有利

SVG はテキストなので、Base64 はまったく必要ありません。URL に入れられない一部の文字だけをパーセントエンコードし、ダブルクォートをシングルクォートに変えると、data:image/svg+xml,… の URI になります。これは通常 Base64 版より 15 〜 30% 小さく、gzip でもよく圧縮され、読みやすさも保たれます。ここでは SVG ファイルの既定の動作ですが、システムが Base64 を必須とする場合はオフにしてください。

ラスター画像の場合、変換の前に WebP で再エンコードすると、写真やスクリーンショットでは文字列が半分以下になることもよくあります。ブラウザ自身のエンコーダーを使うため、ブラウザが WebP を書き出せない場合はそのことを知らせ、得られた結果を使います。形式や品質をより細かく調整するには、先に画像コンバーターを使ってください。

Base64 から画像へ

完全なデータ URI、生の Base64、さらには <img> タグや CSS ルール全体を貼り付けると、ツールが画像を取り出してプレビューし、サイズと寸法を表示します。形式はラベルを信用せず画像自体の先頭バイトから読み取るので、PNG とラベル付けされた JPEG も実際の形式でダウンロードされます。PDF や ZIP など画像以外のものが入った Base64 には、あらゆるファイル形式に対応した Base64 デコーダーを使ってください。

よくある質問

画像を Base64 に変換するには？: 画像を変換ツールにドロップするか貼り付けてください。Base64 文字列、データ URI、そのまま使える HTML、CSS、Markdown、JSON のスニペットが、それぞれコピーボタン付きですぐに表示されます。
Base64 を画像に変換するには？: 「Base64 → 画像」に切り替え、データ URI または生の Base64 文字列を貼り付けてください。画像がすぐにプレビューされ、正しい拡張子でダウンロードできます。
Base64 にすると画像は大きくなりますか？: はい、約 3 分の 1 大きくなります。3 バイトごとに 4 文字になるためです。埋め込みが有効なのはリクエストを 1 つ減らせる小さな画像で、大きな写真には向きません。
CSS で Base64 画像を使うには？: URL として使います：background-image: url("data:image/png;base64,…");。CSS のスニペットをコピーすれば、すでにその形になっています。
SVG は Base64 でエンコードすべきですか？: 通常は不要です。URL エンコードした SVG のデータ URI の方が Base64 版より小さく、読みやすさも保たれ、最近のすべてのブラウザが対応しています。このツールは SVG ファイルに対して既定でこの形式を生成します。
Base64 画像はメールで表示されますか？: 対応はまちまちで、Gmail を含む多くの Web メールはデータ URI の画像をブロックします。メールでは、cid: で参照する添付画像やサーバーに置いた画像の方が確実です。
画像はアップロードされますか？: いいえ。画像はブラウザ内で読み込まれてエンコードされ、サーバーには何も送信されません。