画像をBase64に変換する方法・HTMLへのインライン埋め込み

画像をBase64エンコードしてHTMLやCSSに直接埋め込む方法は、小さなアイコンやロゴの表示に便利です。HTTPリクエストを削減し、ページの初期表示速度を改善できる場合があります。この記事では、画像のBase64変換の仕組み、使いどころ、具体的な実装方法を解説します。

画像のBase64変換とは

Base64は、バイナリデータ（画像ファイルなど）をASCII文字列に変換するエンコーディング方式です。画像をBase64に変換すると、A-Z、a-z、0-9、+、/の64種類の文字で構成されたテキスト文字列になります。この文字列をHTMLやCSSに直接埋め込むことで、外部ファイルを参照せずに画像を表示できます。

# Base64エンコードされた画像の例（一部省略）
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAB
CAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=

メリット・デメリット

Data URIの構文

Base64エンコードした画像をHTMLやCSSで使うには、Data URI（データURI）スキームを使います。構文は以下のとおりです。

data:[MIMEタイプ];base64,[Base64エンコード文字列]

# 例: PNG画像
data:image/png;base64,iVBORw0KGgo...

# 例: JPEG画像
data:image/jpeg;base64,/9j/4AAQSk...

# 例: SVG画像
data:image/svg+xml;base64,PHN2ZyB4...

いつ使うべきか

HTMLでの使い方

<!-- HTML imgタグでの使用 -->
<img src="data:image/png;base64,iVBORw0KGgo..."
     alt="アイコン" width="16" height="16">

<!-- CSS背景画像としての使用 -->
<style>
.icon {
  background-image: url('data:image/png;base64,iVBORw0KGgo...');
  background-size: contain;
  width: 24px;
  height: 24px;
}
</style>

<!-- JavaScriptでの動的変換 -->
<script>
function imageToBase64(file) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(file);
  });
}
</script>

サイズの目安

よくある質問