画像 Base64 変換ツール
画像を Base64・Data URI・CSS・HTML・Markdown に変換し、Base64 から画像にも戻せます。形式はファイルの中身で判定、SVG は URL エンコードも可。アップロードなし。
- ブラウザ内で処理
- データはブラウザ外に出ません
- 無料 · 登録不要
画像をドロップ、貼り付け（Ctrl+V / ⌘V）、またはクリックして選択
PNG・JPEG・GIF・WebP・AVIF・SVG・ICO・BMP・TIFF・HEIC・JPEG XL · 最大 100 MB
画像をドロップ、貼り付け、または選択すると、ここに Base64 文字列、出力形式、「コピー」ボタンが表示されます。
WeChat でスキャンしてシェア
例・詳しい説明・よくある質問 実際の出力つきの例、ほかのツールとの違い、よくある質問。
iPhone の写真が HEIC だったとき
iPhone の「設定」→「カメラ」→「フォーマット」が「高効率」だと、写真は HEIF 形式で保存されます。「互換性優先」にすると JPEG になり、撮影済みの写真は Mac のプレビューで「ファイル」→「書き出す」から別の形式にできます（Apple サポート）。
HEIC ファイル（macOS の sips で PNG から作った 1,009 バイトの例）をこのツールに入れると、情報行は HEIC · 1,009 バイト → Base64 1,348 文字（+33.6%） となり、Chrome では次の注意が出ます。
このブラウザは HEIC を表示できないため、プレビューはありません。Base64 文字列は完全ですが、画像が表示されるのは HEIC に対応したブラウザ（Safari 17 以降）だけです。
HEIC を表示できるのは Safari 17 以降だけです（Can I use）。形式はファイル名ではなく先頭の ftyp ボックスで判定するので、名前が .jpg になっていても HEIC と分かり、「ファイル名は .jpg ですが、中身は HEIC です。出力は image/heic を使います。」と表示されます。Web ページに埋め込む画像や、画像の種類を JPEG・PNG などに限る API に送る画像は、先に JPEG か PNG にしておくのが確実です。
SVG アイコンを CSS に埋め込む
arrow.svg は 156 バイトの矢印アイコンです。Base64 の Data URI は 234 文字、URL エンコードは 221 文字なので、URL エンコードが選ばれ、CSS 出力は次のとおりです。
background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22%3E%3Cpath d=%22M6 3l5 5-5 5%22 fill=%22none%22 stroke=%22%23333%22 stroke-width=%222%22/%3E%3C/svg%3E");エスケープするのは意味が変わる文字だけです。#333 の # は %23 にします。URL の解析規則では # 以降がフラグメントとして切り離され、アイコンが壊れるためです。改行とタブは解析時に削除されるので %0A と %09、" は url("…") や HTML 属性の中に置けるよう %22、& は HTML が & を & に戻さないよう %26 にします。空白とシングルクォートはそのままです。エスケープはバイト単位なので、日本語を含む SVG でもファイルの文字コードは変わりません。
Base64 から画像に戻す
Base64 → 画像 には、Base64 だけ、Data URI、または Data URI を含む CSS・<img> タグ・Markdown・JSON（/ が \/ になっていても可）を貼り付けられます。改行、URL セーフな Base64（- と _）、末尾の = の欠落も受け付けます。デコードしたバイトもファイルと同じく中身で形式を判定し、保存するファイルに合った拡張子を付けます。
デコードできないときは位置を示します。全角スペースが紛れ込んだ iVBORw0KGgo AAAA NSUh EUgA AAAC を貼ると、「27 文字目（ ）は Base64 の文字ではありません。」と表示されます。半角の空白と改行は読み飛ばしますが、全角スペースは Base64 の文字ではないので止まります。
ほかのツールとの違い
2026-09-30 にデスクトップ版 Chromium で、同じファイル（拡張子を .jpg に変えた PNG、iPhone 形式の HEIC、拡張子なしの PNG、上の例とは別の SVG）を使って確認しました。
| ツール | 変換する場所 | .jpg にした PNG | HEIC | 拡張子なし | SVG の出力 |
|---|---|---|---|---|---|
| このツール | ブラウザ内 | image/png と注意 | image/heic とプレビュー不可の注意 | image/png | Base64 または URL エンコード |
| ラッコツールズ | ブラウザ内 | image/jpeg | image/heic | 出力なし | Base64 |
| base64-image.de | サーバーにアップロード（POST /encode）、1 ファイル 1 MB まで | image/png | image/heic | File rejected | 書き換えた SVG の Base64（<rect …/> が <rect …></rect> に） |
| base64.guru | フォーム送信でアップロード | image/png | image/octet-stream | image/png | Base64 |
ブラウザ内で変換するツールはファイル名から種類を決め、中身で判定するツールはファイルをサーバーに送っていました。
制限
- ファイルサイズは 100 MB まで（Base64 で約 1 億 4 千万文字）。200 万文字を超える出力は欄に表示しません（改修前は 85 MB のファイルでページが固まりました）。「コピー」と「.txt で保存」では全文を取得できます。data URL の上限は Chromium と Firefox が 512 MB、Safari が 2048 MB です（MDN）。
- プレビューはブラウザのデコーダーを使います。HEIC は Safari 17 以降、TIFF は Safari だけが表示できます（MDN の画像形式ガイド）。
- 1 回に 1 ファイルです。通信しないので画像の URL は指定できません。先に保存してください。
- 縮小や圧縮はしません。画像圧縮ツールで小さくするか、SVG は SVG 圧縮・最適化ツールで整理してから変換してください。
- デコードは画像形式だけに対応します。ほかのファイルの Base64 は Base64 エンコード・デコードを使ってください。
- 埋め込みが速いとは限りません。埋め込んだ画像は、それを含む HTML や CSS と一緒にしかキャッシュされず、画像を変えるとそのファイル全体が再ダウンロードになります。1 か所で使う小さなアイコン向きです。
FAQ
Base64 と Data URI の違いは？
Base64 はエンコードした文字列だけです。Data URI は data:image/png;base64, のように種類を前に付けたもので、img の src や CSS の url() にそのまま書けます。API の仕様に「Base64 エンコードした画像」とあれば、多くは接頭辞なしの Base64 を指します。
iPhone の写真を変換したらプレビューが出ません
カメラのフォーマットが「高効率」だと写真は HEIF（HEIC）で保存されます。HEIC を表示できるのは Safari 17 以降だけなので、Chrome や Edge ではプレビューが出ません。Base64 は正しく作られていますが、Web ページや多くの API で使うなら JPEG か PNG に書き出してから変換してください。
SVG は Base64 と URL エンコードのどちらがよいですか？
短いほうです。ツールは両方の長さを表示し、短いほうを初期選択にします。URL エンコードは SVG の大部分が読めるまま残り、小さなアイコンでは短くなることが多いです。Base64 は元のファイルの 4/3 に接頭辞が付きます。どちらも同じ画像になります。
Base64 にするとどれくらい大きくなりますか？
3 バイトごとに 4 文字になり、最後の組は = で埋めるので、長さは 4 × ⌈バイト数 ÷ 3⌉ です。大きなファイルでは約 33.3% 増え、ごく小さなファイルではもう少し増えます。Data URI には PNG なら 22 文字の接頭辞が付きます。
画像はアップロードされますか？
いいえ。ファイルはブラウザの FileReader で読み込み、通信もブラウザのストレージへの保存もしません。実測では base64-image.de と base64.guru はファイルをサーバーに送って変換していました。