画像Base64変換

画像Base64変換ツールとは#

画像ファイルをBase64文字列に変換し、HTMLやCSSなどのコード内に画像を埋め込める形にするツールです。Base64は、画像などのバイナリデータをテキストとして扱える形式に変換するエンコード方式です。生のBase64文字列、data URL、<img>タグ、CSSのurl()の4形式から出力を選べます。結果はコピーするか、.txtファイルとしてダウンロードできます。

処理はすべてブラウザ内で行われます。画像が外部に送信されることはありません。

使い方#

1. ドロップゾーンをクリックして画像を選ぶか、ドラッグ&ドロップします。
2. 出力欄の上に並んだ形式から、出力する形式を1つ選びます。
3. 「コピー」ボタンでクリップボードにコピーするか、「ダウンロード」ボタンで.txtファイルとして保存します。

選択した画像はプレビューパネルで確認できます。クリアボタンを押すと、画像と出力をまとめてリセットできます。

出力形式#

• Raw base64: プレフィックスなしのBase64文字列。APIや独自のコードなど、Base64文字列そのものが必要な場合に使います。
• Data URL: data:image/png;base64,...形式。MIMEタイプとBase64データを含むため、HTMLのsrc属性などにそのまま埋め込めます。
• imgタグ: 貼り付けるだけで表示できる<img src="..." alt="">要素。
• CSS url(): background-imageなどにそのまま使えるurl("...")形式。

活用シーン#

• HTMLメールや1枚完結のドキュメントに、小さなアイコンやロゴを埋め込む。
• 画像をCSSファイルに直接埋め込み、スタイルシートと一緒に読み込ませる。
• プロトタイプやコード例にdata URL形式の画像を使う。
• APIやJSONなどで、画像データを文字列として扱う。

よくある質問#

補足#