画像 Base64 変換ツール

画像を貼り付けられるテキストに、そのテキストを再び画像に変換します

画像 Base64 変換ツールは、PNG・JPG・GIF・WebP・SVG などの画像ファイルを data:image/png;base64,… の形のテキスト(Data URL)に変換し、逆に Base64 のテキストを受け取って元の画像に戻すツールです。上の作業エリアの左側に画像を入れると右側に Base64 が表示され、右側に Base64 を貼り付けると左側に画像が現れます。モードを切り替える必要はありません。

結果は Data URL・Base64 のみ・HTML <img>・CSS background-image・Markdown の5つの形で、そのままコピーできます。下のサイズのものさしでは、テキストにするとどれだけ大きくなるか、Vite や webpack のようなビルドツールがデフォルト設定でこのサイズを自動的に埋め込むかどうかも確認できます。ファイルはサーバーにアップロードせず、このブラウザ内だけで読み込みます。

どんなときに使いますか?

Base64 は、0と1でできたファイルを64種類の文字だけで書き直す方法です。画像をテキストに変えれば、テキストしか入らない場所にも画像を入れられます。

• 小さなアイコンを CSS・HTML に直接入れる: アイコン1つのためにファイルのリクエストが1回増えるのを避けたいときに使います。ビルドツールが小さな画像を自動で Data URL に変えるのも同じ理由です。
• ファイル1つで完結する文書を作る: レポート・案内文・オフラインのデモなど、HTML ファイル1つを送るだけで画像が壊れないようにしたいとき、画像をテキストの中に入れます。
• JSON・API で画像を送る: JSON にはテキストしか入らないため、画像を Base64 のテキストに変えて1つの項目に入れます。受け取った側が保存された値の中身を確かめるときは、逆に画像へ戻します。
• ログやデータベースに残った Base64 を確認する: エラーログやデータベースで iVBORw0KGgo… から始まる長い文字列を見つけたら、貼り付けるだけでどんな画像か見られます。

変換ツールの使い方

1. 画像を選ぶを押すか、画像を作業エリアにドラッグ＆ドロップします。コピーした画像は Ctrl+V(Mac は ⌘+V)か貼り付けボタンで入れます。一度に20個まで入れられ、下の番号を押すと1つずつ表示できます。
2. 右上の形式ボタンから、貼り付け先に合う形を選びます。SVG は URL エンコードと Base64 のどちらかを選べ、ボタンごとに文字数が表示されます。
3. コピーまたは保存を押します。画像を複数入れた場合はすべてコピーが表示され、CSS を選んだ場合はファイル名でクラスを1つずつ作ります。
4. 逆に画像へ戻すときは、右側の欄に Base64 や data: アドレスを貼り付けます。HTML や CSS のテキストをそのまま貼っても、中の data: アドレスを探して読み込みます。復元した画像は画像を保存でダウンロードできます。

最初の画面に表示されているアイコン・写真・ロゴはサンプルファイルです。写真のサンプルには、ソウル市庁前の座標を撮影場所としてあえて入れてあります。写真のサンプルを押すと、写真情報の欄で位置情報の警告がどのように表示されるか確認できます。

出力形式と貼り付け先

HTML の形には、画像の実際の幅と高さを width・height として入れます。ブラウザが画像を読み込む前に場所を確保できるので、表示がガタつきません。alt にはファイル名が入るため、画像の内容を説明する文に書き換えるのがおすすめです。

Base64 にすると約3分の1大きくなる理由

コンピュータのファイルは8ビット(1バイト)単位でできていますが、Base64 の1文字が表せるのは6ビットだけです。そのため RFC 4648 は、3バイト(24ビット)を6ビットずつ4つに分け、4文字で表すと定めています。上の作業エリアにあるビットの帯は、この過程をファイルの先頭6バイトで示したものです。最後のまとまりが3バイトに満たないときは、余ったビットを0で埋め、空いた文字の位置には = を使います。

Base64 の文字数 = 4 × ⌈元のバイト数 ÷ 3⌉ · Data URL の文字数 = 上の値 + 先頭部分(data:image/png;base64, 22文字)

ただし、Web サーバーは通常、テキストを gzip などの方式で圧縮して送ります。Base64 は64種類の記号しか使わないため、圧縮すると増えた分がほとんどなくなります。ものさしの gzip 転送バーは、ブラウザに内蔵された圧縮機能(CompressionStream)で、現在の結果を実際に圧縮して測った値です。下の表は、サンプルファイル3つを Chrome で測った結果です。ブラウザごとに圧縮プログラムが異なるため、数バイトの差が出ることがあります。

つまり、圧縮して送れば、PNG・JPG の Base64 は元のファイルとほぼ同じサイズで届きます。それでも、Base64 で埋め込んだ画像は、その文書を受け取るたびに一緒にダウンロードされ、ブラウザが画像ファイルだけを別に保存して再利用することはできません。そのため、小さな画像にだけ使うのが一般的です。

どのサイズまで Data URL にしますか?

決まったルールはありませんが、よく使われるビルドツールのデフォルト値が現実的な目安になります。サイズのものさしの目盛りは、元のファイルサイズをこの2つのデフォルト値と比べます。

• 4,096バイト未満: どちらのツールも、デフォルト設定で Data URL として埋め込みます。アイコンや小さな模様など、何度も使わない画像がここに入ります。
• 4,096 ~ 8,096バイト: ツールによって判断が分かれる範囲です。サンプルのアイコン(6,960バイト)がここに当たり、同じファイルでも Vite は別ファイルのままにし、webpack はテキストとして埋め込みます。
• 8,096バイト超: どちらのツールも別ファイルのままにします。写真のように大きな画像は、ファイルのままにしておけば、ブラウザが別に保存して再利用できます。

コンテンツセキュリティポリシー(CSP)を使っているサイトでは、img-src に data: を別途書かないと Data URL の画像は表示されません。CSP Level 3 は、http・https 以外のアドレス方式は明示的に書くよう定めています。

SVG は Base64 より URL エンコードのほうが短くなることが多いです

SVG はもともとテキストでできた画像なので、Base64 に変換し直す必要はありません。CSS-Tricks のクリス・コイヤーは、SVG を Data URL として埋め込むとき、Base64 にすると元の約133~136%になり、テキストのまま使うほうが圧縮もよく効くとまとめています。このツールは SVG を入れると2つの方式の文字数を両方計算し、短いほうを先に選びます。

• URL エンコードでは、#・<・>・%・改行・日本語の文字などをパーセント表記(%23 など)に変えます。特に # をそのままにすると、色の値の後ろがアドレスのフラグメントとして切れてしまい、画像が壊れます。
• 属性値を囲んでいる二重引用符は、一重引用符に置き換えます。そうすれば、結果を HTML の src="…" や CSS の url("…") の中にそのまま入れられます。属性値の中にすでに一重引用符がある場合は置き換えず、%22 のままにします。
• 空白・=・:・/ はそのままにします。引用符で囲んだ HTML 属性や CSS のアドレスの中では、ブラウザがこれらの文字をそのまま読み取ります。Markdown の形では、空白があるとアドレスを <…> で囲みます。

Base64 を画像に戻すとき

ファイル形式の多くは、決まったバイトで始まります。そのため、Base64 の最初の数文字を見るだけで、どの形式か見当がつきます。このツールは data:image/… の先頭部分がなくても、復元したバイトの先頭から形式を判別し、先頭部分に書かれた形式と実際の中身が違う場合はそれを知らせます。

貼り付けたテキストには、余計なものが混ざっていることがよくあります。このツールは次のようなケースを自動で直して読み込み、何を直したかを画像欄の下に表示します。

• 改行・空白: メール(MIME)では、Base64 を1行76文字以下で区切って書くと決まっているため、メールの原文からコピーすると改行が入っています。
• URL セーフ Base64: アドレスに入れるために、+・/ の代わりに -・_ を使う方式(RFC 4648 §5)です。標準の文字に置き換えて読み込みます。
• 欠けたパディング: 末尾の = が省略された値は、文字数に合わせて補います。%3D のようにパーセント表記になった = も元に戻します。
• テキスト内の data: アドレス: HTML の <img>・CSS の url()・Markdown のテキストをそのまま貼っても、最初の data: アドレスを探して読み込み、いくつあったかを知らせます。

一方、文字数を4で割って1余る場合は、直せません。Base64 は4文字で3バイトを表すので、1文字だけ余ることは、コピーの途中で末尾が切れたときにしか起こりません。

よくある間違い

• Base64 を暗号化だと思う: Base64 は、誰でも元に戻せる表記方法です。パスワードや個人情報を隠す目的で使ってはいけません。
• 圧縮だと思う: Base64 にすると、むしろ約3分の1大きくなります。ファイルを小さくしたい場合は、先に画像の圧縮や WebP への変換で小さくしてから変換してください。
• 写真情報が消えると思う: Base64 はバイトをそのまま移すので、Exif に含まれる撮影場所や機器の情報もそのまま残ります。このツールは、JPEG・PNG・WebP に Exif や位置情報が入っているかを写真情報の欄に表示します。
• アドレスバーに Data URL を貼り付ける: 最近のブラウザは、セキュリティ上の理由で、アドレスバーから data: アドレスへ移動することを禁止しています。内容を確認するには、このツールの右側の欄に貼り付けてください。
• image/jpg と書く: JPEG の標準の形式名は image/jpeg です。復元するときに先頭部分に image/jpg とあれば知らせ、形式ボタンを押すと標準の名前に書き直します。

制限と注意点

• ファイル1つあたり10 MB(10,485,760バイト)まで、一度に20個まで入れられます。結果が40万文字を超えると、テキスト欄には先頭と末尾だけを表示し、コピーと保存は全文で行います。画面の KB・MB は 1,024 バイト単位です。
• 画像のアドレス(URL)から画像をダウンロードすることはしません。画像を保存してから入れてください。
• HEIC の写真は変換できますが、プレビューは macOS・iOS の Safari 17 以上でのみ表示されます。TIFF・JPEG XL も、ブラウザによってはプレビューされないことがあります。
• サイズを縮めたり形式を変えたりせず、バイトをそのまま移します。動く GIF・WebP は、復元してもそのまま動きます。
• gzip 転送のバーは、この結果だけを別に圧縮した値です。実際のページでは周囲のテキストと一緒に圧縮されるため、数字が少し違うことがあります。圧縮機能のないブラウザでは、バーは表示されません。
• ブラウザの仕様では、Chromium と Firefox は data: アドレスを512MBまで、Safari は2048MBまで受け付けます。このツールの10 MBという上限はそれよりずっと小さいものの、実際の文書に入れるには、すでに大きなサイズです。

基準日 Base64・data: の規格、Vite・webpack のデフォルト値、ブラウザの長さ制限・圧縮機能の対応状況は、2026-10-20に原文で確認しました。ビルドツールのデフォルト値は、バージョンが変わると異なる場合があります。

出典

• 01RFC 4648: The Base16, Base32, and Base64 Data Encodings24ビットを4文字に(§4)、パディング =(§3.2)、アルファベット外の文字(§3.3)、URL セーフな base64url(§5)
• 02RFC 2397: The "data" URL schemedata:[形式][;base64],内容 の構文
• 03MDN: data: URLs形式を省略すると text/plain、長さの上限(Chromium・Firefox 512MB、Safari 2048MB)、トップレベル移動のブロック
• 04Vite: Build Options — build.assetsInlineLimitデフォルト値 4096(4 KiB)、これより小さいアセットを Base64 URL として埋め込む
• 05webpack: Module — parser.dataUrlConditionmaxSize のデフォルト値 8096バイト、このサイズ以下を埋め込む
• 06webpack: Asset Modulesasset タイプは 8kb より小さいファイルを inline として扱う
• 07CSS-Tricks: Probably Don't Base64 SVG(2014-10-21)SVG を Base64 にすると133~136%、テキストのままのほうが圧縮に有利
• 08W3C: Content Security Policy Level 3§1.3 http・https 以外のスキームはポリシーに明示する必要がある
• 09RFC 2045: MIME Part One§6.8 Base64 の行は76文字以下
• 10MDN: CompressionStreamブラウザ内蔵の gzip 圧縮、2023年5月から主要ブラウザで共通
• 11Can I use: HEIF/HEIC image formatSafari 17 以上(macOS・iOS)のみ表示可能

よくある質問

あわせて使うツール