img要素
Webページには、画像を表示することができます。
本ページでは、img要素について説明します。
img要素とは
img要素を使うと、画像を表示することができます。
imgの定義は、以下のとおりです。
コンテンツカテゴリ | フローコンテンツ、フレージングコンテンツ、埋め込みコンテンツ、フォーム関連コンテンツ、対話型コンテンツ(usemap属性がある場合)、認知可能コンテンツ |
---|---|
可能な親要素 | 埋め込みコンテンツを包含できる要素 |
可能なコンテンツ | なし(空要素) |
タグの省略 | 開始タグは必須。終了タグはなし。 |
DOMインターフェース | HTMLImageElement |
利用例
以下は、imgを使ったHTMLの例です。
<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属性の利用例は、以下のとおりです。
<img src="image/test.png" alt="画像の説明">
altは、実質的には必須です。
crossorigin属性の利用例
crossoriginの利用例は、以下のとおりです。
<img src="https://example.com/test.png" alt="画像の説明" crossorigin>
上記により、クロスオリジンから取得した画像データを、canvasで利用する時の制限などがなくなります。クロスオリジンの詳細は、「crossorigin属性」をご参照ください。
decoding属性の利用例
decoding属性の利用例は、以下のとおりです。
<img src="image/test.png" alt="画像の説明" decoding="async">
上記により、非同期のデコードになります。非同期のデコードでは、デコードしている最中に他のコンテンツ表示も進みます。
syncを指定すると、同期になります。同期では、デコードしている最中は他のコンテンツ表示は進みません。つまり、表示は遅くなる可能性があります。
デフォルトはautoで、ブラウザで決定します。
heightとwidth属性の利用例
heightとwidth属性の利用例は、以下のとおりです。
<img src="image/test.png" alt="画像の説明" height="200" width="100">
上記により、高さ200px、横幅100pxで画像を表示します。実際の画像の大きさと違う場合は、拡大・縮小されます。実際の画像から縦横比を変えると、横長になったり縦長になったりします。
画像サイズが大きいと、表示されるまでに時間がかかることがあります。その際、画像が少しずつ表示されて、レイアウトが変わることがあります。heigthとwidthを指定しておくと、画像がすべて表示される前に領域を確保するため、レイアウトが変わることがありません。
ismap属性の利用例
ismap属性の利用例は、以下のとおりです。
<a href="test.php"> <img src="image/test.png" alt="画像の説明" ismap> </a>
上記は、以下のように表示されます。なお、hrefとsrcの値は変えて、このページが表示されるようにしています。
画像をクリックすると、このページが再度表示されますが、ブラウザのアドレス欄では最後に座標(左からのpxと上からのpx)が追加されています。この座標は、リンク先のプログラムなどで使うことができます。
loading属性の利用例
loading属性の利用例は、以下のとおりです。
<img src="image/test.png" alt="画像の説明" loading="lazy">
上記により、ページが表示された時点では、目に見える範囲(ビューポート内)にある時しか画像が読み込まれません。最初に読み込まれなかった場合は、スクロールしてビューポートに入る時に画像を読み込んで表示するようになります。
ページを開いた時に、すべての画像を読み込む必要がないため、読み込みが速く完了します。これは、検索サイトなどで優位になることがあります。ページの読み込みが速く完了した方が、ユーザにとってもメリットがあるためです。
デフォルトは、eagerです。最初に、ビューポートにない画像もすべて読み込むため、ページ読み込み完了が遅くなります。
referrerpolicy属性の利用例
referrerpolicy属性の利用例は、以下のとおりです。
<img src="https://example.com/image/test.png" alt="画像の説明" crossorigin referrerpolicy="no-referrer">
上記により、test.pngを読み込む際にリファラーを送信しなくなります。詳細は、「referrerpolicy属性」ご参照ください。
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属性の利用例は、以下のとおりです。
<img src="image/image.png" alt="画像の説明">
すでに説明したとおり、画像のURLを指定します。
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は座標を示します。上記は、以下のように表示されます。
赤色の範囲をクリックするとアラートで「赤色」、青色の範囲をクリックするとアラートで「青色」と表示されます。
ブラウザのサポート状況
各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。
項目 | 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要素(タグ)一覧」に戻る