Archipela / Dev / 画像→Base64変換

🖼️ 画像→Base64変換

画像ファイルをBase64データURLに変換します。プレビューとファイルサイズを確認しながら、生のBase64・data URL・imgタグ・CSSの background-image コードを一括生成。すべてブラウザ内で処理され、サーバーに送信されません。

Base64から画像への復元（双方向変換）はこちら。

画像 ⇄ Base64 変換へ →
📁

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

PNG・JPEG・GIF・WebP・SVG などの画像に対応。ファイルはアップロードされません。

📘 使い方

  1. ドロップゾーンをクリックして画像ファイルを選ぶか、ファイルを直接ドラッグ＆ドロップします。
  2. 画像のプレビューと、元のサイズ・Base64後のサイズ・MIMEタイプが表示されます。
  3. 「生のBase64」「データURL」「imgタグ」「CSS background-image」の各コードが自動生成されます。
  4. 各欄の「コピー」ボタンで必要なコードをクリップボードにコピーして利用してください。

❓ よくある質問

画像をBase64にするとサイズはどれくらい増えますか？

Base64は3バイトを4文字で表現するため、元のバイナリよりおよそ 33% 大きくなります。小さなアイコンやロゴの埋め込みには便利ですが、大きな画像ではHTML/CSSが肥大化するため注意してください。

どんな場面で使いますか？

アイコンや小さな画像をHTMLやCSSに直接埋め込み、HTTPリクエスト数を減らしたい場合に有効です。data: URLとして <img> の src や CSS の background-image に指定できます。

ファイルはサーバーに送信されますか？

いいえ。変換は FileReader を使ってブラウザ内だけで実行され、画像がサーバーへアップロードされることはありません。

2MBを超える画像も変換できますか？

変換は可能ですが、Base64文字列が非常に長くなり、コピーやページ表示が重くなる場合があります。埋め込み用途では小さめの画像を推奨します。