💡 このツールの使いどころ
Base64はバイナリデータをテキストで表現する形式です。画像をBase64化することで、HTMLやCSSに画像を直接埋め込むことができます。
-
HTMLへの埋め込み:
<img src="data:image/png;base64,...">の形式でHTMLに直接記述できます。外部ファイルなしでアイコンや小さな画像を扱いたいときに。 -
CSSへの埋め込み:
background-image: url("data:image/...")としてCSSに埋め込めます。 - Base64→画像の確認:APIレスポンスやログに含まれるBase64文字列が実際にどんな画像か確認・保存したいときに。
🛠️ 使い方
画像 → Base64(エンコード):
① 「📷 画像 → Base64」タブを選択します。
②
画像ファイルをドロップ(またはクリックして選択)します。
③ data URI形式のBase64文字列が生成されます。「📋
コピー」ボタンでクリップボードにコピーできます。
Base64 → 画像(デコード):
① 「📄 Base64 → 画像」タブを選択します。
② テキストエリアにBase64文字列を貼り付けます。
③ 「📷
画像を生成してダウンロード」ボタンで画像ファイルをダウンロードできます。
⚠️ 注意点
- 大きい画像をBase64化すると非常に長い文字列になります。埋め込み用途では小さい画像(アイコン・ロゴ等)の使用を推奨します。
- デコード時、生のBase64文字列(data URI形式でない場合)は画像の種類を自動判定します。判定に失敗した場合はPNG形式として出力します。
- 一部の画像形式(HEIC等)はブラウザが対応していないため正しく変換できない場合があります。
- 変換はすべてブラウザ内で完結します。ファイルデータが外部サーバーへ送信されることは一切ありません。