画像をBase64に変換

画像をBase64に変換とは？

画像をBase64に変換すると、画像ファイルをBase64エンコードされた文字列に変換できます。これにより、HTMLやCSS、JavaScriptに画像データを直接埋め込むことができ、追加のHTTPリクエストが不要になります。変換結果は data:image/png;base64,iVBOR... のようなData URI形式で出力されます。

仕組み

アップロードされた画像は、Canvas APIを使用してブラウザ内で読み取り・再描画されます。品質スライダー（JPEG/WEBP）で圧縮率を調整したり、倍率スライダーで出力サイズを変更したり、別のフォーマットを選択したりできます。すべての処理はブラウザ内で完結するため、画像データがサーバーに送信されることは一切ありません。

4つの出力形式

• Base64のみ — Data URIプレフィックスなしの生のBase64文字列
• Data URI — 完全な data:image/...;base64,... 形式
• HTML <img>タグ — すぐに使える <img src="..."> マークアップ
• CSS background — すぐに使える background-image: url(...) 宣言

使用シーン

• HTMLメールに小さなアイコンやロゴを埋め込み、外部画像がブロックされるのを防ぐ
• アイコンやボタン背景などの小さな画像をCSSに直接埋め込み、HTTPリクエストを削減する
• CodePenやJSFiddleなどのコードサンドボックスで、画像を別途ホスティングせずに使用する
• JSON API経由で小さな画像データを送信する
• MarkdownにBase64形式でスクリーンショットを埋め込む（外部画像がサポートされていない環境で便利）

使用例

HTML <img>タグ

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg..." alt="embedded image">

CSS background-image

.element {
  background-image: url('data:image/png;base64,iVBORw0KGgoAA...');
  background-size: cover;
}