3/3 HTMLファイルの中に画像を埋め込んで表示させる方法 [ホームページ作成] All About

HTMLソース内に画像を埋め込む書式：img要素のsrc属性値に記述

ウェブページ上で画像を表示するためには、HTMLソースにimg要素を記述します。この点は、画像ファイルを指定する場合でも、Base64でエンコードした画像を埋め込む場合でも同じです。ただ、src属性値の書き方だけが異なります。比較しやすいように、両者の記述方法を以下に記します。

■画像ファイルを読み込む場合の記述：
src属性の値には、画像ファイルのURLを記述します。

<img src="image.png" width="200" height="100" alt="イヌとネズミ">

■HTML内に画像を埋め込む場合の記述：
src属性の値に、エンコードした画像を指定の書式で記述します。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAA～以下略～" width="200" height="100" alt="イヌとネズミ">

つまり、「HTMLソース中に画像を埋め込む」とは「img要素のsrc属性値の中に、エンコードした画像を直接記述する」ということです。

詳しい書式を以下に解説します。

img要素のsrc属性値に直接画像を埋め込む場合の記述方法

画像を直接埋め込んだ場合のimg要素は、以下のように記述します。

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

src属性の部分だけを抜き出すと以下のようになります。

src="data:形式名;base64,変換したデータ"

このうち、「data:」の部分と「;base64,」の部分は常に同じなのでそのまま記述します。ここで使われている記号3つは、登場順にそれぞれコロン「:」→セミコロン「;」→カンマ「,」なので間違わないように注意して下さい。

「形式名」と「変換したデータ」の部分は、それぞれ以下のように記述します。

■形式名：
ここには、MIME(マイム)タイプを記述します。例えば代表的な画像形式だと以下の通りです。

GIF画像なら「 image/gif 」と記述。
PNG画像なら「 image/png 」と記述。
JPEG画像なら「 image/jpeg 」と記述。

画像データなら「image」で始まります。スラッシュ「/」記号以後の部分はファイル拡張子と同じ場合が多いですが、JPEG画像の場合は(たとえ拡張子が「jpg」のように3文字だったとしても)「jpeg」のように4文字で記述しますからご注意下さい。なお、MIMEタイプの代表例は「MIMEタイプの包括的な一覧」(MDN)などで探せます。

■変換したデータ：
ここには、Base64でエンコードした文字列をそのまま全部記述します。すべてを1行で記述しても構いませんし、途中に改行が含まれていても構いません。改行は、Base64でのエンコード部分の途中に挿入されていても問題ありません。下記の記述例では、エンコード部分を160文字ごとに改行しています。

■完全な記述例：
本記事で使ったサンプル画像を埋め込んで表示するソースは、下記の通りです。画像をBase64でエンコードした部分は7,386文字あります。

<img src="data:image/png;base64,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
AgAEAgWlP8JNCihsAAAAASUVORK5CYII=" 
width="200" height="100" alt="イヌとネズミ" />

上記のimg要素をブラウザで表示すると、以下の画像が見えます。

イヌとネズミ

このように、HTMLソースの中に画像を埋め込むことができます。

代表的な多くのブラウザで表示できる

今回ご紹介した埋め込み方法は、よほど古いブラウザでない限りは表示できます。IE7以下では非対応なので見えません。IE8以上でなら見えます。ただし、IE8では埋め込める画像サイズに32KBの上限があります。本記事で使ったサンプルのPNG画像は7.65KBですからIE8でも表示可能です。IE9以上では上限が4GBにまで拡張されているため、事実上どんな画像でも問題なく埋め込めます。

※Firefox、Chrome、Safari、Operaでは、相当に古いバージョン(または最初のバージョン)から表示可能ですから、対応を気にする必要はありません。

HTMLファイルに画像を埋め込む方法

今回は、HTMLソースの中に画像を直接埋め込む方法として、Base64でエンコードする方法と書式、メリットとデメリットなどをご紹介いたしました。アイコンのような小さな画像を多数読み込んでいるようなページで、ぜひ活用してみて下さい。

なお、もしその画像が複数のページで読み込まれるのであれば、HTMLソース中に埋め込むよりも、CSSソース中に埋め込む方が望ましいでしょう。その方法は、記事「小さな画像をCSSソースに直接(Base64で)埋め込む方法」で解説していますので併せてご参照下さい。

【関連記事】