Base64画像エンコードとは？
Base64画像エンコードは、バイナリ画像データをASCII文字列に変換し、外部ファイルを参照せずにHTML・CSS・JSONに直接埋め込めるようにする技術です。変換結果はデータURI——data:image/png;base64,に始まり、その後に画像のBase64エンコードされたバイト列が続く自己完結型の文字列です。ブラウザはデータURIを外部画像URLとまったく同様に扱い、Base64ペイロードをデコードして画像をインラインで描画します。
この技術はRFC 2397（データURIスキーム）とRFC 4648（Base64エンコード）で定義されています。画像をBase64エンコードすると、バイナリピクセルデータの3バイトごとに4つのASCII文字になり、データ量が約33%増加します。このオーバーヘッドはあるものの、インライン画像はアセットごとのHTTPリクエストを排除できます——画像が小さい（アイコン、ロゴ、1x1トラッキングピクセルなど）場合、個別リクエストの往復レイテンシが余分なバイトのコストを上回るため、意味のある最適化となります。
データURIはすべてのモダンブラウザ、メールクライアント（一部制約あり）、および標準URI構文を受け付けるあらゆるコンテキストで利用できます。ネットワークリクエスト数の削減によって体感表示速度を向上させたい場面——シングルページアプリケーション、HTMLメールテンプレート、SVGスプライト、CSSのbackground-image宣言——で広く使用されています。
このBase64画像エンコーダーを使う理由
このツールはブラウザ上で直接、すぐに使えるデータURIに画像を変換します——アップロード不要、サーバー不要、アカウント不要です。
⚡
即時変換
画像をドラッグ＆ドロップするかファイルを選択すると、完全なデータURIが即座に表示されます。サーバー処理を待つ必要はありません——FileReader APIがすべてをローカルで処理します。
🔒
プライバシー優先の処理
画像がデバイス外に送信されることはありません。エンコードは、ブラウザのネイティブなFileReader.readAsDataURL()メソッドを使用して完全にブラウザ内で実行されます。いかなるサーバーにもデータは送信されません。
🌐
主要なフォーマットをすべてサポート
PNG、JPEG、SVG、WebP、GIF、ICO、BMP、その他ブラウザがサポートする画像フォーマットに対応しています。MIMEタイプはファイルから自動的に検出されます。
📦
すぐにコピーできる出力
出力は完全なデータURI文字列です——HTMLのimg src、CSSのurl()宣言、またはJSONペイロードに、手動でフォーマットすることなく直接貼り付けられます。
Base64画像エンコードのユースケース
フロントエンド開発
小さなアイコンやUIアセットをHTMLまたはCSSに直接埋め込んでHTTPリクエストを排除します。これにより、ファーストビューの重要な画像のウォーターフォールレイテンシが低減され、Largest Contentful Paint（LCP）スコアが向上します。
HTMLメールテンプレート
多くのメールクライアントはデフォルトで外部画像をブロックします。Base64インライン画像は、受信者が「画像を読み込む」をクリックしなくても即座に表示され、開封率と視覚的な一貫性が向上します。
シングルページアプリケーション
小さなアセットをデータURIとしてJavaScriptやCSSにバンドルして、総ネットワークリクエスト数を削減します。WebpackとViteはどちらも、設定可能なサイズしきい値以下のアセットに対してBase64の自動インライン化をサポートしています。
APIとJSONペイロード
ユーザーのアバター、署名、またはサムネイルをBase64文字列としてエンコードし、JSON APIレスポンスに直接含めます。小さな画像のために個別のファイルホスティングエンドポイントを用意する必要がなくなります。
ドキュメントとMarkdown
図やスクリーンショットをデータURIとしてMarkdownファイルやREADMEドキュメントに埋め込みます。画像はドキュメントとともに配布され、外部ホスティングなしで正しく表示されます。
テストとプロトタイピング
テストフィクスチャー、Storybookストーリー、またはプロトタイプのHTMLファイルで、プレースホルダー画像としてBase64データURIを使用します。開発初期に静的ファイルサーバーをセットアップしたり画像アセットを管理したりする必要がありません。
データURIの構造
データURIは画像フォーマットとバイナリコンテンツを1つの文字列にエンコードします。プログラムでデータURIを構築・解析する際に、その構造を理解しておくと役立ちます：
| コンポーネント | 説明 |
|---|---|
| data: | URI scheme identifier |
| image/png | MIME type of the image |
| ;base64, | Encoding declaration |
| iVBORw0KGgo... | Base64-encoded binary data |
Base64エンコード向け画像フォーマット比較
画像フォーマットの選択は、Base64出力サイズ、ブラウザサポート、レンダリング特性に影響します。コンテンツの種類に最も適したフォーマットを使用してください：
| フォーマット | MIMEタイプ | 透過 | 最適な用途 |
|---|---|---|---|
| PNG | image/png | Yes | Screenshots, icons, UI elements |
| JPEG | image/jpeg | No | Photos, gradients, large images |
| SVG | image/svg+xml | Yes | Logos, icons, scalable graphics |
| WebP | image/webp | Yes | Modern web images, smaller files |
| GIF | image/gif | Yes (1-bit) | Simple animations, small icons |
| ICO | image/x-icon | Yes | Favicons |
コード例
主要な言語・環境で画像をBase64データURIに変換する方法：
JavaScript (browser)
// Convert a File object to a Base64 data URI
function fileToDataUri(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(file)
// reader.result → "data:image/png;base64,iVBORw0KGgo..."
})
}
// Convert a canvas element to a data URI
const dataUri = canvas.toDataURL('image/png')
// → "data:image/png;base64,iVBORw0KGgo..."
// Convert with quality parameter (JPEG/WebP only)
const jpegUri = canvas.toDataURL('image/jpeg', 0.8)
// → "data:image/jpeg;base64,/9j/4AAQ..."Python
import base64
# Read an image file and encode it to a data URI
with open('logo.png', 'rb') as f:
encoded = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:image/png;base64,{encoded}'
# → "data:image/png;base64,iVBORw0KGgo..."
# Detect MIME type automatically
import mimetypes
mime, _ = mimetypes.guess_type('photo.jpg')
# mime → "image/jpeg"
with open('photo.jpg', 'rb') as f:
b64 = base64.b64encode(f.read()).decode('ascii')
data_uri = f'data:{mime};base64,{b64}'Node.js
import { readFileSync } from 'fs'
import { lookup } from 'mime-types'
// Read file and encode to data URI
const buffer = readFileSync('icon.png')
const base64 = buffer.toString('base64')
const mime = lookup('icon.png') // → "image/png"
const dataUri = `data:${mime};base64,${base64}`
// → "data:image/png;base64,iVBORw0KGgo..."
// From a Buffer received via HTTP/API
function bufferToDataUri(buf, mimeType) {
return `data:${mimeType};base64,${buf.toString('base64')}`
}CLI (bash)
# Encode an image to Base64 (macOS) base64 -i logo.png | tr -d '\n' # Encode an image to a full data URI (Linux) echo -n "data:image/png;base64,$(base64 -w 0 logo.png)" # Encode and copy to clipboard (macOS) echo -n "data:image/png;base64,$(base64 -i logo.png | tr -d '\n')" | pbcopy # Detect MIME type and encode (Linux, requires file command) MIME=$(file -b --mime-type image.webp) echo -n "data:$MIME;base64,$(base64 -w 0 image.webp)"
よくある質問
Base64エンコードで扱える画像の最大サイズは？
Base64仕様自体にハードリミットはありません。ブラウザのデータURIサポートはさまざまで、ほとんどのモダンブラウザは数メガバイトまでのデータURIを処理できます。ただし、Base64エンコードはサイズを33%増加させるため、1MBの画像は約1.33MBのテキストになります。10〜20KB以上の画像は、適切なキャッシュ設定を持つ別ファイルとして配信する方が効率的です。
Base64エンコードで画像の品質は低下しますか？
いいえ。Base64はロスレスエンコードです——コンテンツを変更せずにバイナリデータをテキストに変換します。デコードされたデータは元のファイルとバイト単位で同一です。品質劣化が生じるとすれば、Base64エンコードではなく、画像フォーマット自体（例：JPEG圧縮）によるものです。
Base64エンコード後の出力が元の画像より大きいのはなぜですか？
Base64はバイナリデータの3バイトを4つのASCII文字で表現するため、サイズが33%増加します。データURIにはさらにプレフィックス（例：data:image/png;base64,）が約25〜30文字加わります。小さな画像（2〜5KB未満）ではこのオーバーヘッドはHTTPリクエストの削減で相殺されます。大きな画像では、サイズのペナルティにより外部ファイルの方が効率的です。
CSSのbackground-imageでBase64画像を使用できますか？
はい。url()関数の値としてデータURIを使用してください：background-image: url('data:image/png;base64,...')。これはすべてのモダンブラウザで動作します。HTTPリクエストを回避することでわずかに大きくなるCSSファイルを許容できる、小さくてよく使われる背景パターンやアイコンに最も効果的です。
機密画像のBase64エンコードは安全ですか？
Base64はエンコードであり、暗号化ではありません。データURIを見た人は誰でも元の画像にデコードし直すことができます。機密画像の保護にBase64を頼らないでください。このツールは画像を完全にブラウザ内で処理します——データはサーバーに送信されません——しかし結果のデータURIはHTMLやCSSのソースにアクセスできる誰もが読めるプレーンテキストです。
Base64データURIを画像ファイルに戻すには？
JavaScriptでは、データURIを使ってfetch()を呼び出し、レスポンスにblob()を呼び出してからダウンロードリンクを作成します。Pythonでは、文字列をカンマで分割し、Base64部分をbase64.b64decode()でデコードして、バイト列をファイルに書き出します。このサイトのBase64画像デコーダーツールを使うこともできます。
ウェブサイトのすべての画像をBase64エンコードすべきですか？
いいえ。Base64インライン化は、HTTPリクエストのオーバーヘッドが33%のサイズペナルティを上回る小さな画像（アイコン、ロゴ、1x1ピクセル）に適しています。大きな画像は適切なキャッシュヘッダーを持つ別ファイルを使用してください——ブラウザが独立してキャッシュし並列で読み込めます。一般的な目安は2〜8KBです：このサイズ未満の画像はインライン化が有効ですが、それ以上の画像は外部ファイルとして配信すべきです。