Base64で画像をマークアップするとは？
「Base64で画像をマークアップする」とは、画像ファイルそのものをBase64という文字列に変換し、HTMLやCSSの中へ直接埋め込んで使うことを指します。
通常、Webページ上の画像は、外部ファイルとして配置された画像を読み込む形で表示します。たとえば、HTMLでは以下のように記述します。
<img src="/images/logo.png" alt="ロゴ">この書き方では、logo.png という画像ファイルを別途読み込みます。
これに対して、Base64で画像を埋め込む場合は、次のような形になります。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="ロゴ">この data:image/png;base64, から始まる記述は、Data URL と呼ばれるものです。画像ファイルの内容を文字列化し、そのまま src 属性の中へ入れています。
どのような状態になっているのか
Base64で画像をマークアップしている状態を、わかりやすく言えば次のようになります。
- 画像が別ファイルとして読み込まれているのではない
- 画像データそのものが文字列としてHTMLやCSSの中に埋め込まれている
- ブラウザは、その文字列を画像として解釈して表示している
つまり、画像が「ファイル」ではなく、「コードの一部」になっている状態です。
通常の画像指定との違い
通常の画像指定では、画像は外部ファイルとして管理されます。
<img src="/images/sample.jpg" alt="サンプル画像">これに対して、Base64で埋め込む場合は、画像ファイルの代わりに文字列そのものを指定します。
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..." alt="サンプル画像">つまり、画像への「パス」を書くのではなく、画像の「中身」を直接書いている点が大きな違いです。
CSSでも利用できる
Base64化した画像は、HTMLの <img> タグだけでなく、CSSの背景画像として使うこともできます。
.box {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...");
}このように記述すると、背景画像も外部ファイルを参照せずに表示できます。
メリット
- 画像ファイルを別途読み込む必要がない
- 小さなアイコンなどは、HTMLやCSSだけで完結しやすい
- 外部リクエストを減らせる場合がある
- 単一ファイルで完結するサンプルやデモを作りやすい
デメリット
- HTMLやCSSの記述が非常に長くなりやすい
- 画像の差し替えや管理がしにくくなる
- キャッシュの効率が悪くなる場合がある
- Base64化すると、元の画像データよりサイズが少し大きくなる
そのため、大きな画像や写真を大量にBase64化して埋め込む方法は、一般的にはあまり向いていません。
どのような場面で使われるか
- ごく小さなアイコンを表示したいとき
- 外部ファイルをできるだけ減らしたいとき
- HTMLメールで画像を埋め込みたいとき
- 1つのHTMLファイルだけで完結するデモページを作りたいとき
まとめ
Base64で画像をマークアップするとは、画像ファイルをBase64文字列に変換し、HTMLやCSSの中へ直接埋め込んで使うことです。
この方法を使うと、画像を別ファイルとして読み込まずに表示できますが、そのぶんコードが長くなり、管理しにくくなる面もあります。
小さなアイコンや簡易なデモでは便利ですが、大きな画像まで多用すると扱いづらくなるため、用途に応じて使い分けることが大切です。
