画像からBase64へ即座にデータURI化

imgタグのsrc属性に指定します：

画像をドロップするだけで、CSS、HTML、JSON、メールですぐに使えるデータURIを取得できます。すべてブラウザ内で処理されます。

変換方法

PNG、JPG、GIF、SVG、WebPファイルをドロップしてください。

data:image/...;base64,... 形式の文字列がすぐに出力ボックスに表示されます。

CSSのurl()、HTMLの<img src>、またはJSON設定ファイルで使用できます。

1KB未満のアイコンをインライン化し、ネットワークリクエストを削減します。

外部アセットへのリンクが制限されている場合に最適です。

重要な背景画像のリクエストを減らし、読み込みを最適化します。

画像をソースコードに含めることで、完全なオフライン動作を実現します。

base64画像エンコーディングとは？

バイナリデータをASCIIテキストに変換する手法です。CSS、HTML、JSON内に画像を直接埋め込むことができます。

URLの代わりにbase64を使うべき時は？

小さな画像、メール、インラインCSSに適しています。大きな画像はファイルサイズが約33%増加するため、ホストされたURLの使用を推奨します。

なぜbase64文字列は長くなるのですか？

3バイトのデータを4文字で表現するため、約33%のオーバーヘッドが発生します。

ファイルはどこかにアップロードされますか？

いいえ。FileReader.readAsDataURLを使用してブラウザ内でローカル処理されます。

SVGのエンコードは可能ですか？

可能です。ただし、SVGの場合はURLエンコードの方がサイズが小さくなる場合があります。

CSSでの使い方は？

url()の中に貼り付けます。例：background-image: url('data:image/png;base64,...');

HTMLでの使い方は？

imgタグのsrc属性に指定します：<img src="data:image/png;base64,...">

ファイルサイズの制限はありますか？

ブラウザの仕様上、インラインデータURIとしては2MB程度が実用的な上限です。

2KBを超える画像には、CDN経由のURLの方が高速です。