HOME
HTML と CSS を始められる方を対象とした HTML/CSS 入門です。HTML/CSS における記述方法をサンプルコードと一緒に学習します。
base64 のデータで画像ファイルを表示するには、img
要素の中に記述します。src
属性の値には data:
部と base64,
部があります。data:
部にはメディアタイプを指定し、base64,
部にはデータを指定します。
<!DOCTYPE html>
<html lang="ja">
...
<img src="data:image/png;base64,aVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQUFFQUFBQUJBUU1BQUFBbDIxYktBQUFBQTFCTVZFWC8vLytueEJ2SUFBQUFDa2xFUVZRSTEyTmdBQUFBQWdBQjRpRzhNd0FBQUFCSlJVNUVya0pnZ2c9PQ==">
...
</html>
コンピュータで扱うことができるファイルは、テキストデータかバイナリデータの2種類に分類できます。テキストデータは、テキストエディタなどで開くことができる文字が記されたデータです。一方でバイナリデータは、文字以外で記されたデータであり、ファイルを開くためには専用のアプリケーションが必要になります。例えば、画像ファイルのほとんどはバイナリデータになります。
base64 は、このようなバイナリデータを文字列に変換するためのフォーマットの一種です。バイナリデータを base64 形式に変換することをエンコード、base64 形式からバイナリデータに戻すことをデコードと言います。画像データを base64 形式にするためには、Web サービスを利用すると良いでしょう。