HTML & CSS - base64 のデータで画像ファイルを表示する

base64 のデータで画像ファイルを表示する

base64 のデータで画像ファイルを表示するには、img 要素の中に記述します。src 属性の値には data: 部と base64, 部があります。data: 部にはメディアタイプを指定し、base64, 部にはデータを指定します。

<!DOCTYPE html>
<html lang="ja">
  ...
  <img src="data:image/png;base64,aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUFFQUFBQUJBUU1BQUFBbDIxYktBQUFBQTFCTVZFWC8vLytueEJ2SUFBQUFDa2xFUVZRSTEyTmdBQUFBQWdBQjRpRzhNd0FBQUFCSlJVNUVya0pnZ2c9PQ==">
  ...
</html>
base64 のデータで画像ファイルを表示する - HTML

コンピュータで扱うことができるファイルは、テキストデータバイナリデータの2種類に分類できます。テキストデータは、テキストエディタなどで開くことができる文字が記されたデータです。一方でバイナリデータは、文字以外で記されたデータであり、ファイルを開くためには専用のアプリケーションが必要になります。例えば、画像ファイルのほとんどはバイナリデータになります。

base64 は、このようなバイナリデータを文字列に変換するためのフォーマットの一種です。バイナリデータを base64 形式に変換することをエンコード、base64 形式からバイナリデータに戻すことをデコードと言います。画像データを base64 形式にするためには、Web サービスを利用すると良いでしょう。

関連記事