【ホームページ作成】HTMLファイルそのものの中に画像を埋め込む

HTMLファイルそのものに画像を埋め込む

HTMLは、テキストエディタを用いて編集できる「テキストファイル」です。 ですから当然、中に含むことができるデータは「テキストデータ」（文字列）だけです。

しかし、（本来バイナリデータである）画像をテキストデータに変換することで、HTMLファイル内（＝HTMLソース内）に直接画像を埋め込んで表示させることができます。

表示例

以下の枠内に画像が見えるでしょうか。
ここに掲載している画像は、外部の画像ファイルを表示させているのではなく、このHTMLファイル内（HTMLソース内）に直接埋め込んでいるものです。

▲HTMLファイルそのものに直接埋め込んだ画像

残念ながら、Internet Explorerではこの記述方法に対応していないため見えません。 しかし、Firefox、Opera、Safari、Chromeでは画像が見えます。
※IE7、Firefox3、Opera9、Safari3、Chrome0.2で確認。

Base64で画像をエンコードする

画像などのバイナリデータをテキストデータに変換する技術の一つに、「Base64」というエンコード（変換）方法があります。 メールにファイルを添付する際にも用いられている方法です。 この「Base64」を使って画像をテキストデータに変換すると、（テキストデータなので）HTMLソース中にも記述することができます。

この「Base64でテキストデータに変換した画像」を、ある決まった形式でHTMLソース内に記述すれば、それを画像として表示させることができます。 つまり、HTMLファイルそのものの中に画像を埋め込むことができるわけです。

今回は、上記のようにHTMLファイルそのものの中に画像を埋め込んで表示させる方法をご紹介いたします。