Base64 画像

画像を Base64 Data URI に変換、またはその逆を実行。ドラッグ&ドロップとプレビューに対応

📷
クリックするか、画像をここにドラッグしてアップロード
PNG / JPG / GIF / SVG / WebP / BMP に対応
{{ imageInfo.name }} · {{ imageInfo.sizeText }}
クリックして別の画像を選択
長さ: {{ base64Output.length }} 文字 MIME: {{ imageInfo.mime }}
文字数: {{ base64Input.length }}
{{ errorMsg }}
{{ decodedImageInfo.mime }} · {{ decodedImageInfo.sizeText }}

Base64 画像変換について

Base64 画像変換は、画像ファイルを Base64 でエンコードした Data URI 文字列に変換します。Data URI は画像データを HTML や CSS に直接埋め込み、data:image/png;base64,... という形式になります。

Base64 画像の主な用途には、HTTP リクエストの削減(小さな画像を HTML にインライン化)、CSS 背景画像の埋め込み、メールへの画像挿入、Markdown での画像参照などがあります。

本ツールは双方向に対応しています。画像ファイルを Base64 Data URI に変換するほか、Base64 Data URI を画像に戻してダウンロードできます。すべてブラウザ内で動作します。

よくある質問

Q: Base64 変換すると画像は大きくなりますか?
A: はい。Base64 はデータ量を約 33% 増加させます。大きな画像の場合、ページ読み込みが遅くなるためインライン化は控えめにしてください。
Q: どの画像形式に対応していますか?
A: PNG、JPEG、GIF、SVG、WebP、BMP、ICO などの一般的な形式に対応しています。MIME タイプは出力時に自動判定されます。
Q: CSS で Base64 画像を使うには?
A: background-image: url(data:image/png;base64,...) を使用します。本ツールの「CSS 背景をコピー」ボタンを押すと、貼り付け可能な CSS コードがワンクリックで生成されます。