画像Base64エンコード
画像ファイルをBase64文字列へエンコードします(複数ファイルの変換に対応しています)。
エンコードする画像を入力
ここにファイルをドロップ
または
画像Base64 エンコードとは?
画像ファイルをBase64エンコード文字列に変換するシンプルで便利なツールです。Base64エンコードを利用すると、画像をテキスト形式で扱えるようになり、HTMLやCSS内に直接埋め込むことができます。
変換処理はブラウザ上で完結するため、画像がサーバーにアップロードされることはなく、高速かつプライバシーを守りながら安全に利用できます。
画像Base64 エンコードの主な用途
Base64エンコードされた画像は以下のような場面で特に役立ちます:
- HTTP要求の削減: 小さな画像をHTMLやCSSに直接埋め込み、サーバーへの追加リクエストを減らせます
- APIデータ通信: REST APIなどでバイナリデータではなくJSONでやり取りする際に便利です
- オフライン使用: 外部ファイルへの参照なしでコンテンツを完結させられます
画像Base64 エンコードの使い方
基本的な使用方法
- 「ファイルを選択」ボタンをクリックするか、変換したい画像をドラッグ&ドロップします
- 画像が自動的にエンコードされ、結果が表示されます
- 必要な形式(Raw、DataURI、HTML、CSS)を選択します
- コピーボタンでエンコードされたデータをコピーできます
一度に最大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文字列は処理できない場合があります