🖼️ 画像→Base64変換

画像をドラッグ&ドロップ、またはクリックして選択

画像ファイルをBase64形式のデータURIに変換するツールです。CSSの背景画像埋め込みやHTMLのimgタグへの直接埋め込みなど、画像ファイルを別途用意せずに済ませたい場面で便利です。小さなアイコンやロゴをCSS/HTMLファイル1つにまとめたい場合に活用できます。

使い方

  1. 画像をドラッグ&ドロップするか、クリックしてファイルを選択します。
  2. 生成されたデータURI(Base64文字列)が表示されます。
  3. 「コピー」でデータURIをそのままコピーするか、「CSSとしてコピー」でbackground-image用のCSSプロパティとしてコピーします。

よくある質問

Base64エンコードするとファイルサイズは大きくなりますか?

はい。Base64はバイナリデータを文字列に変換するため、元のファイルサイズよりおよそ33%ほど大きくなります。

どんな用途で使われますか?

CSSのbackground-imageやHTMLのimg src属性に直接埋め込む場合、小さなアイコン画像を別ファイルにせずインライン化したい場合などに使われます。

大きなサイズの写真にも向いていますか?

Base64化するとファイルサイズが約33%増える上にHTML/CSSファイル自体が肥大化するため、大きな写真よりもアイコンやロゴなど小さな画像への利用が向いています。

変換した画像はサーバーに送信されますか?

いいえ。すべてブラウザ内で処理されるため、画像やデータURIが外部サーバーに送信されることはありません。

生成したデータURIはそのままHTMLに貼り付けられますか?

はい。<img src="...">のsrc属性にそのまま貼り付けて使用できます。