画像Base64エンコード

画像Base64エンコードとは？

画像ファイルをBase64形式のテキストデータに変換するツールです。変換後の画像データはHTMLやCSSに直接埋め込めるため、外部ファイルへの参照が不要になります。

小さなアイコンやロゴ画像をHTTPリクエストなしで表示したい場合や、APIでバイナリデータではなくJSONで画像を送受信したい場合に便利です。すべての処理はブラウザ内で完結し、画像がサーバーに送信されることはありません。

一度に最大20枚まで変換できます。大きな画像は処理に時間がかかる場合があります。

小さなアイコンやロゴ画像をHTMLやCSSに直接埋め込むことで、サーバーへのリクエスト数を減らせます。ページ読み込み速度の改善に効果的です。

REST APIでバイナリデータではなくJSON形式で画像をやり取りしたい場合に使用します。画像データをテキストとして扱えるため、JSON内に含めて送信できます。

外部ファイル参照が不要になるため、HTMLファイル単体で完結したコンテンツを作成できます。メール配信やオフライン閲覧用のドキュメント作成に便利です。

Data URI宣言を含まない純粋なBase64文字列です。APIやカスタム実装で使用します。

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...

ブラウザが直接解釈できるData URI形式です。data:で始まり、MIMEタイプとエンコード方式を含みます。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...

HTMLのimgタグとして出力します。Webページに直接貼り付けて使用できます。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA..." alt="Base64 Encoded Image">

CSSのbackground-imageプロパティとして出力します。CSSファイルやスタイル属性に使用できます。

background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...');

エンコード結果の下部に、変換された画像のプレビューと詳細情報が表示されます。