HTML - img 要素

概要

名前
img
カテゴリー
  • Flow content
  • Phrasing content
  • Embedded content
  • Interactive content: usemap属性を持つ場合のみ。
  • Palpable content
  • Form-associated element
配置できる場所
Embedded contentが期待される場所。
コンテンツモデル
空要素のため、子ノードを持ちません。
説明
img 要素は、表示させる画像とその代替テキスト (画像が利用できないときに代わりに使用するテキスト) を指定する要素です。
タグの省略
開始タグも終了タグも省略できません。
DOM Interface
HTMLImageElement
仕様書
仕様書策定状況コメント
LS:現行の標準
LS:現行の標準
LS:現行の標準
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

属性

サポートブラウザ
属性名 ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
align
alt
border
crossorigin
decoding
height
hspace
intrinsicsize715871
ismap
longdesc
name
referrerpolicy505111.13851
sizes
src
srcset3834821837
usemap
vspace
width
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support
グローバル属性
すべての要素で共通に利用できるグローバル属性を指定できます。
alt
この属性は、画像を説明する代替文字列を定義します。ブラウザは、要素から参照された画像を常に表示するとは限りません。視覚ブラウザ以外のブラウザで閲覧された場合、ユーザが画像を非表示に設定している場合、画像が無効であったり未対応の画像形式であったりしてブラウザが画像を表示できない場合などです。このような場合、ブラウザは、画像をこの要素の alt 属性で定義された文字列に置き換えます。このような理由から、alt 属性には可能な限り役に立つ値を指定するべきです。alt 属性を省略すると、画像がコンテンツの鍵となる部分であり、同等の文字列表現を行うことができないことを表します。alt 属性に空文字列を設定すると、この画像がコンテンツにおいて重要な箇所ではないことを示し、視覚ブラウザではない場合は表示を省略することがあります。
crossorigin
これは列挙型の属性で、関連する画像の取得の際に CORS を使用しなければならないかどうかを示します。CORS が有効な画像は、汚染 (CORS による許可なしに他のオリジンから読み込んだ何らかのデータ) されることなく canvas 要素で再利用できます。次の値が使用できます。
anonymous
オリジン間要求 (Origin: HTTP ヘッダーを持つ要求) を実行しますが、信用情報 (Cookie、 X.509 証明書、 HTTP ベーシック認証など) は送信しません。サーバがそのオリジンのサイトに信用情報を付与しない (HTTP の Access-Control-Allow-Origin ヘッダーの設定がない) 場合は、画像が汚染され、その使用も制限されます。
use-credentials
信用情報を伴ってオリジン間要求 (HTTP の Origin ヘッダーを持つ要求) を送信します (Cookie、証明書、 HTTP ベーシック認証を使用します)。サーバが元のサイトに信用情報を付与しない場合は (HTTP の Access-Control-Allow-Credentials ヘッダーに関わらず)、画像が汚染され、その使用も制限されます。
この属性を指定しない場合は、リソースが CORS 要求なしで取得され (HTTP の Origin: ヘッダーを送信せずに取得)、 canvas 要素での汚染されない使用が妨げられます。この属性が無効である場合は、列挙型のキーワードに anonymous が指定されたものとして扱います。
decoding
ブラウザに画像のデコードのヒントを提供します。次のような値が使用できます。
sync
他のコンテンツと不可分の表示として、画像を同期的にデコードします。
async
他のコンテンツの表示が遅れないように、画像を非同期的にデコードします。
auto
既定のモードで、デコード方式を指定しません。ブラウザはユーザのために最良の方法を選択します。
height
画像固有の高さをピクセル値で指定します。
importance
リソースの相対的な重要性を示します。優先度のヒントは以下の値を使用して委任されます。
auto
設定なしを表します。ブラウザはリソースの優先度を決めるために、独自の経験則を使用するかもしれません。
high
リソースが高い優先度のものであることをブラウザに示します。
low
リソースが低い優先度のものであることをブラウザに示します。
ismap
この真偽値を持つ属性は、画像がサーバサイドマップの一部であるかを示します。そうである場合は、クリック位置の正確な座標をサーバに送信します。この属性は img 要素が、有効な href 属性を持つ a 要素の子孫である場合に限り許可されます。
referrerpolicy
リソースを読み込む際に、どのリファラーを使用するかを示す文字列です。
no-referrer
Referer ヘッダーを送信しないことを表します。
no-referrer-when-downgrade
TLS (HTTPS) を使用せずにあるオリジンへナビゲートする場合は、 Referer ヘッダーを送信しないことを表します。これは他にポリシーが定められていない場合の、ユーザエージェントの既定の動作です。
origin
そのページのオリジンのスキーム、ホスト、ポートを Referer ヘッダーに含めます。
origin-when-cross-origin
異なるオリジンへのナビゲーションでは、リファラーをスキーム、ホスト、ポートのみに制限します。同一のオリジンへのナビゲーションでは、リファラーのフルパスを含めます。
unsafe-url
Referer ヘッダーにオリジンとパスを含めることを表します(ただし、フラグメント、パスワード、ユーザ名は含めません)。これはオリジンやパスの情報が TLS で保護されたリソースからセキュアでないオリジンへ漏えいしますので、安全ではありません。
sizes
ソースのサイズのセットを示す、カンマ区切りの文字列を1個以上並べたリストです。それぞれのソースサイズの構成は以下のとおりです。
  1. メディア条件。最後のアイテムでは省略しなければなりません。
  2. ソースサイズ値。
ソースサイズ値は、画像の表示サイズを指定するものです。ユーザエージェントは srcset 属性で与えられたソースからひとつを選択するために、現在のソースサイズを使用します。そのとき、ソースは幅記述子 ('w') を使用して説明します。選択したソースサイズは画像固有のサイズ (CSS スタイルが適用されていない場合の、画像の表示サイズ) に影響します。srcset 属性がない場合、あるいは幅記述子 ('w') を持つ値がない場合は、sizes 属性の効果はありません。
src
画像の URL です。この属性は、img 要素に必須です。srcset に対応するブラウザでは src を、画素密度記述子 1x の候補画像であるように扱います。ただし、この画素密度記述子が srcset で定義済みである、または srcset に幅記述子 ('w') が含まれている場合を除きます。
srcset
ユーザエージェントが使用可能なソース画像のセットを示す、カンマ区切りで文字列を 1 個以上並べたリストです。各々の文字列の構成は以下のとおりです。
  1. 画像のURL
  2. 任意で、ホワイトスペースの後に以下のいずれかを記述
    • 幅記述子。これは直後に 'w' を付加した正の整数です。幅記述子は実際の画素密度を計算するために、sizes 属性で与えられたソースサイズで割られます。
    • 画素密度記述子。これは直後に 'x' を付加した正の浮動小数点数です。
記述子を指定しない場合は、ソースを既定の記述子 1x に割り当てます。幅記述子と画素密度記述子を同一の srcset 属性に混在させると無効になります。重複した記述子 (例えばひとつの srcset に 2 つのソースがあり、どちらも '2x' とする) も無効になります。ユーザエージェントには、利用可能なソースからひとつを選択する裁量があります。これは、ユーザ設定や帯域幅の条件などに基づいて選択を適合させるような、かなりの裁量が与えられています。
width
画像固有の幅をピクセル値で指定します。
usemap
要素に関連づけられたイメージマップの部分的な URL ('#' で始まる) です。img 要素が a または button 要素の子孫である場合は、この属性を使用することはできません。

非推奨の属性

align
非推奨。新しいウェブサイトでは使用しないでください。
border
非推奨。新しいウェブサイトでは使用しないでください。
hspace
非推奨。新しいウェブサイトでは使用しないでください。
intrinsicsize
実験的。動作が変更される可能性があります。
非標準。ブラウザ間の互換性が低い可能性があります。
longdesc
非推奨。新しいウェブサイトでは使用しないでください。
name
非推奨。新しいウェブサイトでは使用しないでください。
vspace
非推奨。新しいウェブサイトでは使用しないでください。

サンプルコード

img 要素のサンプルコードは以下のとおりです。

<img src="logo.png" alt="ロゴ — murashun.jp と書かれたロゴ">
img 要素のサンプルコード

関連記事