imgタグの使い方｜HTML画像表示の書き方・alt属性・レスポンシブ対応

May 16, 2026

imgタグとは？

<img> タグはHTMLで画像を表示するタグです。終了タグ（</img>）は不要な自己終了タグです。

<img src="photo.jpg" alt="富士山の写真">

src 属性で画像ファイルのパスを指定し、alt 属性で代替テキストを設定します。

主要な属性

属性	必須	説明
`src`	◎	画像ファイルのパス（URL）
`alt`	◎	代替テキスト（画像の説明）
`width`	推奨	表示横幅（px または %）
`height`	推奨	表示高さ（px）
`loading`	推奨	遅延読み込み設定
`decoding`	任意	デコード方法

src属性｜画像パスの書き方

相対パス（同じサーバー内）

<!-- 同じフォルダ内 -->
<img src="photo.jpg" alt="写真">

<!-- imagesフォルダ内 -->
<img src="images/photo.jpg" alt="写真">

<!-- 1つ上のフォルダのimages内 -->
<img src="../images/photo.jpg" alt="写真">

絶対パス（フルURL）

<!-- 外部サイトの画像（自サイトの画像は相対パス推奨） -->
<img src="https://example.com/images/photo.jpg" alt="写真">

alt属性｜代替テキストの重要性

alt 属性は必ず設定します。以下の理由で重要です。

アクセシビリティ：スクリーンリーダーがalt属性を読み上げ、視覚障がい者に画像の内容を伝える
SEO：検索エンジンが画像の内容を理解するために使用
表示エラー時：画像が読み込めない場合にalt属性のテキストが表示される

altテキストの書き方

<!-- ○ 画像の内容を具体的に説明 -->
<img src="tokyo-tower.jpg" alt="夜の東京タワー（東京都港区）">

<!-- × 説明がない・意味がない -->
<img src="tokyo-tower.jpg" alt="">
<img src="tokyo-tower.jpg" alt="image">
<img src="tokyo-tower.jpg" alt="tokyo-tower.jpg">

装飾目的の画像はalt=””

ロゴや装飾的な画像など、コンテンツに意味を持たない画像はalt属性を空にします。

<!-- 装飾画像・区切り線など -->
<img src="divider.png" alt="">

width・height属性｜サイズの指定

<img src="photo.jpg" alt="写真" width="800" height="600">

width・heightを指定する理由

画像サイズを事前に指定することで、ページ読み込み中のレイアウトのズレ（Cumulative Layout Shift）を防ぎ、Googleのコアウェブバイタル改善につながります。

<!-- 推奨：実際の画像サイズと同じ比率で指定 -->
<img src="hero.jpg" alt="ヒーロー画像" width="1200" height="600">

レスポンシブ画像の実装

CSSで横幅を100%にする（基本）

<img src="photo.jpg" alt="写真" width="800" height="600">

img {
  max-width: 100%;
  height: auto;   /* アスペクト比を保つ */
}

pictureタグで画像を切り替える

デバイスサイズに応じて異なる画像を表示します。

<picture>
  <!-- スマホ向け（600px以下） -->
  <source media="(max-width: 600px)" srcset="photo-small.jpg">
  <!-- タブレット向け（601〜1024px） -->
  <source media="(max-width: 1024px)" srcset="photo-medium.jpg">
  <!-- デフォルト（PC） -->
  <img src="photo-large.jpg" alt="写真" width="1200" height="600">
</picture>

srcset属性で解像度を最適化

Retinaディスプレイ（高解像度画面）向けに複数サイズの画像を用意します。

<img
  src="photo.jpg"
  srcset="photo.jpg 1x, photo@2x.jpg 2x"
  alt="写真"
  width="400"
  height="300"
>

loading属性｜遅延読み込み（Lazy Load）

スクロールして表示領域に入ったときに画像を読み込む設定です。初期表示の高速化に効果的です。

<!-- ファーストビュー以外の画像に設定 -->
<img src="photo.jpg" alt="写真" loading="lazy" width="800" height="600">

<!-- ファーストビューの画像はeagerのまま（デフォルト） -->
<img src="hero.jpg" alt="ヒーロー" loading="eager" width="1200" height="600">

figureタグと組み合わせる

キャプション（説明文）付きの画像には <figure> と <figcaption> を使います。

<figure>
  <img src="chart.png" alt="2024年のWeb制作市場規模グラフ" width="800" height="400">
  <figcaption>図1：2024年のWeb制作市場規模（出典：○○調査）</figcaption>
</figure>

画像が表示されない場合のチェックリスト

[ ] src のパスが正しいか（大文字小文字・スペースに注意）
[ ] 画像ファイルが存在するか
[ ] 拡張子（.jpg .png .webp）が正しいか
[ ] HTMLファイルからの相対パスが正しいか
[ ] サーバーに画像がアップロードされているか

対応している画像フォーマット

フォーマット	特徴	向いている用途
`.jpg` / `.jpeg`	写真向け・圧縮率高	写真・ヒーロー画像
`.png`	透過対応・画質が劣化しない	ロゴ・アイコン・スクショ
`.webp`	jpg/pngより小さいサイズ	あらゆる用途（モダン推奨）
`.gif`	アニメーション対応	アニメーション
`.svg`	ベクター形式・拡大しても劣化しない	ロゴ・アイコン
`.avif`	最新フォーマット・webpより小さい	高解像度画像（最新ブラウザ向け）

まとめ

ポイント	内容
alt属性	必ず設定。画像の内容を具体的に
width・height	CLS対策のため指定する
loading=”lazy”	FV以外の画像に設定して高速化
max-width: 100%	CSSでレスポンシブ対応
WebP形式	容量削減のため積極的に採用

imgタグはHTMLで最もよく使うタグの一つです。alt属性・サイズ指定・遅延読み込みの3点を意識するだけで、SEO・アクセシビリティ・表示速度が向上します。

よかったらシェアしてね！

URLをコピーしました！

この記事を書いた人

Sato Daisuke

大学卒業後、Web制作会社に入社し、コーポレートサイトやECサイト、キャンペーンサイトなど幅広い案件を担当。企画・設計からデザインディレクション、進行管理、納品後の運用改善までトータルで携わる。クライアントの課題整理から戦略立案まで踏み込む提案力と、円滑なチームマネジメントに定評がある。

・Webサイト構築の企画・情報設計
・UI/UX改善提案
・制作進行管理・品質管理
・マーケティング視点での運用改善

Webサイトは“つくって終わり”ではなく、運用しながら成果を伸ばしていくものだと考えています。お客様のビジネスとユーザーの両方にとって価値のあるWebサイトを、戦略から実装まで全力でサポートいたします。