Base64エンコードのメリットとデメリット

2024-04-02

HTML、Base64、ブラウザにおける埋め込み Base64 画像

HTMLファイルに直接画像データを埋め込む方法として、Base64エンコードされた画像データを使用する方法があります。これは、小さな画像やアイコンなど、ファイルサイズを小さくしたい場合に有効な手法です。

Base64エンコードは、バイナリデータをテキストに変換する方法です。画像データのようなバイナリデータをBase64エンコードすると、文字列に変換されます。この文字列をHTMLファイルに埋め込むことで、画像を表示することができます。

メリット

ファイルサイズを小さくできる
画像リクエストを減らせる
画像の劣化を防げる

処理速度が遅くなる場合がある
コードが複雑になる

ブラウザの対応

Base64エンコードされた画像データは、すべてのブラウザでサポートされています。

埋め込み方法

Base64エンコードされた画像データをHTMLファイルに埋め込むには、img要素のsrc属性にdata URIを使用します。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 image">

上記の例では、PNG画像データをBase64エンコードしてdata URIに埋め込んでいます。

注意点

画像データの種類とBase64エンコードされたデータの間に、;base64という文字列が必要です。
画像データの種類を正しく指定する必要があります。

応用例

小さなアイコン
ロゴ
ファビコン
データグラフ

Base64エンコードされた画像データを埋め込む方法は、さまざまな方法で利用できます。上記以外にも、CSS背景画像やSVG画像などにも使用することができます。

Base64エンコードされた画像データを大量に使用すると、ページの読み込み速度が遅くなる可能性があります。そのため、使用量には注意が必要です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Base64 画像</title>
</head>
<body>
    <h1>Base64 画像</h1>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 image">
</body>
</html>

このコードを実行すると、ブラウザに以下のような画像が表示されます。

コード解説

<!DOCTYPE html>: HTML文書であることを宣言します。
<html lang="ja">: HTML文書の言語を日本語に設定します。
<head>: HTML文書のヘッダー部分です。
<meta charset="UTF-8">: 文字コードをUTF-8に設定します。
<title>Base64 画像</title>: HTML文書のタイトルを設定します。
<h1>Base64 画像</h1>: 見出し1を表示します。
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Base64 image">: Base64エンコードされた画像データを埋め込んだ画像を表示します。

画像データ

上記のサンプルコードでは、以下のPNG画像データをBase64エンコードしています。

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==

この画像は、100px × 100pxの緑色の四角形です。

注意

HTMLファイルに画像を埋め込む他の方法

相対パスまたは絶対パスを使用する

画像ファイルがHTMLファイルと同じフォルダにある場合は、相対パスを使用できます。画像ファイルが別のフォルダにある場合は、絶対パスを使用する必要があります。

<img src="image.png" alt="Image">

<img>要素のsrcset属性を使用する

srcset属性は、異なる解像度の画像ファイルを指定することができます。ブラウザは、ユーザーの画面解像度に最適な画像ファイルを選択します。

<img src="image.png" srcset="image-2x.png 2x" alt="Image">

<picture>要素は、異なるメディアクエリに応じて異なる画像ファイルを指定することができます。

<picture>
  <source srcset="image-small.png" media="(max-width: 480px)">
  <source srcset="image-large.png" media="(min-width: 481px)">
  <img src="image.png" alt="Image">
</picture>

SVG画像を使用する

SVG画像は、XMLに基づいて記述されたベクター画像です。SVG画像は、拡大しても劣化しないというメリットがあります。

<img src="image.svg" alt="Image">

画像を背景画像として使用することもできます。

<div style="background-image: url('image.png');">
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</div>

どの方法を使用するかは、目的に応じて選択する必要があります。

それぞれの方法のメリットとデメリット

方法	メリット	デメリット
Base64エンコード	ファイルサイズを小さくできる	処理速度が遅くなる場合がある
相対パスまたは絶対パス	簡単	画像ファイルの場所が変更されると、リンクが壊れる可能性がある
`srcset`属性	異なる解像度の画像ファイルを指定できる	コードが複雑になる
`<picture>`要素	異なるメディアクエリに応じて異なる画像ファイルを指定できる	コードが複雑になる
SVG画像	拡大しても劣化しない	ファイルサイズが大きくなる場合がある
CSS背景画像	レイアウトが自由	画像ファイルの場所が変更されると、リンクが壊れる可能性がある