画像を Base64 に変換
画像ファイルをブラウザ上で Base64 文字列に変換できる無料オンラインツールです。アップロード不要・安全。HTML や CSS にインライン画像として埋め込みたいときに使えます。
変換で失敗しにくくする確認ポイント
変換前に確認
- 提出先やアップロード先が指定している形式を確認します。
- 透過、アニメーション、画質など、変換で変わりやすい要素を先に確認します。
- 容量を小さくしたいのか、互換性を上げたいのか、目的を決めてから形式を選びます。
変換後に確認
- 変換後の画像を開いて、色味や文字のにじみがないか確認します。
- ファイルサイズが大きい場合は、続けて圧縮やリサイズを使うと調整しやすいです。
- 編集途中ならPNG、共有や掲載ならJPGやWebPなど、最後の用途に合わせて保存します。
使い方に迷ったときはガイドも確認
画像形式の違い、圧縮のコツ、PDFのまとめ方などをガイドページで整理しています。用途が近い作業をまとめて確認したいときに便利です。
次に続けやすい作業
Base64 変換はどんなときに使う？
Base64 は画像データをテキスト文字列として表現する形式です。HTML の <img src='data:image/png;base64,...'> や CSS の background-image で画像ファイルなしに画像を埋め込めます。メール送信での添付画像、Web フォントの埋め込み、JSON や XML の中に画像データを含めたいときなどに使われます。
Data URL と Base64 の違い
Data URL は「data:image/png;base64,（Base64文字列）」の形式で、そのまま HTML や CSS の src 属性に貼り付けられます。Base64 のみ表記は生の文字列で、API 送信や独自フォーマットへの組み込みに使います。
ブラウザで直接画像として使いたい場合は Data URL を、バックエンドの API や JSON に渡したい場合は Base64 のみを使うのが一般的です。
注意点
Base64 はバイナリデータをテキストに変換するため、元のファイルサイズより約 33% 大きくなります。大きな画像をインライン埋め込みするとページの読み込みが遅くなるため、小さいアイコンやロゴなどに限定して使うのが適切です。
失敗しにくくするポイント
- 画像 から Base64 へ変換しても、元画像で失われた情報が戻るわけではありません。
- 提出先やアップロード先に指定形式がある場合は、先にその条件を見てから変換すると無駄がありません。
- 変換後もファイルが重いと感じる場合は、圧縮やリサイズを組み合わせると扱いやすくなります。
- 文字が多い画像、透明背景付きの画像、写真では、形式ごとに見え方やサイズ差が出やすいので一度確認しておくと安心です。
画像 と Base64 の考え方
使い方
- 画像ファイルをアップロードします（JPG、PNG、WebP、GIF、SVG など）
- 変換後の Data URL または Base64 文字列が表示されます
- 必要な形式をコピーボタンでクリップボードにコピーします
よくある質問
HTML でそのまま使うには？
<img src='（Data URL をここに貼り付け）'> の形で使えます。Data URL 欄のテキストをそのままコピーして src 属性に入れてください。
CSS で背景画像として使うには？
background-image: url('（Data URL をここに貼り付け）') の形で使えます。
データは安全ですか？
はい。変換はすべてブラウザ内で行われ、画像ファイルは外部サーバーへアップロードされません。
どの画像形式に対応していますか？
JPG、PNG、WebP、GIF、SVG、AVIF など、ブラウザが対応しているすべての画像形式で動作します。
ファイルサイズの制限はありますか？
ブラウザのメモリ制限に依存します。大きな画像は Base64 文字列も非常に長くなるため、実用的には 1MB 以下の画像での使用を推奨します。