Web ページに写真やイラストを表示したいとき、HTML では <img> 要素を使います。一見すると「画像のファイルを指定するだけ」のシンプルな要素ですが、実は alt や width・height、loading、srcset といった属性を正しく使うかどうかで、アクセシビリティ・SEO・表示速度・レイアウトの安定性が大きく変わります。この記事では、<img> の基本から主要な属性の役割までを、初心者の方にも分かるよう順を追って解説します。コピーして手元で試しながら読み進めてみてください。
目次
img 要素の基本
<img> は、HTML ページに画像を埋め込むための要素です。最低限必要なのは、画像ファイルの場所を指す src 属性と、画像の内容を説明する alt 属性の2つです。次のように書くと、指定したファイルがその位置に画像として表示されます。
<img src="cat.jpg" alt="窓辺で丸くなって眠る茶トラの猫">ここで押さえておきたいのが、<img> は空要素（からようそ）だということです。<p> や <div> のように中身を囲む要素ではなく、それ自体が1つの内容を表すため、</img> のような閉じタグは存在しません。<br> や <hr> と同じ仲間だと考えてください。HTML では <img ...> とだけ書けば十分で、末尾の / を付けて <img ... /> と書いても間違いではありません（どちらも同じ意味になります）。
主要な属性の一覧
<img> には多くの属性がありますが、まずは実務でよく使う主要なものの役割を一覧で確認しておきましょう。それぞれの詳しい使い方は、このあとの見出しで順に説明します。
| 属性 | 役割 |
|---|---|
src | 表示する画像ファイルの場所（URL やパス）を指定する。必須の属性。 |
alt | 画像の内容を表す代替テキスト。画像が表示できないときに代わりに表示され、スクリーンリーダーが読み上げる。 |
width / height | 画像の幅・高さ（ピクセル）。あらかじめ表示領域を確保し、レイアウトのズレ（CLS）を防ぐために指定する。 |
loading | lazy を指定すると、画面に近づくまで読み込みを遅らせる（遅延読み込み）。 |
decoding | 画像のデコード（描画準備）方法を指定する。async で他の表示処理をブロックしにくくする。 |
srcset / sizes | 解像度や画面幅に応じて、複数の画像から最適な1枚をブラウザに選ばせる。 |
title | マウスを乗せたときに出る補足のツールチップ。alt の代わりにはならない。 |
src で画像ファイルを指定する
src（source の略）は、表示したい画像ファイルの場所を指定する属性です。これがないと画像は表示されません。指定の仕方には大きく2通りあり、同じサイト内のファイルを指す相対パスと、外部のファイルを指す絶対 URLがあります。
<!-- 同じサイト内の images フォルダにあるファイル（相対パス） -->
<img src="images/logo.png" alt="サンプル会社のロゴ">
<!-- 外部サイトのファイル（絶対 URL） -->
<img src="https://example.com/images/logo.png" alt="サンプル会社のロゴ">画像が表示されないときは、まずこの src のパスが正しいかを疑ってください。HTML ファイルから見て、画像ファイルがどのフォルダにあるのかを基準にパスを書きます。ファイル名の大文字・小文字（Logo.png と logo.png など）はサーバー環境によっては区別されるため、実際のファイル名と完全に一致させることも大切です。
alt 属性と代替テキストの書き方
alt は alternative text（代替テキスト）の略で、画像の内容を文章で説明する属性です。地味に見えますが、<img> でもっとも重要な属性のひとつと言ってよいでしょう。alt は次の3つの場面で働きます。
1つ目は画像が表示できないときです。通信エラーやパスの誤りで画像が読み込めない場合、ブラウザは画像の代わりに alt のテキストを表示します。2つ目はアクセシビリティです。目の不自由な人が使うスクリーンリーダーは画像そのものを読めないため、alt の文章を読み上げて画像の内容を伝えます。3つ目はSEO（検索エンジン最適化）です。検索エンジンも画像の中身を直接は理解できないので、alt の内容を手がかりに「この画像が何を表しているか」を判断します。
内容を表す簡潔な説明を書く
alt には、その画像が何を表しているかを簡潔に、過不足なく書きます。「画像」「写真」「img001」のような中身の分からない文言や、ファイル名をそのまま入れるのは避けましょう。一方で、見れば分かる細部まで長々と書く必要はありません。次の例のように、その画像が伝えたいことを一文で表すのが目安です。
<!-- 良い例：内容が伝わる簡潔な説明 -->
<img src="chart.png" alt="2025年の売上が前年比120%に伸びた棒グラフ">
<!-- 避けたい例：中身が分からない -->
<img src="chart.png" alt="画像">
<img src="chart.png" alt="chart.png">なお、alt の中に「〜の画像」「〜の写真」と入れる必要は基本的にありません。スクリーンリーダーは <img> を読むときに「画像」であることを自動で伝えるため、文中で重ねて言うと冗長になります。画像の内容だけを素直に書くのがコツです。
装飾だけの画像は alt=”” にする
すべての画像に説明を書けばよい、というわけではありません。背景の飾り罫やアイコンなど、内容に意味を持たない純粋な装飾画像の場合は、alt="" のように空の値を指定します。こうすると、スクリーンリーダーはその画像を「読み飛ばしてよいもの」と判断し、不要な読み上げを行いません。
<!-- 意味を持たない装飾の区切り線：alt は空にする -->
<img src="divider.svg" alt="">ここで大切なのは、alt 属性そのものを省略するのと、alt="" と空にするのは意味が違うという点です。alt="" は「これは装飾であり、説明は不要」という明確な意思表示になります。一方、属性ごと書き忘れると、スクリーンリーダーによっては代わりにファイル名を読み上げてしまうことがあり、かえって邪魔になります。装飾画像でも alt 属性自体は必ず書き、値だけを空にしてください。
width と height でレイアウトのズレを防ぐ
width と height は、画像の幅と高さをピクセル単位で指定する属性です。これらを指定する最大の目的は、レイアウトシフト（CLS）の防止です。CLS（Cumulative Layout Shift）とは、ページの読み込み中に表示位置が突然ズレる現象のことで、読んでいた文章が画像の読み込みで下に押し下げられる、といった体験を指します。Google もページ品質の指標として重視しています。
width・height を書いておくと、画像本体がまだ読み込まれていなくても、ブラウザは「ここに横◯×縦◯の画像が入る」と分かり、あらかじめその分の場所を確保できます。結果として、画像が遅れて表示されても周囲のテキストがガタッと動くことがなくなります。
<!-- 元画像のサイズ（800×600）を指定して表示領域を確保 -->
<img src="photo.jpg" alt="海沿いを走る赤い自転車" width="800" height="600">指定する値は、原則として元画像の実際のピクセルサイズにします。ここで「CSS で幅を変えたら高さがおかしくならないの？」と疑問に思うかもしれませんが、近年のブラウザは width・height から縦横比（アスペクト比）を計算します。そのため、CSS で max-width: 100%; のように幅を可変にしても、比率を保ったまま高さが自動調整されます。width・height は表示サイズの固定ではなく、あくまで比率と確保領域を伝えるための情報だと考えると分かりやすいでしょう。レスポンシブ対応のための CSS（max-width や object-fit など）は別の話題になるため、ここでは深入りしません。
loading と decoding で表示を最適化する
ページに画像が多いほど、すべてを最初に読み込もうとすると表示が重くなります。そこで役立つのが loading 属性です。loading="lazy" を指定すると、その画像が画面に近づくまで読み込みを遅らせる遅延読み込み（lazy loading）が有効になります。ページ下部にあって最初は見えない画像に付けておくと、初期表示が速くなり、ユーザーがスクロールして近づいたタイミングで読み込まれます。
もう一つの decoding 属性は、画像をデコード（画面に描く準備）するタイミングを制御します。decoding="async" を指定すると、デコード処理を非同期で行い、他のコンテンツの表示をブロックしにくくなります。次の例のように、両方を組み合わせて使うことが多いです。
<img
src="gallery-05.jpg"
alt="紅葉に染まった山あいの渓谷"
width="1200"
height="800"
loading="lazy"
decoding="async">ここで注意が必要なのは、ページを開いてすぐ見える位置（ファーストビュー）の画像には loading="lazy" を付けないという点です。最初から見えている画像を遅延読み込みにすると、かえって表示が遅れてしまい逆効果になります。loading="lazy" は「スクロールしないと見えない画像」に対して使うもの、と覚えておきましょう。
srcset と sizes で画像を出し分ける
スマートフォンの小さな画面と、デスクトップの大きな画面に、同じ大きさの画像を1枚だけ用意するのは効率がよくありません。スマホには大きすぎて通信量の無駄になり、高精細なディスプレイには逆に粗く見えることもあります。そこで使うのが srcset と sizes です。複数のサイズの画像を用意しておき、画面幅や解像度に応じて最適な1枚をブラウザに選ばせる仕組みです。
srcset には「画像ファイルとその実寸の幅」をカンマ区切りで並べます。480w は「この画像の横幅は480ピクセルですよ」という意味です。sizes には「どのくらいの表示幅で見せるか」を条件付きで書き、ブラウザはこの2つを照らし合わせて、無駄なく十分な画質になる画像を選びます。
<img
src="img-800.jpg"
srcset="img-480.jpg 480w, img-800.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="開店前のカフェの店内"
width="800"
height="533">この例の sizes は、「画面幅が600ピクセル以下なら画像を480pxの幅で表示し、それ以外では800pxの幅で表示する」という意味です。ブラウザはこの表示幅と、画面の解像度（高精細ディスプレイかどうか）を考慮して、srcset の中から最適なファイルを自動的に選びます。src には、srcset に対応していない古いブラウザ向けのフォールバック（標準で読み込む1枚）を指定しておきます。
なお、srcset は「同じ絵柄を異なるサイズで出し分ける」用途に向いています。「スマホでは縦長に切り抜く」「PCでは横長で見せる」のように、画面サイズによって絵柄そのものを変えたい（アートディレクション）場合は、<picture> 要素と <source> を組み合わせます。<picture> については別の記事で扱いますが、まずは「サイズ違いの出し分けは srcset、絵柄違いの出し分けは <picture>」という役割分担を押さえておくとよいでしょう。
title 属性は alt の代わりにならない
title 属性を指定すると、画像にマウスを乗せたときに小さなツールチップ（補足説明）が表示されます。一見すると alt と似ていますが、役割はまったく異なります。title はあくまで補足的な情報であり、マウス操作が前提のため、スマートフォンのタッチ操作では表示されないことが多く、スクリーンリーダーでの扱いも一定しません。
そのため、画像の説明を title だけに頼るのは避けてください。画像の内容を伝える役割は alt が担い、title は「あれば便利な追加情報」程度に考えるのが適切です。多くの場合、title を無理に付ける必要はなく、まずは alt を丁寧に書くことを優先しましょう。
まとめ
<img> は閉じタグの不要な空要素で、画像の場所を指す src と内容を説明する alt が基本の2属性です。alt は画像の内容を簡潔に書き、意味のない装飾画像は alt="" として読み飛ばさせます。width と height は元画像のサイズを指定して表示領域を確保し、レイアウトのズレ（CLS）を防ぎます。スクロールしないと見えない画像には loading="lazy" を付けて遅延読み込みにし、ファーストビューの画像には付けないのがコツです。decoding="async" で描画をブロックしにくくし、サイズ違いの画像を出し分けたいときは srcset と sizes を使います。title は alt の代わりにはならない補足情報です。これらの属性を場面に応じて使い分ければ、速くて見やすく、誰にとっても親切な画像表示ができるようになります。