画像をBase64に変換

画像をアップロードしてBase64エンコード文字列に変換し、結果をコピーまたはダウンロードできます

1165 回使用 | 5.0 評価

画像アップロード

ここに画像をドラッグ&ドロップ、または

変換結果

未処理

結果を表示するには画像をアップロードして変換してください

使用説明

1

出力形式を選択

data:imageプレフィックスを含めるかどうかを選択し、必要に応じて適切な形式を選んでください。

2

画像をアップロード

アップロードエリアに画像をドラッグ&ドロップするか、参照ボタンをクリックして画像を選択します。

3

画像を変換

「Base64に変換」ボタンをクリックすると、システムが画像をBase64エンコードに変換します。

4

結果をコピーまたはダウンロード

変換が完了すると、Base64エンコードをコピーするか、テキストファイルとしてダウンロードできます。

5

画像をプレビュー

Base64エンコードを使用して、元に戻した画像の効果をプレビューできます。

Base64の基本知識

Base64エンコードとは?

Base64は、64種類の印刷可能文字を使用してバイナリデータを表現するエンコード方式です。HTML、CSS、JavaScriptに画像を埋め込んだり、HTTPリクエストでバイナリコンテンツを送信したりするなど、テキストプロトコルを介してバイナリデータを送信する必要があるシナリオでよく使用されます。

画像をBase64に変換するアプリケーションシナリオ

Web開発

小さな画像をHTML/CSSに直接埋め込み、HTTPリクエストを減らしてページの読み込み速度を向上させます。アイコンや小さな装飾画像などに特に適しています。

データ転送

テキストのみをサポートするプロトコル(JSON API、XMLデータ、電子メール添付ファイルなど)で画像データを送信します。

データストレージ

画像をテキスト形式で直接保存し、データベース、設定ファイル、またはプレーンテキストドキュメントに保存しやすくします。

安全な転送

HTTP Basic Authentication認証情報のエンコードなど、バイナリデータを安全に転送する必要があるシナリオで使用します。

data:imageプレフィックスについて

Base64エンコードされた画像にはプレフィックスを含めることも含めないこともでき、それぞれ異なる用途があります:

プレフィックスを含む (data:image/jpeg;base64,)

HTMLのimgタグのsrc属性やCSSのbackground-image属性に直接使用でき、ブラウザが正しく認識して画像を表示することができます。

プレフィックスを含まない

プレフィックスを手動で追加する必要がある場合や、特定のシステムでの使用に適しています。一部のAPIリクエストやデータベースストレージなどです。

Base64エンコードの利点と欠点

利点

  • HTTPリクエスト数を減らし、小さな画像の読み込み速度を向上させる
  • プレーンテキスト形式に埋め込むことができ、データ交換が容易
  • 追加のファイル参照が不要で、プロジェクト構造が簡素化される
  • クロスドメインの問題や画像キャッシュの問題を回避

欠点

  • エンコード後のデータ量は約33%増加し、大きな画像には適していない
  • 個別にキャッシュできず、ページの読み込み時に毎回再解析が必要
  • HTML/CSS/JSファイルのサイズが増加する
  • 頻繁に更新される画像には適しておらず、変更するには再エンコードが必要

使用のヒント

  • 10KB未満の小さな画像(アイコン、小さなボタンなど)の場合、Base64に変換することでページのパフォーマンスが向上します。大きな画像の場合は、引き続き個別の画像ファイルを使用することをお勧めします。
  • Web開発では、CSSのurl(data:image/...)形式を使用してBase64画像を埋め込んだり、HTMLのimgタグのsrc属性で直接使用したりできます。
  • JSONデータでBase64画像を送信する必要がある場合は、データサイズを小さくするために、エンコードする前に画像を圧縮することをお勧めします。
  • プレフィックスを含むBase64エンコードは、ブラウザのアドレスバーに直接貼り付けて画像の効果を確認でき、簡単に検証できます。
広告

推荐工具

画像OCR文字認識ツール - オンライン画像文字抽出

無料オンライン画像OCR文字認識ツールで、JPG、PNGなどの形式の画像から文字を抽出でき、中国語、英語など複数の言語を認識可能です。

GIF分割ツール - GIFファイルを複数のフレーム画像に変換

無料オンラインGIF分割ツールで、GIFアニメーションファイルを複数のフレーム画像に変換、すべてのフレームのダウンロードをサポート、完全にオフラインで動作、データ100%安全。

画像をFaviconに変換するツール - オンラインウェブサイトアイコンジェネレーター

無料オンライン画像からFaviconへの変換ツールで、JPG、PNG、GIFなどの形式の画像をICO形式のfaviconアイコンに変換でき、サイズと形式をカスタマイズ可能です。

QR コードジェネレーター - オンラインで QR コードを生成

オンライン QR コード生成ツール - 効率的な QR コード作成プラットフォーム。テキスト、Web サイトリンク、連絡先情報などのコンテンツをワンクリックで QR コードに変換して生成できます。

画像サイズ調整ツール - オンライン一括画像リサイズ

無料オンライン画像サイズ調整ツールで、複数の画像を一括アップロードしてサイズを調整可能で、幅、高さ、拡大縮小率などのパラメータをカスタマイズできます。