<img> - イメージ

トップ > HTMLリファレンス > <img>

概要

形式
<img src="..." alt="...">
サポート
LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1
カテゴリ
フローコンテンツ
フレージングコンテンツ
エンベデッドコンテンツ
フォーム関連要素
インタラクティブコンテンツ(usemap属性有の場合)
パルパブルコンテンツ
親要素
エンベデッドコンテンツ を子要素に持てるもの
子要素
無し(Empty)
タグの省略
開始タグ:必須 / 終了タグ:無し
属性
グローバル属性
alt
src
srcset
sizes
crossorigin
usemap
ismap
width
height
referrerpolicy
longdesc (HTML 5.2)
decoding (HTML Living Standard)

説明

img は IMaGe(画像)の略です。src 属性には、GIF形式(*.gif)、JPEG形式(.jpg)、PNG形式(*.png)などの画像ファイルを指定します。

HTML4.01 では、画像を表示できないブラウザや、文字は音声に変換して読めても画像を見ることのできない人のために、<img> タグには alt 属性が必須とされていましたが、HTML5 では必須ではなくなるようです。

必須属性ではありませんが、height と width 属性も極力指定するようにしましょう。これらを指定しないと、ブラウザがページを表示する際に、画像を読み込む度に画面全体のレイアウトが変更されてしまい、ページ表示の体感速度が遅くなってしまいます。

属性

【共通属性】
グローバル属性
詳細は グローバル属性 を参照してください。
【重要属性】
グローバル属性
詳細は グローバル属性 を参照してください。
src=url
LS/H5/e2/Ch/Fx/Sa/Op/N2/i1
表示する画像ファイルを指定します。これは必須属性です。
alt=alt
LS/H2/e2/Ch/Fx/Sa/Op/N2/i1
テキストブラウザや、読み上げブラウザなど、画像を表示できないブラウザを考慮し、画像の代わりに表示される(読み上げられる)テキストを指定します。alt 属性を省略すると、[画像] と表示されたり、読み上げられたりしますが、alt="" を指定しておくと、表示(読み上げ)されなくなります。HTML4.01 では必須の属性として定義されています。
height=n
LS/H3/e2/Ch/Fx/Sa/Op/N2/i1
画像の高さをピクセルまたはパーセンテージで指定します。
width=n
LS/H3/e2/Ch/Fx/Sa/Op/N2/i1
画像の横幅をピクセルまたはパーセンテージで指定します。
【クリッカブルマップ関連】
usemap=usemap
LS/H3/e2/Ch/Fx/Sa/Op/N2
クライアントサイドクリッカブルマップを実現するために用います。<map>を参照してください。
ismap
LS/H2/e2/Ch/Fx/Sa/Op/N2
サーバーサイドクリッカブルマップを実現する際に用います。
【レスポンシブイメージ】
srcset=srcset
LS/H5.1
高解像度ディスプレイやスモールモニタなど異なったシチュエーションにおける画像セットを指定します。詳細は後述。
sizes=sizes
LS/H5.1
srcset で指定した画像の大きさを指定します。詳細は後述。
【セキュリティ関連】
crossorigin=state
LS/H5
CORS(Cross-Origin Resource Sharing)で使用される属性で、他のサイトのリソースにアクセスする際に、認証情報を使用するかどうかを指定します。
referrerpolicy=policy
LS/H5.2/Ch46/Fx50
リソースにアクセスした際のリファラー(Referer)送信ポリシーを指定します。
no-referrer
送信しない。
no-referrer-when-downgrade
https から http にダウングレードする際には送信しない(デフォルト)。
same-origin
同一オリジン間移動の場合のみ送信する。
origin
オリジン情報(プロトコル+FQDN+ポート番号)のみを送信する。
strict-origin
オリジン情報(プロトコル+FQDN+ポート番号)のみを送信するが、ダウングレード時には送信しない。
origin-when-cross-origin
オリジンをまたがる場合は、オリジン情報のみを送信する。
strict-origin-when-cross-origin
オリジンをまたがる場合は、オリジン情報のみを送信するが、ダウングレード時には送信しない。
unsafe-url
常に送信する。
詳細は下記を参照してください。
 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Referrer-Policy
【位置属性】
align=align
[非推奨] H2-H4T/e2/Ch/Fx/Sa/Op/N2/i1
表示位置を指定します。align="right" や align="left" を使用するとテキストが画像の周りを回りこんで表示されます。回り込みを解除するには <br clear=all> を用います。
hspace=n
[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2/i1
画像の周りの横方向の余白をピクセル単位で指定します。
vspace=n
[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2/i1
画像の周りの縦方向の余白をピクセル単位で指定します。
【固有属性】
border=n
[非推奨] H3-H4T/e2/Ch/Fx/Sa/Op/N2/i1
画像の周りの枠線をピクセルで指定します。画像を <a href="...">~</a>で囲むと自動的に枠線が表示されますが、border=0 とすればこれを消すことができます。
galleryimg=bool
[非推奨] e6
Internet Explorer 6 で、200×200 以上の画像にマウスを乗せた時に表示されるイメージツールバー(印刷、保存機能など)を表示しないようにします。<meta> で一括指定することも可能です。イメージツールバーは、Internet Explorer 7 で廃止されました。
longdesc=url
H5.2/H4-4
このフレームに対する説明が title 属性で示せないくらい長文の場合に、その説明ページの URL を指定します。HTML 4.0 で定義され、HTML5 で一度廃止されましたが、HTML 5.2 で復活しました。
lowsrc=url
[非推奨] e4/N2
画像が表示されるまでのいらいらを解消するために、転送中は lowsrc で指定した荒い(サイズの小さい)画像を表示し、転送がすべて完了した時点で src で指定した通常の画像を表示するようにします。
suppress=suppress
[非推奨] N4
suppress は抑圧という意味です。省略時の値は false ですが、true を指定すると、画像のダウンロード中に、代替アイコンの代わりにツールチップが表示されるようになります。
name=name
[非推奨] H4/e4/N3
名前を指定します。
decoding=mode
LS
画像のデコード方式のヒントを指定します。
auto
ブラウザにまかせます(規定値)。
sync
他のコンテンツと同期的にデコードします。
async
他のコンテンツと非同期にデコードします。
【動画関連属性】
controls
[非推奨] e2-e3
動画の下部に再生制御用のコントロールを表示します。Internet Explorer 4.0 では廃止されました。
dynsrc=url
[非推奨] e2
動画ファイル(*.avi)を指定します。<embed><object> タグもありますので、現在ではあまり利用されていません。
loop=n
[非推奨] e2
再生回数を指定します。loop=infinite を指定すると無限に繰り返します。
start=start
[非推奨] e2
fileopen を指定するとページを表示するとすぐに再生が始まります。mouseover を指定するとマウスが動画の上にきた時点で再生が始まります。
【データバインド関連属性】
datafld=datafld
[非推奨] e4-?
データバインド機能を用いる際の、データソースの列名を指定します。
datasrc=datasrc
[非推奨] e4-?
データバインド機能を用いる際の、データソースの ID を指定します。

使用例

HTML
 <img src="image/sample.gif" alt="イラスト2" width=100 height=100>
表示
イラスト2

レスポンシブイメージ

HTML5.1 では、スマホやタブレットなど画面のウィンドウ幅に応じた画像を表示するために、srcset 属性と sizes 属性が追加されました。下記の様に使用することで、ビューポートの横幅(width を指定しない div 要素を表示した際の横幅)が 600ピクセル以下の時には small.jpg を、それ以上の時には large.jpg を表示します。sizes の 100vm は、ビューポートの横幅が 600ピクセルの時に small.jpg を本来の大きさの 100% で、横幅が 800ピクセルの時に large.jpg を本来の大きさの 100% の大きさで表示することを示します。Chrome や Firefox でサポートされていますが、Chrome では別画面に遷移しないと画像が自動的に切り替わらないので注意してください。

HTML
<img src="small.jpg" alt="...">
<img src="normal.gif" srcset="small.jpg 600w, large.jpg 800w" sizes="100vw" alt="...">
<img src="large.jpg" alt="...">
<div style="width:600px; background-color:#f99; padding-left:5px;">600px</div>
<div style="width:800px; background-color:#99f; padding-left:5px; margin-top:5px;">800px</div>
表示
... ... ...
600px
800px

下記の例では、標準解像度(1x)の場合は small.jpg、解像度2倍(2x)のディスプレイの場合は large.jpg を表示します。

HTML
<img src="normal.gif" srcset="small.jpg 1x, large.jpg 2x" sizes="100vw">

sizes にはメディアクエリの条件 (@media を参照)を記述することができます。下記の例では、460px より狭い場合は 200 ピクセルで、さもなくばビューポートの 100% の大きさで表示します。

HTML
<img src="normal.gif" srcset="small.jpg 460w, large.jpg 800w" sizes="(min-width:460px) 200px, 100vw">

テクニック

リンク


Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
http://www.tohoho-web.com/html/img.htm