Image to Base64 - 画像のBase64エンコードとData URIの使い方

アイコン1つのためにHTTPリクエストを増やしたくない、単一HTMLファイルに画像を同梱したい―― そんなときに使うのが image to base64 変換です。画像ファイルをBase64文字列に エンコードし、data:image/png;base64,... という Data URI 形式にすれば、 別ファイルを用意せずHTML・CSS・JSONに直接埋め込めます。この記事ではData URIの仕組み、 埋め込み例、サイズが増えるデメリット、使うべき場面・避けるべき場面を整理します。

Converting an image to Base64 turns the binary file into a text string you can inline directly in HTML, CSS, or JSON as a data URI (data:image/png;base64,...), eliminating a separate HTTP request. This guide covers the data URI format, embedding examples, the roughly 33% size increase, and when inlining is (and isn't) the right call.

TL;DR

• Base64エンコードした画像は data:[mime-type];base64,[data] の形式で埋め込む
• サイズは元のバイナリより約33%増加する(3バイト→4文字のBase64の宿命)
• アイコン・ロゴなど10KB以下の小さい画像はHTTPリクエスト削減で有利
• 大きい写真やキャッシュを効かせたい画像は通常のファイル参照+CDN配信が適切
• Gmail等一部のメールクライアントはData URI画像を表示しないため、メールには非推奨

1. Data URIとは / What is a data URI

Data URIは、ファイルの中身をURLの中にテキストとして直接埋め込む仕組みです。書式はdata:[mime-type];base64,[encoded-data] で、mime-typeには 画像の種類、encoded-dataにはBase64エンコードされたバイナリが入ります。

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...

  data:          → スキーム
  image/png      → MIMEタイプ(画像形式)
  base64         → エンコード方式
  iVBORw0K...    → Base64エンコードされた画像データ本体

主な画像形式のMIMEタイプは次のとおりです。

2. 画像をBase64に変換する方法 / How to convert

オンラインツール

最も手軽なのはブラウザ完結型ツールを使う方法です。ファイルを選択するだけで、アップロードなしで その場でData URIが生成されます(下のCTAから利用できます)。

コマンドライン

# macOS / Linux
base64 -i photo.png -o photo_base64.txt
# または改行なしで直接出力
base64 -w 0 photo.png   # -w 0 は改行なし(GNU coreutils)

# Windows (PowerShell)
[Convert]::ToBase64String([IO.File]::ReadAllBytes("photo.png")) | Out-File photo_base64.txt

# Windows (certutil)
certutil -encode photo.png photo_base64.txt

JavaScript(ブラウザ)

// <input type="file"> から選択したファイルをData URI化
function fileToDataUri(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result); // "data:image/png;base64,..."
    reader.readAsDataURL(file);
  });
}

Node.js

const fs = require("fs");
const buf = fs.readFileSync("photo.png");
const dataUri = `data:image/png;base64,${buf.toString("base64")}`;

Python

import base64
with open("photo.png", "rb") as f:
    encoded = base64.b64encode(f.read()).decode("ascii")
data_uri = f"data:image/png;base64,{encoded}"

3. サイズ増加とパフォーマンスへの影響 / Size overhead

Base64は3バイトのバイナリを4文字のASCII文字で表現するため、理論上は約1.333倍(33%増)にサイズが膨らみます。改行やパディングを含めるとさらにわずかに増えることもあります。

さらに、Data URIとして埋め込んだ画像はHTML/CSS自体の一部になるため、画像だけを個別にキャッシュしたり並列ダウンロードしたりできません。 ページ全体を再取得するたびに画像データも再送信されるため、更新頻度の高いページや 大きな画像には不向きです。

Base64 inflates size by roughly 33% because it maps 3 bytes to 4 ASCII characters. Inlined images also lose independent HTTP caching and parallel download, since they become part of the surrounding HTML/CSS payload — a real cost for anything beyond small, static assets.

4. メリット・デメリット / Trade-offs

5. 実務での使いどころ / Practical use cases

• CSSのアイコン埋め込み: background-image: url("data:image/svg+xml;base64,...") で小さいアイコンをCSSファイル内に完結させる
• 単一HTMLツール: サーバー不要のオフラインツールやレポートに画像を同梱する
• JSON APIでの小サムネイル返却: 別エンドポイントを増やさずBase64文字列としてサムネイルを返す
• SVGの埋め込み: SVGはテキスト形式のため、Base64よりURLエンコード(data:image/svg+xml;utf8,...)の方がサイズが小さくなることが多い

逆に、ヒーロー画像やギャラリーのような大きな写真、頻繁に差し替える画像、CDNでのキャッシュ効果を 期待したい画像は、Base64埋め込みではなく通常のファイル参照にすべきです。大きな画像を扱う前にImage Compressorで圧縮しておくのも有効です。

まとめ / Summary

image to base64変換は「バイナリをテキスト化してData URIとして埋め込む」だけの仕組みですが、 約33%のサイズ増加とキャッシュの効かなさというトレードオフを理解した上で、アイコンや小さいロゴなど10KB以下の画像に限定して使うのが実務での鉄則です。

Image-to-Base64 conversion embeds binary image data as a text string inside a data URI, so it can live directly in HTML, CSS, or JSON without a separate file request. The trade-off is a roughly 33% size increase and the loss of independent HTTP caching, which is why the practical rule is to reserve inlining for small assets (icons, logos, under ~10KB) and use regular file references — ideally via a CDN — for anything larger.

関連ツール / Related tools

• Image to Base64 — 画像→Data URI変換
• Base64 Encoder / Decoder
• Image Compressor — 埋め込み前の圧縮に

関連ガイド / Related guides

• Base64デコードの文字化け / Garbled Base64 output
• Hex Translator — 16進数⇔テキスト変換
• OG画像の最適サイズとmeta設定