Webページに画像を表示したいとき、使うのが<img>タグです。
「タグってそもそも何？」という方でも理解できるよう、
基本の仕組みからよくある間違いまで、順番に説明していきます。
そもそも<img>タグって何？
HTMLには、Webページの構造や内容を表現するための「タグ」と呼ばれる命令文がたくさんあります。
<img>タグはそのひとつで、ページに画像を埋め込むための命令です。
ちょっと想像してみてください。HTMLファイルはあくまで「テキストの塊」です。
そのままでは画像そのものを含むことができません。
そこで<img>タグを使い、
「ここにこの画像ファイルを表示してください」
とブラウザに指示する、というのが基本の仕組みです。
最もシンプルな書き方
<img>タグの最低限の書き方はこうです。
html
<img src="画像ファイルのパス" alt="画像の説明文">srcとalt、この2つの属性（attribute）がセットで必須と覚えておきましょう。
属性というのは、タグに追加情報を渡すための仕組みです。属性名="値"という形で書きます。
また、<img>タグは少し特殊で、</img>のような閉じタグが不要です。
HTMLタグの多くは<p>〜</p>のように開いて閉じますが、
<img>は画像を「挿入する」だけなので、それ自体が単独で完結します。
src属性｜どの画像を表示するかを指定する
srcはsource（ソース＝出所）の略で、表示したい画像ファイルの場所を指定します。
画像の置いてある場所がどこかってコトだね。
指定方法は大きく2種類あります。
① 相対パス（同じサイト内の画像を使う場合）
<img src="images/photo.jpg" alt="風景写真">これは「imagesというフォルダの中にあるphoto.jpgを表示して」という意味です。
HTMLファイルと画像ファイルの位置関係をもとに記述するため「相対パス」と呼ばれます。
例えるなら、自宅から学校までの道を説明する感じ。
② 絶対パス（外部サイトや完全なURLで指定する場合）
<img src="https://example.com/images/photo.jpg" alt="風景写真">URLをそのまま完全に書く方法です。
外部サイトにある画像を使うときや、
WordPressのメディアライブラリにアップした画像を埋め込むときはこちらの形になります。
例えるなら、学校の場所を「住所」で伝える感じ。
初心者のうちにありがちなミスとして、パスの記述ミスがあります。
| よくある間違い | 問題点 |
|---|---|
src="Images/photo.jpg" | フォルダ名の大文字・小文字が違う（環境によってはエラー） |
src="photo.jpg" | 画像がサブフォルダにあるのにパスを省略している |
src="" | srcが空になっている |
パスを間違えると画像が表示されず、代わりに「壊れた画像アイコン」が出てしまいます。
ファイル名やフォルダ名はコピペして使うのが確実です。
alt属性｜画像が表示されないときの「代替テキスト」
altはalternative（代替）の略です。
画像が何らかの理由で表示できないときに、代わりにテキストとして表示されます。
<img src="images/cat.jpg" alt="窓辺でひなたぼっこしている茶色い猫">「画像が表示できないなんてそんな状況あるの？」と思うかもしれませんが、実際にはよく起きます。
たとえば通信速度が遅くて画像が読み込めないとき、
あるいはスクリーンリーダー（視覚に障がいのある方が使う読み上げソフト）がページを読み上げるときなどです。
altテキストはSEOにも影響します。
Googleなどの検索エンジンは画像の内容そのものを完全に認識できないため、
altテキストを頼りに「この画像は何か」を判断します。
適切に書いておくと、画像検索での表示にも有利になります。
altの書き方のポイント
- 画像の内容を具体的に書く（「写真」「画像」だけはNG）
- 長すぎず、1〜2文程度が目安
- 装飾目的だけの画像（区切り線の画像など）は
alt=""と空にするのが正しい
<!-- NG例：内容が伝わらない -->
<img src="images/cat.jpg" alt="画像">
<!-- OK例：具体的に説明できている -->
<img src="images/cat.jpg" alt="窓辺でひなたぼっこしている茶色い猫">
<!-- 装飾画像の場合：altは空でOK -->
<img src="images/divider.png" alt="">よく使う属性｜widthとheightでサイズを指定する
表示サイズを指定したいときはwidth（横幅）とheight（高さ）を使います。
単位はピクセル（px）で、数値だけを書きます。
<img src="images/photo.jpg" alt="風景写真" width="800" height="600">現代のWeb制作では、サイズ調整はCSSで行うことが多いですが、
widthとheightをHTML側に書いておくことには別のメリットがあります。
ブラウザが画像を読み込む前から「この画像はこのサイズ」と把握できるため、
ページが読み込まれる途中にレイアウトがガクッとずれる現象（レイアウトシフト）を防ぎやすくなります。
特にWordPressで記事を書く場合、画像を挿入するとこれらの属性が自動で付いてくることがほとんどです。
loading="lazy"｜画像の読み込みを遅らせてページを速くする
少し応用になりますが、覚えておくと便利な属性がloading="lazy"です。
<img src="images/photo.jpg" alt="風景写真" width="800" height="600" loading="lazy">通常、ページを開くとすべての画像が一度に読み込まれます。
loading="lazy"を追加すると、画面に表示される直前になってはじめて読み込むという動作に変わります。
画像が多いページでページ速度を改善したいときに有効な手法です。
画像が怠けるってどういう意味？と思ってたけど、ゆっくりってニュアンスもあるんだね。
まとめ
<img>タグについて整理すると、こうなります。
| 属性 | 役割 | 必須？ |
|---|---|---|
src | 画像ファイルの場所を指定 | ✅ 必須 |
alt | 代替テキスト（SEO・アクセシビリティにも影響） | ✅ 必須 |
width / height | 表示サイズを指定 | 推奨 |
loading="lazy" | 遅延読み込みでページを高速化 | 任意 |
<img>タグ自体はシンプルですが、srcとaltをきちんと書くだけでSEOやアクセシビリティに大きく差が出ます。まずはこの2つを確実に書けるようになることが第一歩です。
HTMLを書き慣れてきたら、CSSと組み合わせて画像のサイズやレイアウトを細かくコントロールする方法も学んでいくと、できることがぐっと広がりますよ。
