img要素

Webページには、画像を表示することができます。

本ページでは、img要素について説明します。

img要素とは

img要素を使うと、画像を表示することができます。

imgの定義は、以下のとおりです。

【imgの定義】
コンテンツカテゴリ フローコンテンツフレージングコンテンツ埋め込みコンテンツ、フォーム関連コンテンツ、対話型コンテンツ(usemap属性がある場合)、認知可能コンテンツ
可能な親要素 埋め込みコンテンツを包含できる要素
可能なコンテンツ なし(空要素)
タグの省略 開始タグは必須。終了タグはなし。
DOMインターフェース HTMLImageElement

利用例

以下は、imgを使ったHTMLの例です。

【imgの利用例】
<img src="image/test.png" alt="画像の説明">

上記により、test.pngの画像が表示されます。

扱える画像ファイル形式、画像をリンクとして使う、配置を調整するなどは、以下をご参照ください。

属性

グローバル属性と、以下が使えます。

alt
画像の説明を記述します。画像を表示できない時に表示されたり、読み上げソフトで利用されます。
crossorigin
CORS(Cross-Origin Resource Sharing)の利用を定義します。
decoding
画像のデコード(表示できるデータ形式にする)を同期、非同期、ブラウザで決めるから選択します。
height
画像の高さをpxで指定します。
ismap
サーバーサイドマップであることを指定します。クリックした画像の座標をサーバーに送信します。
loading
画像を読み込むタイミングを指定します。
referrerpolicy
送信するリファラーを指定します。
sizes
srcsetに記述された複数の画像から、表示する画像サイズを指定します。
src
画像のURLを指定します。
srcset
複数の画像を指定し、ディスプレイによって表示する画像を切り替えます。
width
画像の横幅をpxで指定します。
usemap
イメージマップとして使います。map要素と関連付けて、画像のクリックした場所によってリンク先に移動したり、処理をしたりすることができます。

次からは、各属性の利用例を示します。

alt属性の利用例

alt属性の利用例は、以下のとおりです。

【altの利用例】
<img src="image/test.png" alt="画像の説明">

altは、実質的には必須です。

crossorigin属性の利用例

crossoriginの利用例は、以下のとおりです。

【crossoriginの利用例】
<img src="https://example.com/test.png" alt="画像の説明" crossorigin>

上記により、クロスオリジンから取得した画像データを、canvasで利用する時の制限などがなくなります。クロスオリジンの詳細は、「crossorigin属性」をご参照ください。

decoding属性の利用例

decoding属性の利用例は、以下のとおりです。

【decodingの利用例】
<img src="image/test.png" alt="画像の説明" decoding="async">

上記により、非同期のデコードになります。非同期のデコードでは、デコードしている最中に他のコンテンツ表示も進みます。

syncを指定すると、同期になります。同期では、デコードしている最中は他のコンテンツ表示は進みません。つまり、表示は遅くなる可能性があります。

デフォルトはautoで、ブラウザで決定します。

heightとwidth属性の利用例

heightとwidth属性の利用例は、以下のとおりです。

【heightとwidthの利用例】
<img src="image/test.png" alt="画像の説明" height="200" width="100">

上記により、高さ200px、横幅100pxで画像を表示します。実際の画像の大きさと違う場合は、拡大・縮小されます。実際の画像から縦横比を変えると、横長になったり縦長になったりします。

画像サイズが大きいと、表示されるまでに時間がかかることがあります。その際、画像が少しずつ表示されて、レイアウトが変わることがあります。heigthとwidthを指定しておくと、画像がすべて表示される前に領域を確保するため、レイアウトが変わることがありません。

ismap属性の利用例

ismap属性の利用例は、以下のとおりです。

【ismapの利用例】
<a href="test.php">
<img src="image/test.png" alt="画像の説明" ismap>
</a>

上記は、以下のように表示されます。なお、hrefとsrcの値は変えて、このページが表示されるようにしています。

画像をクリックすると、このページが再度表示されますが、ブラウザのアドレス欄では最後に座標(左からのpxと上からのpx)が追加されています。この座標は、リンク先のプログラムなどで使うことができます。

loading属性の利用例

loading属性の利用例は、以下のとおりです。

【loadingの利用例】
<img src="image/test.png" alt="画像の説明" loading="lazy">

上記により、ページが表示された時点では、目に見える範囲(ビューポート内)にある時しか画像が読み込まれません。最初に読み込まれなかった場合は、スクロールしてビューポートに入る時に画像を読み込んで表示するようになります。

ページを開いた時に、すべての画像を読み込む必要がないため、読み込みが速く完了します。これは、検索サイトなどで優位になることがあります。ページの読み込みが速く完了した方が、ユーザにとってもメリットがあるためです。

デフォルトは、eagerです。最初に、ビューポートにない画像もすべて読み込むため、ページ読み込み完了が遅くなります。

referrerpolicy属性の利用例

referrerpolicy属性の利用例は、以下のとおりです。

【referrerpolicyの利用例】
<img src="https://example.com/image/test.png" alt="画像の説明" crossorigin referrerpolicy="no-referrer">

上記により、test.pngを読み込む際にリファラーを送信しなくなります。詳細は、「referrerpolicy属性」ご参照ください。

sizesとsrcset属性の利用例

sizesとsrcset属性の利用例は、以下のとおりです。

【sizesとsrcsetの利用例】
<img src="image.png" alt="画像の説明"
     srcset="image-300w.png 300w, image-900w.png 900w"
     sizes="50vw">

srcsetでは、利用する可能性がある画像を示します。上の例で、image-300w.pngとimage-900w.pngは画像のファイル名です。その後の300wと900wは、画像サイズです。横幅をCSSピクセルで示します。

50vwは、ビューポートの横幅の50%で表示するという意味です。例えば、横幅が360pxのスマートフォンがあった場合、50%は180pxのため一番近いimage-300w.pngの画像を使って、画面の横幅半分に縮小されて表示されます。

srcsetとsizesは、ディスプレイの大きさによって画像ファイルを変えたい時に使います。詳細は、「画像のRetinaディスプレイ対応」をご参照ください。

src属性の利用例

src属性の利用例は、以下のとおりです。

【srcの利用例】
<img src="image/image.png" alt="画像の説明">

すでに説明したとおり、画像のURLを指定します。

usemap属性の利用例

usemapの利用例は、以下のとおりです。

【usemapの利用例】
<map name="test">
  <area shape="rect" coords="0,0,50,50" id="test1">
  <area shape="rect" coords="51,0,100,50" id="test2">
</map>
<img usemap="#test" src="image/image.png" alt="画像の説明">

<script>
const x = document.querySelector("#test1");
const y = document.querySelector("#test2");
x.addEventListener("click", function(){alert("赤色");});
y.addEventListener("click", function(){alert("青色");});
</script>

赤字部分で、imgとmapを関連付けしています。shapeのrectは長方形を意味し、coordsは座標を示します。上記は、以下のように表示されます。

左に50px×50pxで赤色の正方形が表示され、右に50px×50pxで青色の正方形が表示されています。

赤色の範囲をクリックするとアラートで「赤色」、青色の範囲をクリックするとアラートで「青色」と表示されます。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
img
alt
crossorigin
decoding ×
height
ismap
loading × ×
referrerpolicy ×
sizes
src
srcset ×
width
usemap
【スマートフォン】
項目 Sa An Op Ch Fx Sm
img
alt
crossorigin
decoding
height
ismap
loading × ×
referrerpolicy ×
sizes
src
srcset
width
usemap
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

HTML要素(タグ)一覧」に戻る