<img src="">

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
分類 フロー・コンテンツ / フレージング・コンテンツ / エンベッディッド・コンテンツ / インタラクティブ・コンテンツ（usemap属性がある場合） / フォーム関連要素 / パルパブル・コンテンツ
利用場所 エンベッディッド・コンテンツが置ける場所
内容 空

img要素は、画像を文書内に埋め込みます。


<img src="example.gif" alt="サンプル">
属性 値
必須属性
src="" 画像の指定 URL 埋め込む画像のURL
任意属性
alt="" 代替テキスト テキスト 画像の代わりになるテキスト
width="" 画像の幅 数値 ピクセル数
height="" 画像の高さ 数値 ピクセル数
usemap="" クライアントサイド・イメージマップ #マップ名 イメージマップの名前
ismap サーバーサイド・イメージマップ （ismap） 値は省略可能
crossorigin="" ［＋］別ドメインにあるリソースの扱い方法 anonymous 認証を利用しない
use-credentials 認証を利用する
srcset="" ［5.1］画像の候補 URL 画像ファイルのURL
URL 横幅w ビューポートの幅による切り替え： 画像ファイルのURL、画像ファイルの横幅（ピクセル数）、記述子（w）
URL 比率x デバイスピクセル比による切り替え： 画像ファイルのURL、比率を示す数値、記述子（x）
sizes="" ［5.1］ブレイクポイント、画像の表示サイズ メディアクエリ 表示サイズ（vw） メディアクエリ、画像の表示サイズ（横幅）、割合で指定する場合は vw （初期値は 100vw）
  • ismap属性は、サーバーサイド・イメージマップを使用する際に指定します。この属性は、href属性を持つa要素内のimg要素にのみ指定することができます。（詳細未確認）
  • crossorigin属性は、CORS (Cross-Origin Resource Sharing)の仕組みを利用して、別ドメインのリソースにアクセスする際の扱いを指定するもの、だそうです。値が省略された場合のデフォルト値は anonymous、属性そのものが省略された場合はCORSを利用せずにアクセスします。（詳細未確認）

alt属性、width属性、height属性、usemap属性、srcset属性、sizes属性の詳細については、下記のページを参考にしてください。

画像の埋め込み方法

画像ファイルのURLを、src属性で指定します。例えば次のように記述した場合は、example.gifがその場所に埋め込まれることになります。

<img src="example.gif" alt="サンプル">

画像の形式について

Webページで使用する画像の形式は、一般的にはGIF、JPEG、PNGの3タイプになります。

GIF （拡張子 .gif）
256色まで使用可能。イラストやアイコン向きの形式で、色数の少ない単調な画像に適しています。
JPEG （拡張子 .jpg）
約1677万色まで使用可能。写真向きの形式で、色数の多い複雑な画像に適しています。
PNG （拡張子 .png）
（通常は）約1677万色まで使用可能。イラストやアイコン向きの形式で、色数の少ない単調な画像に適しています。写真などで使用する場合は、データ量が大きくなってしまうので注意が必要です。（しかし、画質の劣化がないのでJPEGより綺麗に表示されます）

alt属性について

alt属性の指定は任意という扱いになっていますが、ほとんどのケースで必要となります。（ほぼ必須属性と考えて良いでしょう）

<img src="photo.jpg" alt="逗子海岸で犬と散歩する私">
HTML5における変更点
HTML 5.1における変更点
  • srcset属性とsizes属性が追加されました。

使用例


<p><img src="sample.gif" alt="SAMPLE"></p>

<p><img src="kyoto.jpg" alt="京都の庭園を写した写真。透き通った池が目の前に広がっています。"></p>
表示例

SAMPLE