画像をBase64に変換

「画像のBase64エンコード」とは何ですか？

「Image to Base64」は、画像ファイルをBase64-エンコードされた文字列により、余分なHTTPリクエストを行うことなく、画像データをHTML、CSS、またはJavaScriptに直接埋め込むことができます。その結果、データURI— 次のような文字列data:image/png;base64,iVBOR....

仕組み

アップロードされた画像は、Canvas API を使用してブラウザ上で直接読み込まれ、再レンダリングされます。以下の品質スライダー（JPEG/WEBPの場合）圧縮率を制御するには、スケールスライダー出力のサイズを変更したり、別の形式を選択したりできます。すべての処理はブラウザ内で行われ、画像データがサーバーに送信されることはありません。

4 出力形式

• 純粋なBase64— Data URI プレフィックスを除いた生の Base64 文字列
• データURI— 全文data:image/...;base64,... format
• HTMLの<img>タグ — ready-to-use <img src="..."> markup
• CSSの背景— すぐに使えるbackground-image: url(...) declaration

ユースケース

• HTMLメールに小さなアイコンやロゴを埋め込み、外部画像がブロックされないようにする
• アイコンやボタンの背景など、小さな画像をCSS内で直接インライン化して、HTTPリクエストの数を減らす
• CodePen や JSFiddle などのコードサンドボックスで、画像を別途ホストすることなく使用できます
• JSON API を通じて小さな画像データを送信する
• Base64 を使って Markdown にスクリーンショットを埋め込む — 外部画像がサポートされていない場合に便利

例

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;
}