img要素とは
<img>
要素は、imageの略で画像を表す要素です。画像ファイルはsrc
属性で参照して表示します。
- 意味・役割
- 画像を表す要素
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
- コンテンツ・カテゴリ
- (HTML5より前:インライン要素)
- コンテンツ・モデル(梱包できる要素)
- 空要素
- この要素を配置できる親要素
- エンベッディッド・コンテンツが配置できる要素
img要素で使える属性
どの要素にでも使えるグローバル属性と以下の属性が使えます。
src属性
<img>
要素で画像を表示する際は、このsrc
属性が必須の属性になります。
- 属性値
- 画像ファイルのファイルパス
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
alt属性
src
属性のパスが間違っている、サポートされていない画像形式、音声ソフトなどを利用しているユーザー、検索エンジンのロボットなど)の代替えテキストを指定する属性です。具体的には、その画像が表していることを、前後の文脈に合わせて文章で説明します。
このalt
属性は、画像を視覚的に見ることができないユーザー(音声ソフトなどを利用しているユーザー)に対して、この画像が何を表しているのかを伝える重要な属性になります。従って、HTML5より前は必須属性でした。HTML5からは必須でなくなったが、alt
属性を使用することが強く推奨されています。
- 属性値
-
- 空(この画像は、コンテンツにおいて重要ではないことを示す)
- この画像が表していることを、前後の文脈に合わせて文章で説明
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
width属性
画像横幅を指定する属性です。元サイズとは違う横幅を指定することも可能ですが、画像を大きくすると画質は劣化しますし、画像を小さくしても通信しているファイル容量は変わりません。なお、このwidth
属性を指定しない場合は元サイズのまま画像が挿入されますが、画像の通信が完了してから画像のサイズがわかる為、レイアウトの表示速度に影響がある可能性があります。従って、このwidth
属性を使って元サイズの横幅をそのまま指定することが一般的です。
- 属性値
-
- 整数: 画像の横幅(px)
- パーセンテージ: 画像の割合
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
height属性
画像高さを指定する属性です。元サイズとは違う高さを指定することも可能ですが、画像を大きくすると画質は劣化しますし、画像を小さくしても通信しているファイル容量は変わりません。なお、このheight
属性を指定しない場合は元サイズのまま画像が挿入されますが、画像の通信が完了してから画像のサイズがわかる為、レイアウトの表示速度に影響がある可能性があります。従って、このheight
属性を使って元サイズの高さをそのまま指定することが一般的です。
- 属性値
-
- 整数: 画像の横幅(px)
- パーセンテージ: 画像の割合
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
srcset属性 HTML5.1で追加
<img>
要素に、様々な状況に応じて利用する複数の画像を指定する属性です。具体的には、高解像度ディスプレイなどに対応した画像などを「,(カンマ)」区切りで指定します。
- 属性値
-
以下のルールを「,」(半角カンマ)区切りで記述
- 画像のファイルパス
- 半角スペース(任意)
- 画像の情報を以下のいずれかで記述(1つの
srcset
属性の中で併用はしない)- 画像の幅 +
"w"
(Ex. 360pxの幅の場合: 360w) - デバイスピクセル比 +
"x"
(Ex. 2倍の解像度の場合: 2x)
- 画像の幅 +
- 利用できるバージョン(HTML4.01以降)
- HTML5.1 〜
sizes属性 HTML5.1で追加
sizes
属性は、ブレークポイント間の画像サイズを指定する属性です。この画像サイズは、srcset
属性で指定した画像をブラウザが選択する際に使います。
- 属性値
-
以下のルールを「,」(半角カンマ)区切りで記述
- メディアクエリ (最後のサイズには指定しない)
- 画像のサイズ
- 利用できるバージョン(HTML4.01以降)
- HTML5.1 〜
- 対応ブラウザ(主要ブラウザのみ)
-
- Chrome 34 〜
- Firefox 32 〜
- Edge
- Opera 21 〜
- Safari 7.1 〜
- iOS Safari 8 〜
- Android Browser 53 〜
- Chrome for Android 55 〜
- Firefox for Android 50 〜
crossorigin属性 HTML5で追加
画像をCORS (Cross-Origin Resource Sharing:)を利用するかを指定する属性です。外部のサイトから読み込んだ画像を共有するための属性で、単に外部のサイトを表示するだけであれば必要がりませんが、canvas
要素で利用すると、汚染されてしまいます。この属性を指定することで汚染されることなく利用することができます。
- 属性値
-
"anonymous"
: 認証情報を使用しない"use-credentials"
: 認証情報を許可
- 利用できるバージョン(HTML4.01以降)
- HTML5 〜
usemap属性
画像に関連付けるイメージマップのname
属性を指定する属性です。ただし、この属性は、<img>
要素が <a>
要素または <button>
要素の子要素の場合は使用できません。
- 属性値
- イメージマップのname属性の値
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
ismap属性
画像がCGIなどのサーバーサイドのイメージマップの一部であることを指定する属性です。この属性は、<img>
要素が <a>
要素の子要素である場合に指定することができ、画像がクリックされた座標値がサーバー送信されます。
- 属性値
-
"ismap"
: 画像がサーバーサイドのイメージマップの一部であることを表す - 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
longdesc属性
画像に関する説明があるコンテンツへのパスを指定する属性です。HTML5では、longdesc
属性が廃止になりましたが、アクセシビリティ的な観点から、2015年2月年2月26日に、HTML5の仕様とは別に、HTML5 Image Description Extensionとして規格化されました。
- 属性値
- 画像の説明があるコンテンツへのパス
- 利用できるバージョン(HTML4.01以降)
- 全てのバージョン
align属性 廃止
画像とテキストの揃え方を指定する属性です。align
属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:float
プロパティまたは、vertical-align
プロパティで行うようにしましょう。
- 属性値
-
- "left": 画像を左に配置し、テキストを右に回り込ませる
- "right": 画像を右に配置し、テキストを左に回り込ませる
- "top": 画像とテキストを上で揃える
- "middle": 画像とテキストを垂直方向の中央で揃える
- "bottom": 画像とテキストを下で揃える
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
border属性 廃止
画像の周りに境界線を指定する属性です。ブラウザによっては<img>
要素が <a>
要素の子要素である場合のみ境界線を表示するものもあります。なお、このborder
属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:border
プロパティで行うようにしましょう。
- 属性値
- 整数値 ("0": 非表示)
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
hspace属性 廃止
画像の左右にスペースを指定する属性です。なお、このhspace
属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:margin
プロパティで行うようにしましょう。
- 属性値
- 整数値
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
vspace属性 廃止
画像の上下にスペースを指定する属性です。なお、このvspace
属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:margin
プロパティで行うようにしましょう。
- 属性値
- 整数値
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
name属性 廃止
画像に名前を指定する属性です。なお、name
属性はHTML4.01以降は非推奨、XHTML1.1で廃止になりました。代わりに、グローバル属性のid
属性を使いましょう。
- 属性値
- 文字列
- 利用できるバージョン(HTML4.01以降)
- HTML4.01 (Transition/Frameset)、XHTML1.0 (Transition/Frameset)
img要素のサンプル
基本的なimg要素の例
画像のサイズを指定した例
画像にリンクを指定した例
srcset属性を指定した例
srcset
属性をサポートするブラウザで、画素密度が2倍の場合は「logo-creatorquest@2x.png」が選ばれ、画素密度が1倍の場合は、「logo-creatorquest.png」が選ばれます。なお、srcset
属性をサポートしていないブラウザでは、「logo-creatorquest.png」が選ばれます。
srcset属性とsizes属性を指定した例
srcset
属性をサポートするブラウザは、sizes
属性のメディアクエリにマッチすると、画像の幅がビューポート幅の100%になり、そうでない場合は、500pxになります。
画像形式
ブラウザによってサポートされてる画像形式が異なりますが、主に以下の画像形式は主要なブラウザで表示することが可能です。
- JPEG形式
- GIF形式 (アニメーションGIFも含む)
- PNG形式
- SVG形式 (Internet Explorer 9 〜)
仕様
- HTML5.1
- 4.7.5. The img element
- HTML5
- 4.7.1 The img element