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

2024-04-02

HTMLでBase64画像を表示する方法

Base64エンコードは、バイナリデータをASCII文字列に変換する手法です。画像データをBase64エンコードすることで、HTMLファイル内に直接画像データを埋め込むことが可能になります。

Base64画像を表示するメリット

画像ファイルの読み込み速度が向上する
画像ファイルの管理が簡略化される
画像ファイルの盗難を防ぐことができる

HTMLファイルの容量が大きくなる
画像の編集が困難になる

画像ファイルをBase64エンコードする
HTMLファイルにBase64エンコードされた画像データを記述する

Base64画像ファイルをエンコードする

Base64エンコードを行う方法はいくつかありますが、ここではオンラインツールを利用する方法をご紹介します。

エンコードしたい画像ファイルをアップロードします。
エンコードされた文字列が表示されますので、コピーします。

<img src="data:image/png;base64,エンコードされた文字列">

data:image/png;base64 は、画像データの種類とエンコード方式を指定します。
エンコードされた文字列 は、Base64エンコードされた画像データです。

例

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAADOpq50AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAAYdEVYdFNvZnR3YXJlAE1hY3Jpb24gYnkgU1ZHIFRlY3Jpb25zLCBpbmtwOi8vd3d3LnNvdXJjZWZvcmUub3JnAAAAA6ABAAMAAQAAABAAABVY6+QAAAABJRU5ErkJggg==">

このコードは、以下のような画像を表示します。

注意点

Base64エンコードされた画像データは非常に長くなります。そのため、HTMLファイルの容量が大きくなる可能性があります。
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,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAADOpq50AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAAYdEVYdFNvZnR3YXJlAE1hY3Jpb24gYnkgU1ZHIFRlY3Jpb25zLCBpbmtwOi8vd3d3LnNvdXJjZWZvcmUub3JnAAAAA6ABAAMAAQAAABAAABVY6+QAAAABJRU5ErkJggg==">
</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,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAADOpq50AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAAYdEVYdFNvZnR3YXJlAE1hY3Jpb24gYnkgU1ZHIFRlY3Jpb25zLCBpbmtwOi8vd3d3LnNvdXJjZWZvcmUub3JnAAAAA6ABAAMAAQAAABAAABVY6+QAAAABJRU5ErkJggg==">: Base64エンコードされた画像データを埋め込んだ画像を表示します。

Base64エンコードされた画像データは、CSSファイルやJavaScriptファイルにも埋め込むことができます。

CSSファイル

background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAADOpq50AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAAYdEVYdFNvZnR3YXJlAE1hY3Jpb24gYnkgU1ZHIFRlY3Jpb25zLCBpbmtwOi8vd3d3LnNvdXJjZWZvcmUub3JnAAAAA6ABAAMAAQAAABAAABVY6+QAAAABJRU5ErkJggg==");

JavaScriptファイル

var image = new Image();
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAADOpq50AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAAYdEVYdFNvZnR3YXJlAE1hY3Jpb2

HTMLでBase64画像を表示する他の方法

画像ファイルを直接参照する方法

コード例

<img src="image.png">

解説

img 要素の src 属性に、画像ファイルのパスを指定します。
画像ファイルは、HTMLファイルと同じディレクトリに存在する必要があります。

メリット

シンプルでわかりやすい
画像ファイルの編集が容易

SVG画像を使用する方法

<svg viewBox="0 0 100 100">
  <rect x="0" y="0" width="100" height="100" fill="red" />
</svg>

svg 要素を使用して、SVG画像を直接記述することができます。
SVG画像はベクター形式なので、拡大しても劣化しません。

拡大しても劣化しない

複雑な画像を作成するには、専門知識が必要

画像データをDataURL形式で埋め込む方法

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAADOpq50AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAAYdEVYdFNvZnR3YXJlAE1hY3Jpb24gYnkgU1ZHIFRlY3Jpb25zLCBpbmtwOi8vd3d3LnNvdXJjZWZvcmUub3JnAAAAA6ABAAMAAQAAABAAABVY6+QAAAABJRU5ErkJggg==">