使い方
- 「ファイルを選択」または画像をドラッグ＆ドロップでアップロードします。
- 出力形式(Data URI / 純粋なBase64 / HTMLタグ / CSSコード)をラジオボタンで選択します。
- 出力欄に変換済みの文字列が表示されます。「コピー」ボタンでクリップボードにコピーできます。
- Base64文字列を画像に戻すには「Base64→画像」タブを選び、文字列を貼り付けて「プレビュー」ボタンを押します。
Base64変換の用途と出力形式の使い分け
| 形式 | 用途 | 例 |
|---|---|---|
| Data URI | HTMLの img タグや CSS に直接埋め込む | <img src="data:image/png;base64,..."> |
| 純粋なBase64 | API リクエストの JSON フィールドや XML に使う | {"image": "iVBORw0KGgo..."} |
| HTMLタグ | コピペですぐ使える img 要素 | <img src="..." alt="..."> |
| CSSコード | 背景画像として CSS に埋め込む | background-image: url("data:...") |
よくある質問
- Q. どんな場面で使いますか?
- A. HTML/CSSに画像を直接埋め込む・JSON/XMLにバイナリデータを含める・メール添付をBase64で送る・Webアプリのアイコンをコード内に埋め込む などの場面で利用されます。特に外部リクエストを発生させたくない小さなアイコン・ロゴの埋め込みに向いています。
- Q. Data URIと純粋なBase64の違いは?
- A. Data URIは `data:image/png;base64,....` という形式で、`<img src="">` タグに直接貼り付けられます。純粋なBase64はデータ部分のみで、REST APIへの送信やJSON埋め込みなどプログラム処理に向いています。
- Q. 変換後のデータサイズはどうなりますか?
- A. Base64エンコードにより元のファイルサイズの約1.33倍(4/3倍)に増加します。小さなアイコン(数KB以下)への利用が実用的です。数百KB以上の画像では外部ファイル参照の方がページ読み込みが速くなります。
- Q. 対応している画像形式は?
- A. ブラウザが表示できる形式(PNG / JPEG / GIF / WebP / SVG / BMP / ICO など)をすべてサポートしています。AVIF・HEIC はブラウザの対応状況により異なります。
- Q. 画像はサーバーに送信されますか?
- A. 送信されません。すべての処理はお使いのブラウザ内のみで完結します。機密画像・社内ロゴなどを扱う場合も安心してご利用いただけます。