画像をBase64に
画像をBase64 Data URIに即座に変換
入力
クリックしてアップロード
JPG、PNG、GIF、WebP、SVG（最大5MB）出力
画像をBase64の例
画像をアップロードしてData URIを取得します。形式はdata:image/<type>;base64,<base64-string>です。
Data URI出力のサンプル
上の画像をアップロードして独自のData URIを生成してください。
画像をBase64とは？
画像をBase64は画像ファイルをBase64エンコードされたData URIに変換します。Base64はRFC 4648で定義されています。Data URIにより、画像をHTML、CSS、JSONに直接埋め込めます。
このツールはブラウザの<a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader" target="_blank" rel="noopener">FileReader</a> APIを使用します。処理は完全にブラウザ内で行われます。サポート形式：JPG、PNG、GIF、WebP、SVG。デコードにはBase64を画像にを使用してください。
このツールの使い方
画像をアップロード
アップロード領域をクリックするかアップロードで画像ファイルを選択してください。サポート形式：JPG、PNG、GIF、WebP、SVG（最大5MB）。左のパネルに画像のプレビューが表示されます。
Base64出力を取得
右のパネルに完全なData URIが自動更新されます。コピーしてHTML <img src="...">やCSS background-image: url(...)に直接貼り付けできます。形式はdata:image/png;base64,の後にBase64文字列が続きます。
コピーまたはダウンロード
<strong>コピー</strong>でData URIをクリップボードに、<strong>ダウンロード</strong>で.txtファイルとして保存します。任意のファイル（画像以外）をBase64にエンコードするにはBase64エンコーダーを、Base64画像文字列を表示するにはBase64を画像にを使用してください。
仕組み
ツールはFileReader.readAsDataURL()で画像を読み、Data URIを返します。Data URI形式はRFC 2397で定義され、すべてのモダンブラウザでサポートされています。Base64エンコーディングでサイズが約33%増加するため、100KBの画像はエンコード後約133KBになります。
HTML埋め込み：<img src="data:image/png;base64,..." alt="...">。CSS：background-image: url('data:image/png;base64,...')。JSON APIでBase64画像文字列を期待する場合、APIがその形式を指定していればdata:image/...;base64,プレフィックスなしの生のBase64部分を使用できます。
画像をBase64が役立つ場面
Web開発者は小さなアイコン、ロゴ、スプライトにBase64画像を使用して追加のHTTPリクエストを避けます。メールHTMLは外部画像をブロックするクライアントで表示するため、画像をBase64で埋め込むことが多いです。CanvasやPDF生成ではBase64画像入力が必要な場合があります。プロフィール画像や商品画像を受け付けるAPIはリクエストボディにBase64文字列を期待することがあります。
デコードにはBase64を画像にを、任意のテキストやファイル（画像以外）のエンコードにはBase64エンコーダーを、一般的なBase64デコードにはBase64デコーダーを使用してください。
よくある質問
データはプライベートですか？
はい。変換は完全にブラウザ内で行われます。
サイズ制限は？
ツールはアップロードを5MBに制限しています。
出力をHTML/CSSで使えますか？
はい。出力はimgやbackground-image用のData URIです。
SVGはサポートしていますか？
はい。SVGはサポートされています。Base64をSVGにデコードするにはBase64デコーダーを使用してください。
通常の画像URLの代わりにBase64を使う理由は？
Base64は画像をドキュメントに埋め込むため、追加のHTTPリクエストが不要です。小さなアイコンでは読み込み時間の改善につながることがあります。