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
コンピュータで扱うことができるファイルは、テキストデータかバイナリデータの２種類に分類できます。テキストデータは、テキストエディタなどで開くことができる文字が記されたデータです。一方でバイナリデータは、文字以外で記されたデータであり、ファイルを開くためには専用のアプリケーションが必要になります。例えば、画像ファイルのほとんどはバイナリデータになります。
base64 は、このようなバイナリデータを文字列に変換するためのフォーマットの一種です。バイナリデータを base64 形式に変換することをエンコード、base64 形式からバイナリデータに戻すことをデコードと言います。画像データを base64 形式にするためには、Web サービスを利用すると良いでしょう。