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

この記事でわかること

結論を先に書きます

<img>タグは、HTMLで画像を表示するためのタグです。終了タグ（</img>）は不要な自己終了タグで、src属性で画像のパスを、alt属性で代替テキストを指定します。

押さえるべきポイントは多くありません。==alt属性・サイズ指定（width/height）・遅延読み込み（loading=”lazy”）の3点==を意識するだけで、SEO・アクセシビリティ・表示速度がまとめて向上します。

基本のコードはこの1行です。終了タグがないため、

や<div>のように閉じる必要はありません。

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

この記事では、各属性の意味から実務で使うレスポンシブ実装までを順に整理します。HTMLタグ全体を見渡したいときはHTMLタグ一覧もあわせて確認してください。

imgタグの主要な属性一覧

最初に、タグで使う主な属性を整理します。最低限srcとaltの2つがあれば画像は表示できますが、実務ではwidth・height・loadingまで指定するのが基本です。

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

表のとおり、srcとaltは省略しないのが原則です。次の章から、それぞれの書き方を具体的に見ていきます。

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

src属性には、表示したい画像ファイルの場所を指定します。指定方法は相対パスと絶対パス（フルURL）の2種類です。

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

自サイト内の画像は、HTMLファイルから見た相対的な位置で指定します。階層の上り下りはフォルダ構成に合わせて書きます。

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




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



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

絶対パス（フルURL）

外部サイトの画像を表示する場合や、CDN上の画像を読み込む場合はフルURLで指定します。自サイト内の画像は相対パス、外部の画像はフルURLと覚えておくと迷いません。

<img src="https://example.com/images/photo.jpg" alt="写真">

パスの基本的な考え方は、リンクのhrefと共通します。リンクの書き方はaタグの使い方で詳しく解説しています。

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

alt属性は画像の内容を説明する代替テキストです。見落とされがちですが、実は3つの重要な役割を担っています。

つまりalt属性は、人にも検索エンジンにも、そして読み込み失敗時にも効くということです。alt属性は必ず設定するのが基本姿勢になります。

altテキストの書き方（良い例・悪い例）

altテキストは「画像に何が写っているか」を具体的に書きます。ファイル名そのままやimageといった中身のない記述は、設定していないのとほぼ同じです。

<!-- ○ 画像の内容を具体的に説明 --> <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属性を空（alt=""）にします。空にすることで、スクリーンリーダーが不要な読み上げをスキップできます。

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

「意味のある画像は具体的に書く・装飾画像は空にする」と使い分けるのがポイントです。

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

widthとheightで、画像の表示サイズを指定します。指定しなくても画像は表示されますが、実務では指定するのが基本です。

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

width・height を指定する理由

理由はシンプルで、レイアウトのズレ（CLS：Cumulative Layout Shift）を防ぐためです。サイズを事前に伝えておくと、ブラウザは画像の読み込み前に表示領域を確保できます。これによりページ読み込み中のガクッとしたズレが起きにくくなり、GoogleのコアウェブバイタルというUX指標の改善にもつながります。

サイズは、実際の画像と同じ縦横比で指定するのが基本です。

<img src="hero.jpg" alt="トップ画像" width="1200" height="600">

レスポンシブ画像の実装

スマホ・タブレット・PCで画面幅が違っても画像が崩れないようにする工夫が、レスポンシブ対応です。方法は段階的に3つあります。

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

まずはこれだけで十分なケースが多いです。HTML側で実サイズを指定し、CSS側でmax-widthとheightを調整します。

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

max-width: 100%で「親要素の幅を超えない」、height: autoで「縦横比を保つ」という意味になります。CSSの基本的な書き方はCSSとは？書き方の基本で解説しています。

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

画面サイズごとに別の画像ファイルを出し分けたいときはを使います。スマホには軽い画像、PCには大きい画像、といった切り替えが可能です。

<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ディスプレイなどの高解像度画面向けに、複数サイズの画像を用意して自動で出し分ける方法です。1xが標準解像度、2xが高解像度向けを表します。

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

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

loading="lazy"は、画像がスクロールして表示領域に近づいたときに読み込む設定です。最初に全画像を読み込まずに済むため、初期表示の高速化に効果があります。

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




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

使い分けのコツは、最初に見える画像（ファーストビュー）には付けないことです。ファーストビューにlazyを付けると、かえって表示が遅れて見える場合があります。下の方にある画像にだけlazyを付けるのが基本です。

figureタグと組み合わせる

図表や写真にキャプション（説明文）を添えたいときは、

と