画像 Base64 変換 - 無料オンラインツール
画像をBase64文字列に変換し、CSSやHTMLに埋め込めるデータURIを生成。PNG・JPG・GIF・WebP・SVG・BMPに対応し、ブラウザ内で安全に処理します。
画像をアップロード
アップロード
ドラッグ＆ドロップまたはクリックしてアップロード
PNG、JPG、GIF、WebP、SVG、BMP に対応
Base64 出力
Base64 文字列がここに表示されます...
Base64 文字列がここに表示されます...
画像を Base64 に変換する方法
ドラッグ＆ドロップまたはアップロードエリアをクリックして画像をアップロードします。
ツールが即座に画像を Base64 文字列に変換します。
生の Base64 文字列または HTML/CSS 用の Data URI 形式をコピーします。
生成された文字列を使用して、画像をコードに直接埋め込みます。
主な機能
即時変換
サーバーへのアップロードなしで画像を即座に Base64 に変換します。
プライバシー優先
すべての処理はブラウザ内でローカルに行われます。画像がデバイスから出ることはありません。
全形式対応
PNG、JPEG、GIF、SVG、WebP、BMP 形式と互換性があります。
Data URI 対応
HTML <img> タグまたは CSS background-image で直接使用できる完全な Data URI 文字列を取得します。
よくある質問
なぜ画像を Base64 に変換するのですか？
画像を Base64 に変換すると、HTML や CSS ファイルに直接埋め込むことができ、HTTP リクエストの数を減らして小さな画像のページ読み込み時間を短縮できます。
ファイルサイズ制限はありますか？
処理はブラウザ内で行われるため、制限はデバイスのメモリに依存します。ただし、HTML ファイルサイズの肥大化を避けるため、Base64 は小さな画像（アイコン、ロゴ）にのみ使用することをお勧めします。
画質の低下はありますか？
いいえ、Base64エンコーディングは可逆です。デコードされた画像は元の画像と同一になります。
画像をツールにドラッグ＆ドロップするか、クリックして選択するだけで、即座に Base64 文字列へ変換されます。生の Base64 テキストと、HTML や CSS にそのまま貼り付けられる Data URI（data:image/png;base64,...）の両方が出力されます。PNG・JPG・GIF・WebP・SVG・BMP に対応しており、すべての処理はブラウザ内で完結するため、ファイルが外部サーバーに送信されることはありません。
画像を Base64 に変換する手順
- 1
画像をアップロード
ファイルをアップロードエリアにドラッグ＆ドロップするか、クリックしてファイルを選択します。PNG・JPG・GIF・WebP・SVG・BMP に対応しています。
- 2
エンコード結果を取得
ツールはファイルをローカルで読み込み、サーバーへの通信なしに即座に Base64 文字列を生成します。
- 3
生の Base64 か Data URI を選択
JSON ペイロードには生の Base64 テキストをコピー、HTML の <img> タグや CSS の background-image には Data URI をコピーしてご利用ください。
- 4
コードに埋め込む
Data URI をマークアップやスタイルシートに直接貼り付けると、画像をインラインで表示でき、HTTP リクエストを削減できます。
参考資料
- RFC 2397 — data URL スキーム
Base64 エンコードされたメディアをインラインで埋め込むための data: URL スキームを定義した IETF 仕様書。
- MDN — データ URL
Data URL の構文・Base64 エンコード・HTML と CSS への画像埋め込み方法を解説した実践的ガイド。
関連ツール
よくある質問
- なぜ画像を Base64 に変換するのですか？
- Base64 に変換すると、画像をテキストとして HTML や CSS に直接埋め込めるため、外部ファイルへの HTTP リクエストが不要になります。アイコンや小さなロゴに特に有効です。
- ファイルサイズの上限はありますか？
- ツール自体に固定の上限はありませんが、実際の限界はブラウザのメモリに依存します。なお、Base64 出力は元のファイルより約 33% 大きくなるため、小さな画像への使用をお勧めします。
- 変換すると画質が下がりますか？
- いいえ、Base64 エンコードはロスレス（可逆）です。デコード後の画像は元のファイルとバイト単位で完全に同一です。
- 生の Base64 と Data URI の違いは何ですか？
- 生の Base64 はエンコードされた文字列そのものです。Data URI はそれに data:image/png;base64, というプレフィックスを付けたもので、ブラウザが MIME タイプを認識し、<img> の src 属性や CSS の background-image にそのまま使えます。
- 画像はサーバーにアップロードされますか？
- されません。すべての処理は FileReader API を使用してブラウザ内でローカルに行われます。画像データがデバイスの外に出ることはありません。
- CSS で Base64 画像を使うには？
- Data URI をコピーして、CSS ファイルの background-image: url('data:image/png;base64,...'); の値として貼り付けてください。
- SVG ファイルも変換できますか？
- はい、SVG に対応しています。ただし SVG はテキスト形式なので、Base64 に変換するよりも <svg> タグとして直接埋め込む方がファイルサイズを小さく保てる場合もあります。