画像・ファイルをBase64に変換する使い道と注意点

画像やPDFなどのファイルをBase64に変換すると、バイナリデータをテキストとして扱えるようになります。HTMLやCSSに小さな画像を埋め込んだり、APIでファイル内容を送信したりするときに使われることがあります。

ただし、Base64に変換すれば何でも便利になるわけではありません。ファイルサイズが増えたり、HTMLやJSONが読みにくくなったりするため、使う場面を選ぶことが大切です。

画像やファイルをBase64に変換するとは

通常、画像やPDFなどのファイルはバイナリデータとして扱われます。そのままではHTML、CSS、JSON、ログなどのテキスト中心の形式に直接書き込みにくい場合があります。

Base64に変換すると、ファイルの中身を英数字と一部の記号で表せるようになります。

iVBORw0KGgoAAAANSUhEUgAA...

この文字列だけを見ると意味は分かりにくいですが、デコードすると元の画像データに戻せます。Base64はファイルを圧縮するものでも、暗号化するものでもありません。あくまで、バイナリデータをテキストとして扱いやすくするための表現方法です。

Data URLとは何か

画像をBase64に変換したときによく使われる形式が、Data URLです。Data URLは、ファイルの種類とBase64データを1つの文字列として表す書き方です。

PNG画像の例

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

JPEG画像の例

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...

Base64としてデコードしたい場合、必要なのは基本的にカンマ以降の部分です。一方、HTMLやCSSに画像として埋め込む場合は、data:image/png;base64, を含めたData URL全体を使います。

HTMLでBase64画像を表示する例

小さな画像であれば、HTMLの img タグにData URLを直接書いて表示できます。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Base64画像">

この方法を使うと、外部画像ファイルを別に読み込まなくても、HTML内だけで画像を表示できます。

CSSでBase64画像を使う例

CSSの背景画像としてBase64を使うこともできます。

.icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0...");
  background-repeat: no-repeat;
  background-size: contain;
}

小さなアイコンや装飾画像であれば、CSSに埋め込むことでリクエスト数を減らせる場合があります。

ただし、最近はHTTP/2やHTTP/3の普及により、画像を何でもBase64化してリクエスト数を減らすメリットは以前ほど大きくありません。大きな画像をCSSに埋め込むと、CSSファイル自体が重くなり、更新やキャッシュの管理もしにくくなります。

APIやJSONでファイルを送る場合

APIで画像やPDFなどのファイル内容を送るときに、Base64が使われることがあります。たとえば、JSONの中に画像データを入れる場合、次のような形になります。

{
  "fileName": "sample.png",
  "mimeType": "image/png",
  "contentBase64": "iVBORw0KGgoAAAANSUhEUgAA..."
}

この形式では、ファイルの中身をテキストとしてJSONに含められます。アップロード用API、メール添付、外部サービス連携などで使われることがあります。

ただし、ファイルサイズが大きい場合は、Base64をJSONに直接入れるより、通常のファイルアップロードやストレージURLを使った方が扱いやすいこともあります。

Base64にするとファイルサイズは増える

Base64に変換すると、元のバイナリデータよりサイズが大きくなります。目安として、Base64化後のデータは元の約1.33倍程度になります。

このため、Base64はファイルサイズを小さくする方法ではありません。画像を軽くしたい場合は、圧縮、リサイズ、WebP化などを検討する必要があります。

使うべき場面・避けた方がよい場面

Base64が向いている場面と、向いていない場面を分けて考えると判断しやすくなります。

小さなアイコンや一時的な確認には便利ですが、大きな画像を大量にHTMLへ埋め込む用途には向きません。Webサイトで通常の画像として使う場合は、画像ファイルを配置してURLで読み込む方が管理しやすいです。

画像Base64とSEOの注意点

Base64画像は、HTML内に直接埋め込めるため便利ですが、SEOや運用面では注意が必要です。

通常の画像ファイルであれば、画像URLを持ち、ブラウザキャッシュや画像検索、ファイル単位の最適化を行いやすくなります。一方、Base64画像はHTMLやCSSの一部として扱われるため、画像だけを差し替えたり、画像ファイルとして個別に管理したりしにくくなります。

特に、記事のメイン画像、商品画像、説明用の重要な画像などは、Base64で埋め込むよりも通常の画像ファイルとして配置する方が無難です。

ツールで確認する方法

Base64エンコード・デコード変換ツールを使うと、文字列やファイルをBase64に変換して確認できます。

1. 画像やファイルを選択します。
2. Base64文字列、またはData URL形式の結果を確認します。
3. HTMLやCSSに使う場合は、MIMEタイプを含むData URL形式か確認します。
4. デコードして元のファイルに戻せるか確認します。
5. ファイルサイズが大きすぎないか確認します。

機密性の高いファイルを扱う場合は、入力内容が外部サーバーへ送信されないツールを選ぶことが大切です。ブラウザ内で処理されるツールであれば、簡単な確認や変換に使いやすくなります。

よくある質問

関連ツール・ガイド