img要素とは

<img>要素は、imageの略で画像を表す要素です。画像ファイルはsrc属性で参照して表示します。

意味・役割
画像を表す要素
利用できるバージョン（HTML4.01以降）
全てのバージョン
コンテンツ・カテゴリ
（HTML5より前：インライン要素）
コンテンツ・モデル（梱包できる要素）
空要素
この要素を配置できる親要素
エンベッディッド・コンテンツが配置できる要素

img要素で使える属性

どの要素にでも使えるグローバル属性と以下の属性が使えます。

src属性

source（ソース）の略で画像ファイルの場所を指定する属性です。<img>要素で画像を表示する際は、このsrc属性が必須の属性になります。

<img src="画像のファイルパス">
属性値
画像ファイルのファイルパス
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<img src="images/logo.png">

alt属性

alternate（オルタネイト）の略で、画像を視覚的に見ることができない場合（src属性のパスが間違っている、サポートされていない画像形式、音声ソフトなどを利用しているユーザー、検索エンジンのロボットなど）の代替えテキストを指定する属性です。具体的には、その画像が表していることを、前後の文脈に合わせて文章で説明します。 このalt属性は、画像を視覚的に見ることができないユーザー（音声ソフトなどを利用しているユーザー）に対して、この画像が何を表しているのかを伝える重要な属性になります。従って、HTML5より前は必須属性でした。HTML5からは必須でなくなったが、alt属性を使用することが強く推奨されています。

<img src="画像のファイルパス" alt="画像の代替えテキスト">
属性値
  • 空（この画像は、コンテンツにおいて重要ではないことを示す）
  • この画像が表していることを、前後の文脈に合わせて文章で説明
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<img src="images/rose.jpg" target="100本バラの花束を彼女にプレゼントした。すると彼女はとても喜んでくれた。">

width属性

画像横幅を指定する属性です。元サイズとは違う横幅を指定することも可能ですが、画像を大きくすると画質は劣化しますし、画像を小さくしても通信しているファイル容量は変わりません。なお、このwidth属性を指定しない場合は元サイズのまま画像が挿入されますが、画像の通信が完了してから画像のサイズがわかる為、レイアウトの表示速度に影響がある可能性があります。従って、このwidth属性を使って元サイズの横幅をそのまま指定することが一般的です。

<img src="画像のファイルパス" width="画像の横幅" alt="代替えテキスト">
属性値
  • 整数： 画像の横幅（px）
  • パーセンテージ： 画像の割合
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<img src="images/logo.png" width="160" height="48" alt="CreatorQuest">

height属性

画像高さを指定する属性です。元サイズとは違う高さを指定することも可能ですが、画像を大きくすると画質は劣化しますし、画像を小さくしても通信しているファイル容量は変わりません。なお、このheight属性を指定しない場合は元サイズのまま画像が挿入されますが、画像の通信が完了してから画像のサイズがわかる為、レイアウトの表示速度に影響がある可能性があります。従って、このheight属性を使って元サイズの高さをそのまま指定することが一般的です。

<img src="画像のファイルパス" height="画像の高さ" alt="代替えテキスト">
属性値
  • 整数： 画像の横幅（px）
  • パーセンテージ： 画像の割合
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<img src="images/logo.png" width="160" height="48" alt="CreatorQuest">

srcset属性 HTML5.1で追加

<img>要素に、様々な状況に応じて利用する複数の画像を指定する属性です。具体的には、高解像度ディスプレイなどに対応した画像などを「,（カンマ）」区切りで指定します。

<img src="画像のファイルパス" srcset="画像のファイルパス 画像の情報, 画像のファイルパス 画像の情報, .." alt="代替えテキスト">
属性値
以下のルールを「,」（半角カンマ）区切りで記述
  1. 画像のファイルパス
  2. 半角スペース（任意）
  3. 画像の情報を以下のいずれかで記述（1つのsrcset属性の中で併用はしない）
    • 画像の幅 + "w" （Ex. 360pxの幅の場合： 360w）
    • デバイスピクセル比 + "x" （Ex. 2倍の解像度の場合： 2x）
利用できるバージョン（HTML4.01以降）
HTML5.1 〜
使用例
<img src="images/logo.png" srcset="images/logo@2x.png 2x, images/logo@3x.png 3x" alt="CreatorQuest">

sizes属性 HTML5.1で追加

sizes属性は、ブレークポイント間の画像サイズを指定する属性です。この画像サイズは、srcset属性で指定した画像をブラウザが選択する際に使います。

<img src="画像のファイルパス" srcset="画像のファイルパス 画像の幅w, 画像のファイルパス 画像の幅w, .." sizes="メディアクエリ1 画像サイズ, メディアクエリ2 画像サイズ, ..." alt="代替えテキスト">
属性値
以下のルールを「,」（半角カンマ）区切りで記述
  1. メディアクエリ （最後のサイズには指定しない）
  2. 画像のサイズ
利用できるバージョン（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 〜
使用例
<img src="images/logo.png" srcset="images/logo-320.png 320w, logo-640.png 640w" sizes="(max-width: 768px) 100vw, 768px" alt="CreatorQuest">

crossorigin属性 HTML5で追加

画像をCORS （Cross-Origin Resource Sharing:）を利用するかを指定する属性です。外部のサイトから読み込んだ画像を共有するための属性で、単に外部のサイトを表示するだけであれば必要がりませんが、canvas要素で利用すると、汚染されてしまいます。この属性を指定することで汚染されることなく利用することができます。

<img src="外部の画像ファイルパス" crossorigin="anonymousまたは、use-credentials" alt="代替えテキスト">
属性値
  • "anonymous"： 認証情報を使用しない
  • "use-credentials"： 認証情報を許可
利用できるバージョン（HTML4.01以降）
HTML5 〜
使用例
<img src="http://creatorquest.jp/dummy/img/dummy.png" crossorigin="use-credentials" alt="">

usemap属性

画像に関連付けるイメージマップのname属性を指定する属性です。ただし、この属性は、<img>要素が <a>要素または <button>要素の子要素の場合は使用できません。

<img src="画像ファイルパス" usemap="#イメージマップのname属性の値" alt="代替えテキスト">
属性値
イメージマップのname属性の値
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<img src="images/map.png" usemap="#dummy-map">
<map name="dummy-map">
  <area shape="rect" coords="0,0,100,100" href="dummy1.html" alt="架空の町A">
  <area shape="rect" coords="100,100,200,200" href="dummy1.html" alt="架空の町B">
</map>

ismap属性

画像がCGIなどのサーバーサイドのイメージマップの一部であることを指定する属性です。この属性は、<img>要素が <a>要素の子要素である場合に指定することができ、画像がクリックされた座標値がサーバー送信されます。

<img src="画像のファイルパス" ismap="ismap" alt="代替えテキスト">
属性値
"ismap"： 画像がサーバーサイドのイメージマップの一部であることを表す
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<a href="dummy.cgi">
  <img src="dummy-map.png" alt="架空の地図" ismap="ismap">
</a>

longdesc属性

画像に関する説明があるコンテンツへのパスを指定する属性です。HTML5では、longdesc属性が廃止になりましたが、アクセシビリティ的な観点から、2015年2月年2月26日に、HTML5の仕様とは別に、HTML5 Image Description Extensionとして規格化されました。

<img src="画像のファイルパス" longdesc="コンテンツへのパス" alt="代替えテキスト" >
属性値
画像の説明があるコンテンツへのパス
利用できるバージョン（HTML4.01以降）
全てのバージョン
使用例
<img src="images/graph.png" alt="当社を利用している男女比は、男性が60%、女性が40%という結果になりました。" longdesc="result.html">

align属性 廃止

画像とテキストの揃え方を指定する属性です。align属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:float プロパティまたは、vertical-align プロパティで行うようにしましょう。

<img src="画像のファイルパス" align="揃え方" alt="代替えテキスト">
属性値
  • "left"： 画像を左に配置し、テキストを右に回り込ませる
  • "right"： 画像を右に配置し、テキストを左に回り込ませる
  • "top"： 画像とテキストを上で揃える
  • "middle"： 画像とテキストを垂直方向の中央で揃える
  • "bottom"： 画像とテキストを下で揃える
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<img src="images/logo.png" alt="CreatorQuest" align="right">

border属性 廃止

画像の周りに境界線を指定する属性です。ブラウザによっては<img>要素が <a>要素の子要素である場合のみ境界線を表示するものもあります。なお、このborder属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:border プロパティで行うようにしましょう。

<img src="画像のファイルパス" border="境界線のpx" alt="代替えテキスト" >
属性値
整数値 （"0"： 非表示）
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<img src="images/logo.png" alt="CreatorQuest" border="1">

hspace属性 廃止

画像の左右にスペースを指定する属性です。なお、このhspace属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:margin プロパティで行うようにしましょう。

<img src="画像のファイルパス" hspace="スペースのpx" alt="代替えテキスト" >
属性値
整数値
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<img src="images/logo.png" alt="CreatorQuest" hspace="10">

vspace属性 廃止

画像の上下にスペースを指定する属性です。なお、このvspace属性は視覚的な表現を行う属性で、HTML4.01以降は非推奨、XHTML1.1で廃止になりました。同様の表現を行うには、CSSの:margin プロパティで行うようにしましょう。

<img src="画像のファイルパス" vspace="スペースのpx" alt="代替えテキスト" >
属性値
整数値
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<img src="images/logo.png" alt="CreatorQuest" vspace="10">

name属性 廃止

画像に名前を指定する属性です。なお、name属性はHTML4.01以降は非推奨、XHTML1.1で廃止になりました。代わりに、グローバル属性のid属性を使いましょう。

<img src="画像のファイルパス" name="画像の名前" alt="代替えテキスト" >
属性値
文字列
利用できるバージョン（HTML4.01以降）
HTML4.01 （Transition/Frameset）、XHTML1.0 （Transition/Frameset）
使用例
<img src="images/logo.png" alt="CreatorQuest" name="logo">

img要素のサンプル

基本的なimg要素の例

基本的なimg要素の例
<img src="images/logo-CreatorQuest.png" alt="CreatorQuest">
ブラウザでの表示例

RERUN

新しいウインドウで表示する

画像のサイズを指定した例

画像のサイズを指定した例
<img src="images/logo-creatorquest.png" width="250" height="250" alt="CreatorQuest">
ブラウザでの表示例

RERUN

新しいウインドウで表示する

画像にリンクを指定した例

画像にリンクを指定した例
<a href="http://creatorquest.jp" target="_blank">
  <img src="images/logo-creatorquest.png" width="250" height="250" alt="CreatorQuest">
</a>
ブラウザでの表示例

RERUN

新しいウインドウで表示する

srcset属性を指定した例

srcset属性をサポートするブラウザで、画素密度が2倍の場合は「logo-creatorquest@2x.png」が選ばれ、画素密度が1倍の場合は、「logo-creatorquest.png」が選ばれます。なお、srcset属性をサポートしていないブラウザでは、「logo-creatorquest.png」が選ばれます。

srcset属性を指定した例
<img src="images/logo-creatorquest.png" srcset="images/logo-creatorquest@2x.png 2x" alt="CreatorQuest">
ブラウザでの表示例

RERUN

新しいウインドウで表示する

srcset属性とsizes属性を指定した例

srcset属性をサポートするブラウザは、sizes属性のメディアクエリにマッチすると、画像の幅がビューポート幅の100%になり、そうでない場合は、500pxになります。

srcset属性を指定した例
<img src="images/logo-creatorquest.png"
     srcset="images/logo-creatorquest-250.png 250w, images/logo-creatorquest-500.png 500w"
     sizes="(max-width: 500px) 100vw, 500px"
     alt="CreatorQuest">
ブラウザでの表示例

RERUN

新しいウインドウで表示する

画像形式

ブラウザによってサポートされてる画像形式が異なりますが、主に以下の画像形式は主要なブラウザで表示することが可能です。

  • JPEG形式
  • GIF形式 （アニメーションGIFも含む）
  • PNG形式
  • SVG形式 （Internet Explorer 9 〜）

仕様

HTML5.1
4.7.5. The img element
HTML5
4.7.1 The img element
HTML4.01
13.2 Including an image: the IMG element

関連する要素

関連するレッスン