画像 Base64 変換ツール
画像とBase64エンコードの相互変換、ドラッグアップロードとリアルタイムプレビュー対応
画像をここにドラッグ、またはクリックしてファイルを選択
JPG、PNG、GIF、WebP、SVGなどのフォーマットに対応
Base64画像エンコードとは？
画像 Base64 ツールは、画像ファイルを Base64 文字列や Data URL に変換し、その文字列を再び画像として確認できるようにするツールです。小さなアイコン、プレースホルダー、メールテンプレート、CSS 背景、API テスト、単体デモなど、別ファイルを用意しにくい場面で便利です。Base64 は圧縮ではなく、通常はデータ量が増え、大きな写真や繰り返し使う画像ではキャッシュ効率も悪くなります。埋め込みデータ、CDN、通常の画像 URL のどれを使うべきか判断する前の変換と確認に向いています。
使い方
使い方
- 画像をドラッグまたはクリックしてアップロードすると、形式とサイズが自動検出されます
- 出力形式を選択：Data URL（コードにそのまま貼り付け可能）または純粋なBase64
- コピーボタンをクリックして、エンコード結果を必要な場所に貼り付けます
- 逆変換するには、Base64文字列を貼り付けて変換をクリックすると画像としてダウンロードできます
Base64から画像へ
- data URLまたは純粋なBase64文字列を入力欄に貼り付け、変換するとデコードされた画像をダウンロード前にプレビューできます。
- デコードに失敗した場合は、Base64テキストが完全であること、およびdata:image/... プレフィックスが正しく形成されていることを確認してください。
画像からBase64へ
- HTMLやCSSに直接貼り付ける場合はData URLを、別のシステムがMIMEタイプを別途管理している場合は純粋なBase64を選択してください。
- Base64画像は小さめに抑えましょう。大きな画像はテキストサイズが約3分の1増加し、HTML、CSS、JSONの管理が難しくなります。
利用シーン
仕組み
Base64 でエンコードされた画像は RFC 2397 で定義されたデータ URI です。スキームプレフィックス data:、MIME タイプ（例: image/png）、リテラル ;base64、そして 64 文字のアルファベット（A-Z、a-z、0-9、+、/）で構築されたペイロードで、末尾には = がパディングとして付加されます。エンコード処理ではバイナリストリームを 3 バイトずつ読み取り、4 文字を出力するため、ペイロードは固定比率 4/3（約 33%）増加し、バイト数が 3 の倍数でない場合は 1 または 2 個のパディング文字が追加されます。 ブラウザでのエンコードは FileReader.readAsDataURL から始まり、同じパイプラインを通じてファイルを処理し、<img src> や CSS background-image url() にそのまま使用できる完全な data: URL を返します。文字列のみを扱う btoa と atob は既にバイナリ化されたペイロードにのみ動作し（latin-1 のみのため、バイナリバイトは Uint8Array で変換が必要）、表示可能な画像へのデコードは atob → Uint8Array → 元の MIME タイプの Blob → URL.createObjectURL という流れで、通常の HTTP で取得可能なアセット URL に変換されます。 実際のトレードオフは帯域幅ではなくキャッシュです。HTML、CSS、JSON が存在する場所ごとにペイロードが複製されるため、アセットを個別にキャッシュできず、独自の ETag を持つこともできず、親ドキュメントの再ダウンロードごとに再取得されます。厳格な Content-Security-Policy ルールでは img-src または style-src に 'data:' が明示的に記載されていない限り data: URI がブロックされます。HTTP/2 のマルチプレックス化が普及して以降、小さなアイコンのインライン化が個別リクエストに勝ることは少なくなり、現代の経験則では約 2 KB 未満のみインライン化し、ヒーロー画像や再利用可能なスプライトはキャッシュ可能なファイルとして扱うのが一般的です。
- データ URI スキーム: RFC 2397 形式 data:[<mime>][;base64],<payload>。カンマは必須であり、コピーペーストで最もよく見落とされる箇所です。
- エンコードのオーバーヘッド: バイナリ 3 バイトが ASCII 4 文字になるため、ペイロードは 4/3 倍（約 33%）に増加し、最大 2 個の '=' パディング文字が追加されます。
- ブラウザ API: ファイルには FileReader.readAsDataURL、既存のテキストペイロードには btoa/atob（latin-1 のみのため、バイナリには Uint8Array ブリッジが必要）。
- デコードパス: atob → Uint8Array → new Blob([buf], {type}) → URL.createObjectURL により、凍結された文字列ではなく通常のフェッチ可能なアセット URL を取得できます。
- CSP の注意点: 厳格な img-src または default-src ポリシーでは、data: キーワードが明示的にリストされていない場合にブロックされ、本番環境でインライン画像が表示されなくなります。
- キャッシュのトレードオフ: インラインデータは独自の ETag キャッシュエントリを持たないため、HTTP/2 マルチプレックスでは約 2 KB を超えるデータはインライン化よりも個別リクエストの方が効率的です。
使用例
HTML での利用
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="1x1 transparent pixel" width="16" height="16" />CSS での利用
.icon-search {
width: 16px;
height: 16px;
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTYgMmE0IDQgMCAxIDAgMi4yNCA3LjMzbDMuMjEgMy4yMSAxLjQyLTEuNDItMy4yMS0zLjIxQTQgNCAwIDAgMCA2IDJ6Ii8+PC9zdmc+');
background-size: contain;
}JSON API での送信
POST /api/v1/avatar
Content-Type: application/json
{
"userId": 10086,
"avatar": {
"mimeType": "image/png",
"data": "iVBORw0KGgoAAAANSUhEUgAAAAUA..."
}
}
// 注意: Base64 はペイロードが約 33% 増加します。100KB を超えるファイルでは multipart/form-data を推奨。よくある質問
画像はアップロードされますか？
いいえ。画像はFileReader APIで読み込まれ、ブラウザ内でBase64エンコードされます。バイトデータがデバイスから外に出ることはありません。変換中にネットワークタブで確認できます。
Base64文字列が元ファイルより約33%長くなるのはなぜですか？
Base64は3バイトの入力を4文字のASCII文字で表すため、エンコード後のサイズはceil(file_size / 3) * 4となります。これが約33%のオーバーヘッドで、バイナリを印刷可能な文字で表すためのコストです。
結果をHTMLやCSSで使うにはどうすればいいですか？
data URIを使います。HTMLでは<img src="data:image/png;base64,...">、CSSではbackground-image: url(data:image/png;base64,...)のように記述します。ページでは完全なdata: URIが生成されます。小さなインラインアセットには便利ですが、HTML/CSSのファイルサイズが膨らみ、ブラウザの画像キャッシュが効かなくなります。
インライン化と外部リンクのサイズの境目はどこですか？
約5KB未満であれば、インライン化が有利です（HTTPリクエストを節約できます）。それを超える場合はキャッシュ効果のため別ファイルにすべきです。約50KBを超えるとHTMLが大きく膨らみます。ビルドツールごとに閾値は異なり、webpackのデフォルトは8KBです。
Base64文字列を画像にデコードできますか？
はい。data: URIまたは生のBase64文字列（image/* mimeタイプ付き）を貼り付けると、ページが画像を再構成しダウンロードを提供します。ソースコード内のインライン画像から元ファイルを取り出したい場合に便利です。
SVGやアニメーションGIFには対応していますか？
はい。SVGは直接エンコードするほか、URLエンコードされたテキストでも扱えます（SVG-XMLにはBase64より短くなります）。アニメーションGIFは1つのBase64文字列としてエンコードされ、結果も引き続きアニメーションします。WebP、AVIFなどの最新フォーマットも同様に動作します。
メール用に大きな写真をBase64エンコードすべきですか？
メール自体が添付ファイルをBase64でMIMEエンコードするため、事前にエンコードする必要はありません。Base64文字列をメール本文に貼り付けると、メッセージが大きくなり、ほとんどのクライアントで読めなくなるだけです。通常通りファイルを添付してください。