HTML <img> タグ

HTMLで画像を埋め込む際の主要な方法は、<img>タグを使用することです。
そして、このタグを正しく機能させるための核心はsrc属性にあります。これは、ブラウザに対して「どこに画像を取りに行くべきか」を伝える役割を担っています。

1.  <img>タグ：画像の埋め込み

<img>タグは、ウェブページ内に画像を埋め込むためのHTML要素です。

• 空要素（Empty Element）： <p>や<a>とは異なり、<img>は空要素（セルフクロージングタグとも呼ばれます）です。つまり、終了タグを必要としません。
• 基本構造：

<img src="画像のURLアドレス">

インライン要素： デフォルトでは、画像はインライン要素（inline element）として扱われます。これは、テキストと同じ行に配置され、その行に収まりきらなくなった場合にのみ改行されることを意味します。

1.1 なぜ  タグが重要なのか？

• 視覚的コミュニケーション： テキストよりも効果的に感情やブランドイメージを伝えます。
• ユーザーエンゲージメント： 魅力的なコンテンツはユーザーの滞在時間を延ばします。
• コンテンツの明確化： チャートや写真は、複雑な説明をシンプルに理解させる助けになります。

2. src 属性：画像ソースの指定

srcは「source（ソース）」の略称であり、<img>タグにおいて最も重要な属性です。

srcが指定されていないと、ブラウザは何を表示すべきか判断できず、画像の表示領域は空白になってしまいます。srcの値はURL（Uniform Resource Locator）であり、絶対パスまたは相対パスのいずれかを使用します。

3. alt 属性：画像の説明（代替テキスト）

alt属性は、画像の内容を説明する代替テキスト（Alternative Text）を提供します。

リンク切れやネットワークの問題、あるいはユーザーが画像表示をオフにしているなどの理由で画像が読み込めない場合、このテキストが表示されます。さらに重要なのは、スクリーンリーダーがこのテキストを読み上げることで、視覚障害を持つユーザーも画像の内容を理解できるようになる点です。

注意： 標準的なHTMLにおいて、alt属性は必須です（内容が空であっても記述する必要があります）。

3.1 なぜ alt 属性がそれほど重要なのか？

• アクセシビリティ（Accessibility）： スクリーンリーダーはaltテキストを使用して、視覚障害者に画像の内容を説明します。
• SEO（検索エンジン最適化）： Googleなどの検索エンジンは画像を直接「見る」ことができません。彼らはaltテキストを頼りに画像の内容を理解し、それが検索ランキングの向上につながります。
• ユーザー体験（UX）： 画像のロードに失敗した場合でも、altテキストがコンテキストを提供するため、ユーザーは「壊れた画像アイコン」だけを見て困惑することを防げます。

3.2 alt テキスト作成のベストプラクティス

• 説明的かつ簡潔に： 画像の内容を正確に描写します。
• コンテキスト（文脈）が不可欠： 周囲のコンテンツに関連したテキストにします。
• 重複を避ける： 本文中に既に存在する情報を繰り返さないようにします。

alt テキストの例：

<img src="images/golden-retriever.jpg" alt="砂浜を走るゴールデンレトリバー">

このテキストは画像を正確に描写しており、画像が見えないユーザーにも適切な文脈を提供します。

4. width と height 属性：画像サイズの制御

width（幅）とheight（高さ）属性は、画像のサイズをピクセル単位で指定します。

これらは画像のリサイズにも使えますが、主な目的は画像がロードされる際の表示スペースを確保することにあります。これにより、画像の読み込みに伴ってページレイアウトがガタつくのを防ぎ、ユーザー体験を向上させることができます。

4.1 なぜこれらの属性が重要なのか？

• レイアウトシフト（Layout Shift）の防止： 幅と高さを指定することで、ブラウザは画像をダウンロードする前にその占有面積を把握できます。これにより、読み込み中にコンテンツが突然動く「CLS（Cumulative Layout Shift）」という現象を防げます。
• パフォーマンスの向上： モダンブラウザは非常にスマートですが、明示的にサイズを設定することで、特に低スペックなデバイスにおいてレンダリングパフォーマンスをわずかに向上させることができます。

4.2 実装のベストプラクティス

• オリジナルのアスペクト比（比率）を使用する： 理想的には、属性値は画像の元の比率と一致させるべきです。片方（例：widthのみ）を指定した場合、ブラウザは比率を維持するために、もう一方を自動的に計算します。両方を指定する場合は、画像が歪まない（引き伸ばされたり圧縮されたりしない）よう、正しい比率であることを確認してください。
• スケーリング目的での使用を避ける： 大きな画像をこれらの属性で小さく表示することは可能ですが、レスポンシブなサイズ調整にはCSSを使用するのがベストです。また、大きな画像をダウンロードして小さく表示するのは、ユーザーのデータ通信量とロード時間の無駄になります。
• 単位を書かない： HTML属性の属性値は数値（ピクセル数）のみを記述します。「px」は付けないでください。

例 1：幅と高さを同時に指定する場合

<img src="images/landscape.jpg" alt="美しい風景" width="600" height="400">

これはブラウザに対し、600x400ピクセルのスペースを確保するよう指示します。これが元の画像の比率と一致していることを確認してください。

例 2：幅のみを指定する場合

<img src="images/portrait.jpg" alt="人物の肖像画" width="300">

ブラウザは比率を維持するために、高さを自動的に計算します。

例 3：CSSと組み合わせてレスポンシブデザインを実現する場合

<img src="images/responsive.jpg" alt="レスポンシブの例" width="800" height="600" style="width: 100%; height: auto;">

これはモダンなウェブ開発における一般的なテクニックです：

1. HTMLの width="800" height="600" でスペースを確保（レイアウトシフトを防止）。
2. CSSの width: 100%; height: auto; でHTML属性を上書きし、画面サイズにフィットさせる。（注：デモのためにインラインスタイルを使用していますが、実務では外部CSSファイルに記述することを推奨します。）

5. ブラウザはどのように画像をレンダリングするのか？

舞台裏のメカニズムを理解しておくと役立ちます：

1. ブラウザが<img>タグに遭遇します。
2. srcを確認し、画像のソース（保存場所）を特定します。
3. 重要なステップ： widthとheight属性がある場合、ブラウザは即座にページレイアウト内に空白の矩形（プレースホルダー）を描画します。
4. ブラウザはサーバーに対して画像のダウンロードリクエストを送ります。
5. 画像のダウンロードが完了すると、その矩形の中に画像が流し込まれます。

もしこれらの属性がない場合、ブラウザは最初、画像のサイズがわかりません。そのため、とりあえず後のテキストを先にレンダリングします。画像がダウンロードし終わった後で、ブラウザが「おっと、この画像は高さが500pxもあったのか」と気づき、慌てて後ろのテキストを下に押し下げます。これが、ページが突然「ジャンプ」する理由です。