画像Base64変換器

画像Base64変換器は、あらゆる画像をBase64エンコードされた文字列に変換する無料のオンラインツールです。Base64エンコーディングは、バイナリの画像データをプレーンなASCIIテキストに変換するため、個別の画像ファイルを用意することなく、HTML、CSS、JavaScript、JSON、XMLなどに画像を直接埋め込むことができます。すべての処理はブラウザ上で行われるため、画像がサーバーにアップロードされることはありません。

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

Base64は、64個のASCII文字（A–Z, a–z, 0–9, +, /）を使用してバイナリデータを表現するバイナリ-テキスト変換スキームです。画像に適用すると、Base64は生の画像バイトを、ソースコードに直接埋め込むことができる長いテキスト文字列に変換します。ウェブ開発でBase64画像を使用する最も一般的な方法は、Data URIを介することです。これは、data:[MIMEタイプ];base64,[エンコード済みデータ]という形式を使用して、URL内にインラインデータを記述する仕組みです。

Base64画像を使用すべきケース

Base64画像を使用すべきでないケース

Base64エンコーディングは、ファイルサイズを約33%増加させます。大きな画像（写真、バナーなど）の場合は、マルチプレキシングをサポートするHTTP/2を介して配信される従来の画像ファイルを使用してください。本番環境では、サイズのオーバーヘッドがHTTPリクエストを減らすメリットを上回ってしまうため、10〜20KBを超える画像にBase64を使用することは避けてください。また、大きなBase64文字列はブラウザによって個別にキャッシュすることもできません。

サポートされている画像形式

このツールの使い方

1. 画像をアップロードする： アップロードエリアに画像ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択するか、Ctrl+V（Macの場合はCmd+V）を使用してクリップボードから画像を貼り付けます。複数の画像を一度に選択すると、選択した出力形式で各画像のテキストファイルを取得できます。
2. プレビューとメタデータを確認する： ツールは即座に画像のプレビューを表示し、ファイル名、寸法、MIMEタイプ、およびオリジナルとエンコード済みデータの視覚的なサイズ比較を含むメタデータを表示します。
3. 出力形式を選択する： 4つの出力タブを切り替えます。生のBase64（エンコードされた文字列のみ）、Data URI（MIMEプレフィックス付き）、HTML <img> タグ（そのまま貼り付け可能）、またはCSS background-image プロパティ。
4. 結果をコピーする： 「⧉ コピー」ボタンをクリックしてエンコードされた出力をクリップボードにコピーし、コードに貼り付けてください。

出力形式ガイド

生のBase64文字列 (Raw Base64)

プレフィックスのない純粋なBase64エンコードテキストです。カスタム実装、API呼び出し、または自分でMIMEプレフィックスを追加する場合にこの形式を使用します。

Data URI

MIMEタイププレフィックス（例：data:image/png;base64,iVBOR...）を含む完全なData URIです。これは最も汎用性の高い形式で、HTMLの src 属性、CSSの url() 値、およびJavaScriptでの画像読み込みで直接機能します。

HTML <img> タグ

Base64 Data URIを src に持ち、適切なレイアウトのための width と height 属性を備えた、すぐに使用できるHTML画像要素です。そのままHTMLに貼り付けてください。

CSS background-image

background-image: url('data:...') を使用した完全なCSSプロパティ宣言です。外部ファイルを参照せずに画像を背景として使用するために、任意のCSSルールに追加してください。

プライバシーとセキュリティ

このツールは、JavaScriptの FileReader API を使用して、ウェブブラウザ内でローカルにすべての処理を行います。画像がサーバーにアップロードされることはなく、保存されたり、ネットワーク経由で送信されたりすることもありません。Base64変換はすべてお使いのデバイス上で行われるため、機密性の高い画像や機密画像に対しても安全に使用できます。

よくある質問

画像のBase64エンコーディングとは何ですか？

Base64エンコーディングは、バイナリ画像データをASCIIテキスト文字に変換する仕組みです。これにより、画像をHTML、CSS、またはJavaScriptコード内にData URIとして直接埋め込むことができ、個別の画像ファイルのリクエストが不要になります。エンコードされた文字列は、元のバイナリデータよりも約33%大きくなります。

Base64エンコードされた画像はいつ使用すべきですか？

アイコン、ロゴ、UI要素などの小さな画像（通常10KB未満）に使用してください。HTTPリクエストを減らし、デプロイを簡素化できます。33%のサイズ増加がパフォーマンスに悪影響を与えるため、大きな画像には避けてください。メールテンプレート、単一ファイルのHTMLドキュメント、CSSの背景画像にも便利です。

画像はサーバーにアップロードされますか？

いいえ。このツールは、JavaScriptのFileReader APIを使用して、ブラウザ内ですべての処理を行います。画像がデバイスから離れることはないため、完全なプライバシーとセキュリティが確保されます。変換はお使いのコンピュータ上で即座に行われます。

どの画像形式がサポートされていますか？

この変換器は、PNG、JPEG、GIF、WebP、SVG、BMP、ICOを含むすべての一般的な画像形式をサポートしています。ツールは自動的にMIMEタイプを検出し、各形式に対して正しいData URIプレフィックスを生成します。

Base64文字列とData URIの違いは何ですか？

Base64文字列は、画像データのエンコードされたテキスト表現そのものです。Data URIには、MIMEタイプを含むプレフィックス（例：data:image/png;base64,）が含まれ、その後にBase64文字列が続きます。Data URIは、HTMLのsrc属性やCSSのurl()値で直接使用できます。

追加リソース

• Data URL - MDN Web Docs
• Base64 エンコーディング - MDN Web Docs