画像をBase64に変換（無料・オンライン）
画像をBase64文字列やデータURIに変換できます。HTML、CSS、JSON、APIペイロード用にそのままコピー可能、端末内処理で100%プライベートです。
100%プライベート。アップロードは一切行われません。
画像をBase64に変換する3ステップ
画像をアップロードしてください
JPG、PNG、WebP、GIF、SVGファイルをボックスにドロップするか、クリックして選択します。ファイルは端末内で読み込まれます。
出力結果をコピー
フルデータURL（data:image/…;base64,…）とBase64文字列のみ、さらにファイルサイズとBase64サイズが表示されます。必要な方の横にあるコピーをクリックしてください。
コードに貼り付け
データURLはHTMLのimg srcやCSSのurl()で使います。生のBase64文字列はJSONボディやAPI呼び出しに使います。
主な機能
ワンクリックコピー
データURIと生Base64
- ファイルは端末内で処理
- JPG、PNG、WebP、GIF、SVG
- 無料・アカウント登録不要
Base64エンコード画像を使用するタイミング
CSSとスタイリング
- 小さなアイコンをデータURIとしてCSSのbackground-imageに埋め込む
- 読み込み中スピナーやプレースホルダー画像をスタイルシートにインライン化する
- コンポーネントライブラリのUIアイコンをCSS内に同梱する
- 別ファイルなしでSVGパターンやテクスチャを追加する
HTMLとドキュメント
- 画像をデータURIとしてHTMLのimg srcにインライン表示する
- 他のファイルなしで動作する単一ファイルのHTMLページを作る
- 1つのファイルとして共有するHTMLレポートにロゴやグラフを追加する
- ホスティングせずにデモやプロトタイプでテスト画像を表示する
APIとコード
- Base64テキストを想定したJSONペイロードで画像を送信する
- Base64入力を受け付けるAIビジョンAPIリクエストに画像を添付する
- データベースや設定ファイルのテキストフィールドに小さな画像を保存する
- 別ファイルのリクエストなしでJavaScriptでテスト画像を読み込む
Base64画像エンコードとは？
Base64画像エンコードとは、画像ファイルのバイトデータをA–Z、a–z、0–9、+、/の64文字からなるプレーンテキストに変換することです。このテキストはHTML、CSS、JSONの中に直接埋め込めます（ファイルは埋め込めません）。圧縮やフォーマット変換ではなく、画像自体はまったく同じままですが、テキストのサイズは元ファイルより約3分の1大きくなります。
HTML、CSS、API向けの画像Base64変換
変換ツールはフルデータURLとBase64文字列のみという2種類の文字列を生成します。それぞれの使いどころと、画像を埋め込む価値があるタイミングをご紹介します。
HTMLやCSSでBase64画像を使うには？
HTMLとCSSには「フルデータURL」をコピーしてください。JSONやほとんどのAPIには「Base64文字列のみ」をコピーしてください。
- HTML：フルデータURLをimgタグのsrcに貼り付けます。例：src="data:image/png;base64,iVBOR…"
- CSS：フルデータURLをurl()で囲みます。例：background-image: url("data:image/png;base64,iVBOR…")
- JSONとAPI：Base64文字列のみを送信します。APIがタイプを要求する場合は、image/pngのように別のフィールドに指定してください。
Base64画像はどんなときに使うべき？
テキストファイルの中に収める必要がある小さな画像にはBase64を使ってください。写真や大きな画像には向きません。
- 向いている例：数KB程度のアイコン、ロゴ、プレースホルダー。別途ファイルリクエストを省きたい場合に有効です。
- 向いている例：他のファイルなしで動作させたい単一ファイルのHTMLページ、レポート、デモ。
- 向いている例：テキストしか受け付けないAPIやJSONペイロード。
- 向いていない例：写真や大きな画像。HTMLやCSSが肥大化し、ブラウザがページとは別にキャッシュすることもできません。
Base64にすると画像はどれくらい大きくなる？
Base64は3バイトごとに4文字に変換するため、テキストは元ファイルより約33%大きくなります。30KBの画像は約40KBのBase64になります。変換後、ツールには両方のサイズが並べて表示されます。文字列を短くしたい場合は、先に画像圧縮ツールでファイルを小さくしてください。
Base64画像はメールで使える？
確実には使えません。Gmailはメール本文からBase64画像を削除することが広く報告されており、他のメールアプリでも対応状況はさまざまです。メールでは、ホスティングされた画像にリンクするか、インライン（CID）画像として添付することをおすすめします。
画像Base64変換に関するFAQ
画像のBase64・データURI変換に関するよくある質問
Base64を画像に戻すことはできますか？
はい。Base64to画像変換ツールに文字列を貼り付けると、プレビューしてファイルとしてダウンロードできます。フルデータURIでも生のBase64文字列でも対応しています。
データURIとBase64文字列の違いは何ですか？
データURI（データURLとも呼ばれます）は、Base64文字列の先頭にファイルタイプを示すプレフィックス（例：「data:image/png;base64,」）を付けたものです。生のBase64文字列にはプレフィックスがありません。HTMLやCSSではデータURIを、タイプを別フィールドで指定するAPIでは生の文字列をお使いください。ツールではそれぞれ「フルデータURL」「Base64文字列のみ」として表示され、個別のコピーボタンが付いています。
Base64画像のサイズに制限はありますか？
変換ツール自体にサイズ制限はありません。ただし大きな画像は非常に長い文字列になり、コードエディタや読み込むページの動作が遅くなります。インライン画像は数KB程度に抑え、大きなファイルはリンクで扱うことをおすすめします。
SVGをBase64に変換できますか？
はい。SVGファイルをドロップすると、data:image/svg+xml;base64で始まるデータURIが生成されます。imgタグやCSSのurl()で使用できます。CSSの場合、SVGはもともとテキストのため、URLエンコードしたSVGの方がBase64より短くなることがよくあります。
Base64文字列をコピーやダウンロードできますか？
コピーは可能です。フルデータURLとBase64文字列のみ、それぞれにコピーボタンがあります。ダウンロードボタンはないため、結果を保存するにはテキストファイルに貼り付けてください。「全文を表示」をクリックすると、ページ上でデータURL全体を確認できます。
どの画像フォーマットをBase64に変換できますか？
ブラウザが画像として認識できるファイルであれば、JPG、PNG、WebP、GIF、SVG、AVIF、BMP、ICOなど何でも対応しています。エンコーダーはファイルをそのまま保持し、リサイズ、再圧縮、フォーマット変更は行いません。ファイルをドロップしても何も起きない場合は、ブラウザがそれを画像として認識できなかったということです。