🖼 画像・メディア

画像 ↔ Base64

画像をBase64（Data URI）に変換してCSSやHTMLに埋め込んだり、Base64文字列から画像に戻したりできます。処理は端末内で完結し、画像はサーバーに送信されません。

例（クリックで試す）

画像を選ぶと、すぐにData URIに変換します。画像は端末内だけで処理されます。

（画像を選ぶとData URIが出ます）

画像 ↔ Base64 変換ツールの使い方

上のセグメントで「画像→Base64」「Base64→画像」を切り替えて使います。どちらの処理もブラウザ内だけで動くので、画像が外に出ることはありません。

  • 画像→Base64：画像ファイルを選ぶと、Data URI（data:image/png;base64,…）に変換します。出力形式は「Data URI」「HTML <img>」「CSS background-image」から選べ、文字数と概算サイズも表示します。
  • Base64→画像：Data URI もしくは素のBase64文字列を貼り付けると、プレビューを表示し、画像ファイルとしてダウンロードできます。
  • コピー：変換結果はワンクリックでクリップボードにコピーできます。

具体例：アイコンをCSSに埋め込む

たとえば 20×20 の小さな PNG アイコンを選ぶと、先頭が data:image/png;base64, で始まる Data URI が生成されます（例：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…）。出力形式を「CSS background」に切り替えてコピーすれば、そのまま次のように貼り付けて使えます。

.icon {
  width: 20px;
  height: 20px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA…");
  background-size: contain;
}

HTMLに直接入れたい場合は「HTML <img>」を選ぶと <img src="data:image/png;base64,…" alt=""> の形でコピーでき、画像ファイルを別途置かなくても表示できます。

こんな場面で便利です

  • 小さなアイコンやロゴをCSS（background-image: url("data:…")）に埋め込んでHTTPリクエストを減らす
  • HTMLメールやMarkdownに画像を直接埋め込む
  • APIレスポンスやJSONに含まれるBase64画像の中身を確認する
  • ファビコンやSVGのData URI化を手元で素早く試す

よくある質問

画像はサーバーに送信されますか？
いいえ。Base64への変換も画像への復元もすべてお使いのブラウザ内で完結し、画像が外部に送信・保存されることはありません。社外秘の画像も安心してご利用いただけます。
Data URIはどんなときに使いますか？
小さなアイコンやロゴをCSSやHTMLに直接埋め込んでHTTPリクエストを減らしたいとき、メールのHTMLに画像を含めたいときなどに便利です。生のData URIのほか、HTMLのimgタグやCSSのbackground-image形式でも出力できます。
Base64の文字列から画像に戻せますか？
はい。「Base64→画像」モードに切り替え、Data URI（data:image/png;base64,… の形式）または素のBase64文字列を貼り付けるとプレビューが表示され、画像ファイルとしてダウンロードできます。素のBase64の場合はPNGとして復元します。