<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ページで使用する画像の形式は、一般的にはGIFJPEGPNGの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