HTML <img>タグ

❮前へ完全なHTMLリファレンス次へ❯

例

画像を挿入する方法：

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

タグは、<img>HTMLページに画像を埋め込むために使用されます。

画像は技術的にWebページに挿入されません。画像はウェブページにリンクされています。<img>タグは、参照される画像の保持スペースを作成します。

<img>タグには2つの必須属性があります。

src-画像へのパスを指定します
alt-何らかの理由で画像を表示できない場合に、画像の代替テキストを指定します

注：また、画像の幅と高さは常に指定してください。幅と高さが指定されていない場合、画像の読み込み中にページがちらつくことがあります。

ヒント：画像を別のドキュメントにリンクするには、タグを<a><img>タグ内にネストするだけです（以下の例を参照）。

ブラウザのサポート

Element
<img>	Yes	Yes	Yes	Yes	Yes

属性

Attribute	Value	Description
alt	text	Specifies an alternate text for an image
crossorigin	anonymous use-credentials	Allow images from third-party sites that allow cross-origin access to be used with canvas
height	pixels	Specifies the height of an image
ismap	ismap	Specifies an image as a server-side image map
loading	eager lazy	Specifies whether a browser should load an image immediately or to defer loading of images until some conditions are met
longdesc	URL	Specifies a URL to a detailed description of an image
referrerpolicy	no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url	Specifies which referrer information to use when fetching an image
sizes	sizes	Specifies image sizes for different page layouts
src	URL	Specifies the path to the image
srcset	URL-list	Specifies a list of image files to use in different situations
usemap	#mapname	Specifies an image as a client-side image map
width	pixels	Specifies the width of an image

グローバル属性

この<img>タグは、HTMLのグローバル属性もサポートしています。

イベント属性

この<img>タグは、HTMLのイベント属性もサポートしています。

その他の例

例

画像の整列（CSSを使用）：

例

画像の境界線を追加（CSSを使用）：

例

画像に左右の余白を追加します（CSSを使用）：

例

画像に上下の余白を追加します（CSSを使用）。

例

別のフォルダまたは別のWebサイトから画像を挿入する方法：

例

画像にハイパーリンクを追加する方法：

例

クリック可能な領域を使用して画像マップを作成する方法。各領域はハイパーリンクです。

デフォルトのCSS設定

ほとんどのブラウザは<img>、次のデフォルト値で要素を表示します。

例

img {
display: inline-block;
}