<img> - イメージ

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

• 概要
• 説明
• 属性
  • 共通属性
  • 重要属性
  • クリッカブルマップ関連
  • レスポンシブイメージ
  • セキュリティ関連
  • 固有属性
  • 位置属性
  • 動画関連属性
  • データバインド関連
• 使用例
• 詳細
  • レスポンシブイメージ
  • データURI
  • その他のハウツー
• リンク

概要

形式

<img src="..." alt="...">

サポート

https://caniuse.com/mdn-html_elements_img

カテゴリ

フローコンテンツ

フレージングコンテンツ

エンベデッドコンテンツ

フォーム関連要素

インタラクティブコンテンツ(usemap属性有の場合)

パルパブルコンテンツ

親要素

エンベデッドコンテンツ を子要素に持てるもの

子要素

無し(Empty)

タグの省略

開始タグ:必須 / 終了タグ:無し

属性

グローバル属性

alt

src

srcset

sizes

crossorigin

usemap

ismap

width

height

referrerpolicy

decoding

loading

fetchpriority

説明

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

アイコンなどのように色数の少ないものは PNG形式、写真などの様に色数の多いものは JPEG形式、拡大しても綺麗に表示したい場合は SVG形式 を使用することが多いです。GIF形式はあまり使用されなくなりましたが、GIFアニメを表示したい場合などで利用されています。

height, width 属性、または CSS で高さと横幅を指定しておかないと、画像を読み込んだ時点で高さと横幅が変動し、画面読み込み状況によって画面レイアウトが変わってしまうため、高さと横幅は画像を読み込む前に指定しておく方が望ましいようです。

属性

共通属性

グローバル属性

詳細は グローバル属性 を参照してください。

重要属性

src=url

LS/H5/e2/Ch/Fx/Sa/Op/N2/i1

表示する画像ファイルを指定します。これは必須属性です。

alt=alt

LS/H2/e2/Ch/Fx/Sa/Op/N2/i1

テキストブラウザや、読み上げブラウザなど、画像を表示できないブラウザを考慮し、画像の代わりに表示される(読み上げられる)テキストを指定します。HTML4.01 では必須属性として定義されていました。HTML Living Standard では「特に指定のない限り指定する必要があり、その値を空にすることはできない。」と説明されています。

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

固有属性

decoding=mode

LS

画像のデコード方式のヒントを指定します。

auto

ブラウザにまかせます(規定値)。

sync

他のコンテンツと同期的にデコードします。

async

他のコンテンツと非同期にデコードします。

loading=loading

LS/Ch

logind="lazy" を指定すると、ページをスクロールしてコンテンツが表示されそうになった時点で読み込みを開始する Lazy-loading を有効にします。サポート状況は CanIUse.com を参照してください。

fetchpriority=priority

LS/Ch/Ed

画像を読み込む優先度を指定します。重要ではない画像に low を指定し、重要な画像に high を指定することでページが表示される体感速度を改善することができます。(→ サポート状況)

high

通常より高い優先度で画像を読み込みます。

low

通常より低い優先度で画像を読み込みます。

auto

通常の優先度で画像を読み込みます。(デフォルト)

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

名前を指定します。

位置属性

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

画像の周りの縦方向の余白をピクセル単位で指定します。

動画関連属性

controls

[非推奨] e2-e3

動画の下部に再生制御用のコントロールを表示します。Internet Explorer 2.0 でサポートされましたが、Internet Explorer 4.0 では廃止されました。

dynsrc=url

[非推奨] e2

動画ファイル(*.avi)を指定します。Internet Explorer 2.0 でサポートされましたが廃止されています。<video> を使用してください。

loop=n

[非推奨] e2

再生回数を指定します。loop=infinite を指定すると無限に繰り返します。

start=start

[非推奨] e2

fileopen を指定するとページを表示するとすぐに再生が始まります。mouseover を指定するとマウスが動画の上にきた時点で再生が始まります。

データバインド関連

datafld=datafld

[非推奨] e4-?

データバインド機能を用いる際の、データソースの列名を指定します。

datasrc=datasrc

[非推奨] e4-?

データバインド機能を用いる際の、データソースの ID を指定します。

使用例

 <img src="image/sample.gif" alt="イラスト２" width=60 height=80>

詳細

レスポンシブイメージ

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

<img srcset="small.jpg 600w, large.jpg 800w" src="default.png" sizes="100vw" 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、Mac や iPhone の Ratina など解像度2倍(2x)のディスプレイの場合は large.jpg を表示します。

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

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

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

データURI

画像データを文字列として直接HTMLに埋め込むこともできます。下記の例では GIF ファイルをBASE64で文字列化し、data: スキーマと MINEタイプ、エンコード情報を付加して、src 属性に指定しています。

その他のハウツー

• 画像を貼り付けるには
• 画像のサイズを知るには
• 画像が表示されない!?
• 画像を隙間無く並べるには
• 画像の上に文字を乗せるには
• イメージツールバーを無効にするには
• 画像に代替テキストを設定するには
• 画像をリンクボタンにするには

リンク

• https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
• https://developer.mozilla.org/ja/docs/Web/HTML/Element/img
• https://caniuse.com/mdn-html_elements_img