画像 → Base64

画像をCSS・HTML用のBase64データURIに変換。

2秒で画像をBase64にエンコード

データURIを使えば、外部ファイルなしで画像をコードに直接埋め込めます。画像をドロップし、出力形式（生のデータURI・CSSプロパティ・HTMLタグ）を選んで、結果をコピーするだけです。

ヒント：ベクターアイコンなら、インラインSVG（HTMLに直接貼り付け）の方がBase64版より軽くて鮮明なことが多いです。

データURIとは何ですか？

ファイルのデータを直接含むURLで、data:image/png;base64,iVBOR…という形式です。src属性、CSSのbackground-image、ファビコンなど、画像URLが使える場所ならどこでも使えます。

なぜ画像をBase64にエンコードするの？

別ファイルや追加のHTTPリクエストなしで、画像をHTML・CSS・JSONに直接埋め込むためです。小さなアイコン、HTMLメール、自己完結型のプロトタイプに便利です。

Base64でファイルサイズは増えますか？

はい、元のバイナリより約33％増えます。テキスト表現の代償です。サーバーのgzip/brotli圧縮で一部は取り戻せますが、大きな画像には通常のファイルの方が効率的です。

どのくらいのサイズまでが適切？

目安として、数十KB未満の画像（アイコン、ロゴ、小さなパターン）に限定しましょう。それ以上はページが肥大化し、個別キャッシュもできず、描画も遅くなります。

画像はどこかに送信されますか？

いいえ。読み込みとエンコードはブラウザのFileReader APIが行います。画像が端末から出ることはありません。