画像 → Base64について
API 仕様、メール HTML、プロトタイプでは画像を別ファイルではなくテキストで渡すことがあります。PNG/JPEG/GIF/WebP を選び、生 Base64 か data URL をコピーします。
Base64 はバイナリを A–Z、a–z、0–9、+、/ の 64 文字で ASCII 化します。data:image/png;base64, のような MIME 付き data URL なら、img src や background-image で追加 HTTP なしに表示できます。
できること
選択してコピー
ファイル選択またはドラッグ＆ドロップで出力全体をコピー。img の src、CSS url()、OpenAPI 例、JSON の Base64 フィールドに貼れます。
data URL と生 Base64
- data URL：data:image/<型>;base64,<本文> — HTML/CSS 向け。
- 生 Base64：<本文> のみ — content-type を別フィールドで渡す API 向け。
- 中身のバイトは同じ。ラッパーの有無だけの差です。
何がエンコードされるか
- ディスク上の画像ファイル全体（ヘッダ＋圧縮データ、GIF はフレーム含む）。
- ピクセル RGB の十進変換ではなく、ファイルバイト列そのもの。
- 文字数はおおよそ元サイズの 4/3（data URL は短いプレフィックス分追加）。
サイズと性能
約 33% 膨らみ HTML/JSON 内に埋まるため、/images/logo.png のような URL キャッシュは効きにくい。大きなヒーロー画像は CDN、小アイコン・fixture・デモ向けに Base64 を。
よくある使い方
オンラインで画像を Base64 に
PNG/JPEG/GIF/WebP を選び、生か data URL を切り替えて出力をコピー。バックエンドは生、静的 HTML は data URL が多いです。
img 用 data URL
data:image/png;base64,… 全体を src または CSS url() に。ホスティング不要のプロトタイプに。
CSS インライン
小さなスプライトや 1×1 プレースホルダを stylesheet に。外部画像がブロックされるメール/PDF 向け。
JSON / OpenAPI
アップロード API の Base64 フィールドに生文字列を貼り、PNG/JPEG 等は別メタデータで一致させる。
よくある質問
- 画像を Base64 にする手順は？
- 本ページでファイルを選ぶかドロップし、エンコード後に出力をコピー。HTML/CSS なら data URL、API だけなら生 Base64 を選びます。
- Base64 と data URL の違いは？
- Base64 はエンコード文字列のみ。data URL は data:image/webp;base64, 等のスキーム付き。ブラウザ内嵌は前者付きが必要なことが多いです。
- 対応フォーマットは？
- PNG（透過）、JPEG（写真）、GIF（静止/アニメ）、WebP。data URL の MIME は選択ファイルに合わせます。
- バイナリとの関係は？
- 画像ファイルはバイナリ。Base64 は 3 バイト→4 文字で JSON/HTML に載せやすくし、デコードで元ファイルと同一バイトに戻ります。
- なぜ文字列の方が大きい？
- 6 bit/文字とパディングで約 4/3。300 KB の JPEG が約 400 KB のテキストになることもあります。
- サイズ上限は？
- サーバー固定上限はありませんが、ブラウザ内エンコードのため数 MB 超はメモリとペーストが重くなります。大写真は URL 参照を推奨。
- 逆に Base64 から画像へは？
- 同カテゴリの「Base64 から画像」ツールで data URL または生 Base64 を貼り、プレビューとダウンロードができます。
- 本番で Base64 画像は？
- 大きなアセットは CDN/静的パスでキャッシュを活かす。小アイコン・テストデータ・単発ドキュメント向け。多数インライン時は HTML 重量に注意。
data URL プレフィックス例
PNGdata:image/png;base64,…（透過可）JPEGdata:image/jpeg;base64,…GIFdata:image/gif;base64,…WebPdata:image/webp;base64,…API 生フィールド仕様が data URL 不要ならカンマ以降のみ約 33% 増文字数 ≈ バイト × 4/3