imgタグの使い方と画像を適切に表示する方法をわかりやすく解説

INDEX

imgの概要

Webページに画像を表示する HTMLタグ

<img src=”画像のURL” alt=”代替テキスト”>

概要 imgタグは、HTML文書内に画像を表示するためのタグです。画像は外部ファイルとして指定し、ページ内に埋め込むことができます。

属性	説明	使用例
`src`	表示する画像のURLを指定	`<img src="image.jpg">`
`alt`	画像が表示されない場合の代替テキスト	`<img src="image.jpg" alt="風景写真">`
`width`	画像の横幅（pxまたは%）	`<img src="image.jpg" width="300">`
`height`	画像の縦幅（pxまたは%） ※width、height共にcssでの指定を推奨します。	`<img src="image.jpg" height="200">`
`title`	画像にカーソルを合わせたときに表示される補足情報	`<img src="image.jpg" title="美しい風景">`
`loading`	画像の読み込み方法（lazy: 遅延読み込み、eager: 即時読み込み）	`<img src="image.jpg" loading="lazy">`
`decoding`	画像のデコード方法（auto, async, sync）	`<img src="image.jpg" decoding="async">`

以下の例では、imgタグを使って画像を表示します。

<img src="example.jpg" alt="サンプル画像" width="400">

実行例：

CSSのmax-width: 100%;を使用すると、画像が親要素に収まるように調整されます。

img {
    max-width: 100%;
    height: auto;
}

loading属性をlazyに設定すると、スクロールして表示されるまで画像の読み込みを遅らせることができます。

<img src="example.jpg" alt="遅延読み込み画像" loading="lazy">

ベクター画像のSVGを直接HTML内に埋め込むことも可能です。

<img src="logo.svg" alt="ロゴ">

Q: imgタグの閉じタグは必要ですか？: A: いいえ、imgタグは空要素なので閉じタグ（</img>）は不要です。
Q: 画像が表示されない原因は？: A: srcのURLが間違っている、ファイルが存在しない、またはブラウザが対応していない形式である可能性があります。
Q: alt属性は必須ですか？: A: alt属性は必須ではありませんが、画像の内容を説明するために記述するのが推奨されます。
Q: 画像のサイズ指定はCSSとHTMLのどちらが良いですか？: A: CSSでサイズを指定する方が柔軟に調整できるため、一般的に推奨されます。
Q: WebP形式の画像はimgタグで使用できますか？: A: はい、WebP形式の画像をsrcに指定すれば利用できますが、対応していないブラウザもあるため注意が必要です。