画像をBase64（data URI）に変換

画像をブラウザ内でBase64のdata URIに変換し、HTMLのimg、CSSのbackground、Markdownのスニペットを、サイズ情報とともにコピーできます。

ここに画像をドロップするか、クリックして選択

クリップボードから画像を貼り付けることもできます（Ctrl+V / ⌘V）

すべてブラウザ内で実行されます。データがアップロードされることはありません。

画像をBase64に変換とは？

画像ファイルをBase64にエンコードし、HTML、CSS、JSON、Markdownに直接埋め込めるようにします。完全なdata URI（data:image/png;base64,…）、生のBase64文字列、そのままコピーできる <img>、CSSの background-image、Markdownのスニペット、さらに画像サイズとBase64によるサイズの増加量を出力します。

画像をBase64に変換の使い方

画像（PNG、JPEG、GIF、WebP、SVG、ICOなど）をドロップ、選択、または貼り付けます。
検出された形式、寸法、ファイルサイズ、data URIの長さを確認します。
必要な種類（data URI、生のBase64、HTMLスニペット、CSS背景、Markdown）の横にあるコピーをクリックします。

例

入力

30×30 PNG filled with #3366CC (99 bytes)

出力

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAKklEQVR4nGM0TjvDQBvARCNzR40eNXrU6FGjR40eNXrU6FGjR40eEUYDACc1AaFANYRxAAAAAElFTkSuQmCC

画像をBase64に変換を使うべき場面

アイコン、小さなロゴ、プレースホルダーなどの小さな画像をインライン化してHTTPリクエストを省いたり、単一ファイルのHTML、メール、JSON API、自己完結が必要なCSSに画像を埋め込んだりするときに使います。約20 KBを超える画像には避けてください。HTMLやCSSが肥大化し、個別にキャッシュできなくなります。

画像をBase64に変換の仕組み

ファイルのバイトは File.arrayBuffer() で読み込まれ、拡張子を信用せずにマジックバイト（たとえばPNGなら 89 50 4E 47）から実際の形式が検出され、バイトは btoa でBase64エンコードされます。data URIは data:<mime>;base64,<base64> です。Base64は3バイトを4文字で表すため、テキストはファイルより約33%大きくなります。