画像 Base64 変換ツール｜データURI
画像ファイルをBase64エンコードされたデータURIに変換します。ブラウザで処理。
ここに画像をドロップ
クリックで選択
画像 Base64 変換ツール｜データURIとは
画像ファイルをBase64エンコードしてData URIに変換する無料オンラインツールです。CSS背景画像・HTMLのimgタグ・SVGのhref属性に直接埋め込むことでHTTPリクエストを削減できます。PNG・JPEG・WebP・GIF・SVGに対応し、すべての処理はブラウザ上で完結します。
使い方
- 1変換したい画像ファイルをドラッグ＆ドロップ、またはクリックしてアップロードしてください
- 2データURIプレフィックス（data:image/...;base64,）の有無を選択してください
- 3「Base64に変換」をクリックしてください
- 4出力されたBase64文字列をコピーしてCSSやHTMLに貼り付けてください
メリット・特徴
- ブラウザ上で処理完結 — 画像がサーバーに送信されないためプライバシー安全
- Data URI形式でCSSのbackground-imageやHTMLのimgタグに直接埋め込み可能
- HTTPリクエスト数を削減してWebパフォーマンスを改善
- プレフィックス（data:image/...;base64,）の有無を選択可能
- MIME形式（76文字改行）オプションでメール埋め込みにも対応
- PNG・JPEG・WebP・GIF・SVGの全主要形式に対応
Base64エンコードとData URIの基礎知識
Base64はバイナリデータをASCII文字列に変換するエンコーディング方式です。画像・フォント・PDFなどのバイナリファイルをテキストとして扱えるようにするために使われます。Webでは主にData URIスキームと組み合わせて、HTML・CSS・JSファイル内に画像を直接埋め込む用途で活用されます。
Data URIスキームの構造
Data URIの形式は「data:[MIMEタイプ];base64,[Base64データ]」です。例えばPNG画像なら「data:image/png;base64,iVBORw0KGgo...」となります。ブラウザはこのURLを通常の画像URLと同じように解釈し、外部ファイルを取得せずにインラインで表示します。MIMEタイプにはimage/png・image/jpeg・image/webp・image/gif・image/svg+xmlなどが使えます。
HTTPリクエスト削減による効果
小さなアイコン画像をBase64でCSSに埋め込むと、その画像のHTTPリクエストが不要になります。HTTP/1.1環境では同一ドメインへの同時接続数に制限があるため、リクエスト削減は表示速度改善に直結しました。HTTP/2以降では多重化により影響が小さくなりましたが、初回ロード時にすべてのアセットをCSSとともに取得できる点は依然として有利です。
Base64サイズ増加と使いどころの判断
Base64エンコードでファイルサイズが約33%増加するため、大きな画像の埋め込みには不向きです。実用的な使いどころは1KB〜10KB程度の小さなアイコン・ロゴ・区切り線などのUI要素、または外部リクエストを完全に排除したい自己完結型のHTMLページ（メール、オフライン対応ページ）です。10KB以上の画像は外部ファイルとして提供するほうが一般的にパフォーマンスが良くなります。
CSS・HTML・メールでのBase64画像の活用方法
Base64エンコードした画像はさまざまな文脈で活用できます。それぞれの用途に合った記述方法と注意点を把握しておくことで、正しく効率的に使えます。
CSSへの埋め込み方法
CSSのbackground-imageプロパティにData URIを指定します。例：.icon { background-image: url("data:image/svg+xml;base64,PHN2Zyg..."); width: 24px; height: 24px; background-size: contain; }。SVGアイコンをBase64でCSSに埋め込むことで、画像スプライトなしでアイコンセットを管理できます。CSSファイル内のBase64データはGzip圧縮が効くため、実効サイズの増加は見かけより抑えられます。
HTMLのimgタグへの埋め込み
imgタグのsrc属性にData URIを指定します。例：<img src="data:image/png;base64,iVBORw0KGgo..." alt="ロゴ">。Javascriptでキャンバスから生成した画像をBase64で取得してimgタグに表示する場合や、ファイルをアップロードせずにプレビュー表示する場面でよく使われます。
HTMLメール（メールマガジン）での使用
HTMLメールでは外部画像URLが画像ブロッカーでブロックされる可能性があります。Base64で画像をインライン埋め込みすると、受信者の画像表示設定に関わらず確実に画像を表示できます。ただしメールサイズが増加し、一部のメールクライアント（Gmailなど）ではサイズ制限により表示が崩れる場合があるため、ロゴや重要なアイコンのみに限定するのが実用的です。76文字改行オプション（MIME形式）を使用してください。
よくある質問（FAQ）
- Base64に変換するとファイルサイズはどうなりますか？
- Base64エンコード後は元のバイナリサイズより約33%大きくなります。これはBase64が3バイトのデータを4文字（ASCII）で表現するためです。したがって大きな画像のBase64埋め込みはHTMLやCSSファイルのサイズを増加させるため、小さなアイコンや特定の用途に限定して使用することを推奨します。
- どんな用途に使いますか？
- CSSのbackground-imageやHTMLのimgタグsrc属性に画像を直接埋め込む際に使います。外部HTTPリクエストを削減できるため、スプライト画像の代替や、CSSファイルに直接アイコンを埋め込むインライン化に活用できます。メール配信でのインライン画像埋め込みにも使われます。
- Data URIとBase64の違いは何ですか？
- Base64は単なるエンコード方式です。Data URIは「data:[MIME type];base64,[Base64データ]」という形式で、ブラウザが画像として解釈できるURL形式に整えたものです。CSSやHTMLに埋め込む場合はData URI形式（プレフィックスあり）が必要です。
- SVGもBase64変換できますか？
- はい対応しています。SVGをBase64に変換してData URIとして埋め込むことができます。ただしSVGはXML（テキスト形式）のため、Base64を介さずに直接URL-エンコードしたSVG文字列（url()内）を使う方法もあり、そのほうがファイルサイズが小さくなるケースもあります。
- CSSでBase64画像を使う書き方を教えてください
- .element { background-image: url("data:image/png;base64,iVBORw0KGgo..."); } のように url() 内にData URIを記述します。imgタグの場合は <img src="data:image/png;base64,iVBORw0KGgo..."> です。
- 76文字改行（MIME形式）はいつ使いますか？
- RFC 2045（MIMEの仕様）では76文字ごとに改行を挿入することが規定されています。メール本文や添付ファイルのエンコードにはこのオプションが必要です。CSSやHTML埋め込みには改行なしの形式（デフォルト）を使用してください。
不具合や動作がおかしい点を見つけたら教えてください。
不具合報告はこちら →