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

img要素のsrc属性値に記述

HTMLで画像を表示させるには、img要素を使います。今回の方法でHTMLソース内に画像を直接埋め込む場合も同様に、img要素を使って記述します。

通常であれば、src属性の値に画像ファイルのURLを記述しますが、 ここでは、src属性の値に下記のように記述します。

<img src="data:形式名;base64,変換したデータ" width="横" height="縦" alt="代替文字">

「変換したデータ」の部分には、Base64でエンコードした文字列をそのまま全部記述します。（途中に改行が含まれても構いません）

「形式名」の部分には、
GIF画像であれば、「 image/gif 」
PNG画像であれば、「 image/png 」
JPEG画像であれば、「 image/jpeg 」と記述します。

冒頭の画像の場合は、以下のソースになります。

<img src="data:image/gif;base64,R0lGODlhyABkAOYAAG5qSb+gbLeHRv351JGRi～省略～ISANL4H8M2IANmAdLYIAL6IAUyH+BAAA7" width="145" height="52" alt="">

※長すぎて記事中にはソース全体を掲載できないため、上記では途中を省略しています。ソースをコピー＆ペーストして使ってみたい場合は、 今回のソース置き場 にありますので、そちらからコピーして下さい。

上記のソースを表示させると、以下のように見えます。

※残念ながらInternet Explorerでは見えませんが、Firefox、Opera、Safari、Chromeでは見えます。

おわりに

今回は、HTMLファイル（HTMLソース）そのものの中に画像を埋め込んで表示させる方法をご紹介いたしました。

Internet Explorerでは使えませんし、そもそもHTMLファイルに大きな画像を埋め込む意味もあまりありませんから、活用する機会はないかも知れませんが……。 画像付きのHTMLファイルを配布する際、配布ファイルが1ファイルで済むメリットはあるかもしれません。 また、小さな画像をたくさん使っているページの場合、外部ファイルをたくさん読みに行かなくて済むことがメリットになるかもしれません。
気が向いたら試してみて下さい。