画像Base64変換ツール

主な機能

• 双方向変換: 画像→Base64エンコードとBase64→画像デコードを一画面で
• 多様な形式に対応: JPG、PNG、WebP、GIF、BMP、SVGに対応
• data URI即時生成: HTML img srcやCSS background-imageにすぐ使えるdata URIを出力

使い方

1. 画像をアップロード: 左パネルに画像をドラッグするか、ファイル選択ボタンでアップロード
2. 結果をコピー: data URI全体またはBase64部分のみをコピー
3. Base64→画像に復元: 右パネルにBase64文字列を貼り付けると画像が復元されます

活用例

• HTML埋め込み: img srcにdata URIを使ってサーバーリクエストなしで画像表示
• CSS背景: background-image: url(data:...)でCSSに画像を埋め込み
• API転送: REST APIやJSONペイロードに画像データをBase64で含める
• デバッグ: Base64でエンコードされた画像データを素早く視覚化

コード例

生成したdata URIをHTMLやCSSにそのまま貼り付けて使用できます。

HTML

<!-- img src に data URI を直接埋め込む -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="画像">

<!-- picture 要素と組み合わせる -->
<picture>
  <source srcset="data:image/webp;base64,UklGRiAA...==" type="image/webp">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==" alt="画像">
</picture>

CSS

/* background-image に data URI を使う */
.thumbnail {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...==");
  background-size: cover;
  background-position: center;
}

/* content プロパティで使う */
.icon::before {
  content: url("data:image/svg+xml;base64,PHN2ZyB4bWxu...==");
}