画像Base64エンコード

画像ファイルをBase64文字列へエンコードします(複数ファイルの変換に対応しています)。

エンコードする画像を入力

ここにファイルをドロップ

画像Base64 エンコードとは?

画像ファイルをBase64エンコード文字列に変換するシンプルで便利なツールです。Base64エンコードを利用すると、画像をテキスト形式で扱えるようになり、HTMLやCSS内に直接埋め込むことができます。

変換処理はブラウザ上で完結するため、画像がサーバーにアップロードされることはなく、高速かつプライバシーを守りながら安全に利用できます。

画像Base64 エンコードの主な用途

Base64エンコードされた画像は以下のような場面で特に役立ちます:

  • HTTP要求の削減: 小さな画像をHTMLやCSSに直接埋め込み、サーバーへの追加リクエストを減らせます
  • APIデータ通信: REST APIなどでバイナリデータではなくJSONでやり取りする際に便利です
  • オフライン使用: 外部ファイルへの参照なしでコンテンツを完結させられます

画像Base64 エンコードの使い方

基本的な使用方法

  1. 「ファイルを選択」ボタンをクリックするか、変換したい画像をドラッグ&ドロップします
  2. 画像が自動的にエンコードされ、結果が表示されます
  3. 必要な形式(Raw、DataURI、HTML、CSS)を選択します
  4. コピーボタンでエンコードされたデータをコピーできます

一度に最大20枚の画像まで変換が可能です(20枚を超える場合は変換されません)。

処理時間について

画像サイズが大きい場合、変換処理やコピー操作に時間がかかることがあります。その場合は処理が完了するまでお待ちください。

出力形式のオプション

エンコード後のデータは、用途に応じて以下の4種類の形式で出力できます。

Base64データ(Rawデータ)

Data URI宣言(例:data:image/png;base64,)を含まない純粋なBase64エンコードされた文字列です。APIやカスタム実装で使用する場合に適しています。

iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA...

Base64データ(DataURI宣言付き)

ブラウザが直接解釈できるData URI形式で出力します。これはdata:スキーマで始まり、MIMEタイプとBase64エンコードを指定します。

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

HTML img tag

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

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

CSS Background Image

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

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

画像データ詳細

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

  • 画像名:元のファイル名
  • 最終更新日:ファイルの更新日時
  • 縦横サイズ:画像の解像度(ピクセル単位)
  • ファイルサイズ:元の画像サイズとBase64変換後のサイズの比較

この情報は特に複数の画像を一度に処理する際に、各画像を識別するのに役立ちます。

注意点

  • Base64エンコードすると、元のバイナリデータと比較してサイズが約33%増加します
  • 大きな画像のBase64エンコードはパフォーマンスに影響する可能性があるため、小~中サイズの画像に最適です
  • ブラウザの制限により、非常に大きなサイズのBase64文字列は処理できない場合があります