imgタグ -画像を表示する｜HTML辞典

<img>タグとは？

<img> タグは、HTML文書内で画像を表示するためのタグ です。
<img> はインライン要素であり、src 属性で画像のURLを指定することで、ページに画像を埋め込むことができます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、エンベッデッドコンテンツ（Embedded Content）、パルパブルコンテンツ（Palpable Content）。

閉じタグの有無

<img> は単独タグ（空要素）のため、閉じタグ（</img>）は不要です。

基本的な記述方法

<img src="image.jpg" alt="画像の説明">

使用できる主な属性

<img> タグには多くの属性がありますが、以下は代表的なものです。

属性名	説明	例
src	画像のURLを指定	<img src="image.jpg">
alt	画像の説明（代替テキスト）	<img src="image.jpg" alt="サンプル画像">
width	画像の横幅を指定（pxまたは%）	<img src="image.jpg" width="300">
height	画像の高さを指定（pxまたは%）	<img src="image.jpg" height="200">
title	画像にカーソルを置いたときの説明	<img src="image.jpg" title="画像の詳細">
loading	遅延読み込みの設定	<img src="image.jpg" loading="lazy">

CSSを使ったデザイン変更

画像のサイズやスタイルを調整したい場合は、CSSを活用できます。

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

適切な使用例

✅ 画像を表示する

<img src="logo.png" alt="会社のロゴ">

✅ 画像サイズを指定する

<img src="photo.jpg" width="300" height="200" alt="風景の写真">

✅ alt 属性を設定する（アクセシビリティ向上）

<img src="graph.png" alt="売上データを示すグラフ">

✅ loading="lazy" を使用して画像の遅延読み込みを行う

<img src="large-image.jpg" loading="lazy" alt="高解像度の画像">

適切でない使用例（誤った使い方）

❌ src 属性なしで画像を指定するのはNG

<!-- NG: src属性がない -->
<img alt="画像がありません">

✅ 正しい書き方（src を指定）

<img src="image.jpg" alt="サンプル画像">

❌ alt を省略するのはNG（アクセシビリティの観点から非推奨）

<!-- NG: alt属性なし -->
<img src="photo.jpg">

✅ 正しい書き方（alt を追加）

<img src="photo.jpg" alt="風景の写真">

<img>タグと他のタグの違い

タグ	役割	特徴	適切な用途
<img>	画像を表示	src で画像を指定	ページ内の画像埋め込み
<picture>	複数の画像ソースを指定	source で切り替え可能	レスポンシブ画像対応
<figure>	画像や図表のグループ化	<figcaption> で説明追加可能	画像＋説明のセット
<video>	動画を埋め込む	src で動画ファイルを指定	動画コンテンツの埋め込み

使用上の注意点

✅ alt 属性を必ず指定する

• 画像が表示されない場合の代替テキストとして機能するため、必ず記述する。
• ただし、装飾用などで画像の説明が必要ないものについては空のaltを設定する。

<img src="sample.jpg" alt="">

✅ loading="lazy" を活用してパフォーマンスを向上させる

• 大きな画像をページの読み込み速度を最適化するために遅延読み込みさせる。

関連タグ

• <picture> – レスポンシブ対応の画像埋め込み
• <figure> – 画像とキャプションのセット
• <source> – <picture> 内で画像の切り替えを行う
• <video> – 動画の埋め込み

まとめ

<img>タグは、HTML文書内で 画像を表示するためのタグ です。
src で画像のURLを指定し、alt を必ず設定することで、アクセシビリティとSEOの向上が期待できます。