ファイル ⇔ Base64 変換ツール（data URI対応・相互変換）
画像・PDFなど任意のファイルをBase64文字列やdata URIに変換、逆にBase64文字列やdata URIからファイルを復元してダウンロードできる無料ツール。変換処理はすべてブラウザ内で完結し、ファイルはサーバーに送信されません。
ファイル⇔Base64変換とは
Base64は、画像やPDFのようなバイナリデータを、A〜Z・a〜z・0〜9・+・/の64種類の印字可能な文字だけで表現するエンコード方式です。JSONやCSS、HTMLのように「テキストしか扱えない」場所にファイルの内容を埋め込みたいとき、開発者はファイルを一度Base64文字列に変換してから貼り付けます。MIMEタイプ情報を付けてdata:image/png;base64,...の形にしたものがdata URIで、そのままブラウザが画像として解釈できます。
このツールは、任意のファイルをBase64文字列・data URIへ変換する処理と、その逆にBase64文字列やdata URIから元のファイルを復元してダウンロードする処理の両方に対応しています。変換はすべてお使いのブラウザ内のJavaScript（FileReader・Blob API）で完結し、ファイルの内容が外部のサーバーへ送信されることは一切ありません。ソースコード中に埋め込まれたBase64データの中身を確認したいときや、機密性の高いファイルを扱うときにも安心して利用できます。
ファイル⇔Base64変換の使い方
- 変換の方向を選ぶ 「ファイル→Base64」と「Base64→ファイル」のどちらのモードを使うかを選びます。
- ファイルまたはBase64文字列を入力する ファイル→Base64モードではファイルをドラッグ＆ドロップまたは選択し、Base64→ファイルモードではBase64文字列かdata URIを貼り付けます。
- 自動変換を待つ ファイルを選択・貼り付けした時点でブラウザ内で即座に変換が実行されます。
- MIMEタイプを確認する（Base64→ファイル時） data URI形式でない場合はMIMEタイプの選択欄が表示されるので、元のファイル形式に合わせて選びます。
- 結果をコピーまたはダウンロードする 変換後の文字列をコピーするか、復元したファイルをダウンロードして作業を完了します。
使いこなすためのヒント
- ファイル→Base64モードでは画像・PDF・音声などファイルの種類を問わずアップロードでき、data URI形式とプレーンなBase64文字列の両方をコピーできます。
- Base64→ファイルモードでは、`data:`から始まる完全なdata URIを貼り付ければMIMEタイプを自動判定します。プレーンなBase64文字列のみの場合は手動でMIMEタイプを選択してください。
- 変換処理はすべてブラウザ内のJavaScriptで完結し、アップロードしたファイルやBase64文字列がサーバーに送信されることは一切ありません。機密性の高いファイルでも安心して利用できます。
- CSSやHTMLに小さなアイコン画像を埋め込みたい場合、data URI形式の出力をそのまま`background-image: url(...)`や
<img>タグの`src`に貼り付けて使えます。 - Base64エンコードにより元のファイルサイズよりおよそ33%大きくなるため、数十MB以上の大きなファイルの変換にはブラウザの動作が重くなる場合があります。
こんなときに使えます
CSSに小さなアイコンを直接埋め込みたいとき
アイコン画像をdata URIに変換し、CSSのbackground-imageに直接指定することで、画像ファイルへの追加リクエストを発生させずに表示できます。
JSON形式のAPIペイロードにファイルを含めたいとき
画像や添付ファイルをBase64文字列に変換し、JSONのプロパティ値として送信するAPI連携の実装時に使います。
ソースコード中のBase64データの中身を確認したいとき
HTMLやCSSのソースに埋め込まれた見慣れないBase64文字列を貼り付けて復元し、実際にどんな画像・ファイルなのかを目視で確認できます。
メールに画像をインライン埋め込みしたいとき
HTMLメールの本文にロゴなどの画像をBase64エンコードして埋め込む際、変換結果をそのままコピーして利用できます。
用語集
- Base64
- バイナリデータをA〜Z・a〜z・0〜9・+・/の64種類の印字可能なASCII文字だけで表現するエンコード方式です。暗号化ではなく、テキストとして安全に扱うための変換にすぎません。
- data URI
- ファイルの内容をBase64エンコードした文字列としてURLの中に直接埋め込む形式です。MIMEタイプ情報も含むため、そのまま画像として表示したりCSSに指定したりできます。
- MIMEタイプ
- ファイルの種類を示す識別子で、
image/pngやapplication/pdfのように「大分類/詳細分類」の形式で表されます。ブラウザはこの情報を見てファイルの扱い方を決めます。 - エンコード
- データをある形式から別の形式へ変換する処理のことです。Base64エンコードの場合はバイナリデータを印字可能な文字列に変換します。
- クライアントサイド処理
- サーバーを介さず、ユーザーのブラウザ内だけでデータを処理する方式です。このツールの変換処理はすべてクライアントサイドで完結し、ファイルが外部に送信されません。
- ペイロードサイズの増加
- Base64エンコードによってデータ量が元のファイルよりおよそ33%増加する現象です。8ビット単位のバイナリを6ビット単位の文字に詰め直す仕組み上、避けられない特性です。
よくある質問
data:image/png;base64,iVBOR...のように、ファイルの内容をBase64エンコードした文字列としてURLの中に直接埋め込む形式です。MIMEタイプ情報も含むため、そのまま<img>タグのsrc属性やCSSのbackground-imageに指定して画像を表示できます。data:から始まる完全なdata URI形式でない、プレーンなBase64文字列を貼り付けた場合はMIMEタイプの選択欄が表示されるので、元のファイル形式（画像・PDF・テキストなど）を手動で選択してからダウンロードしてください。
余談ですが ― なぜBase64はファイルを33%も大きくするのか
Base64エンコードが生まれた背景には、電子メールやJSON、URLなど「印字可能なASCII文字しか安全に扱えない」通信経路の制約があります。画像や実行ファイルのような任意のバイナリデータをそのまま送ると制御文字の混入などで壊れてしまうため、A〜Z・a〜z・0〜9・+・/の64種類の印字可能文字だけでバイナリを表現するBase64という方式が考案されました。
Base64は3バイト（24ビット）のバイナリデータを、6ビットずつ4つに区切って4つのBase64文字に変換します。8ビット単位のバイナリを6ビット単位の文字に詰め直すため、元のデータよりおよそ4/3倍、つまり約33%大きくなるというトレードオフが生じます。テキストとして安全に運べる引き換えに、サイズが増えることは避けられません。
この特性を逆手に取った使い方が、HTML・CSS内に小さな画像をdata:image/png;base64,...という形でそのまま埋め込むdata URIです。追加のHTTPリクエストを発生させずにアイコンなどの小さな画像を表示できるため、ページの読み込みを高速化する手法として広く使われています。ただし約33%のサイズ増加とブラウザキャッシュが効かなくなるデメリットがあるため、大きな画像ファイルの埋め込みには向いていません。