HTML Living Standard/img

img 要素

<img> 要素は、HTML文書内で画像を埋め込むために使用される要素です。この要素は空要素（self-closing element）であり、終了タグを持ちません。

基本構造

以下は、<img> 要素を使用した基本的な例です：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Image Element Example</title>
  </head>
  <body>
    <img src="example.jpg" alt="Example image">
  </body>
</html>

src 属性で画像のパスを指定し、alt 属性で代替テキストを提供します。

必須属性

src
画像のソースURLを指定します。このURLは絶対パスまたは相対パスで記述できます。
```
<img src="images/photo.jpg" alt="Photo of a beach">
```
alt
画像が表示されない場合やスクリーンリーダーで文書を読む際に利用される代替テキストを指定します。すべての画像に適切なalt属性を設定することは、アクセシビリティを確保するために重要です。
```
<img src="logo.png" alt="Company Logo">
```

オプション属性

以下の属性を使用して、画像の動作や表示を制御できます：

width と height
画像の表示サイズ（ピクセル単位）を指定します。これらの属性は、画像のアスペクト比を維持するために通常セットで使用されます。
```
<img src="photo.jpg" alt="Photo" width="300" height="200">
```
loading
画像の読み込みタイミングを指定します。この属性には次の値を設定できます：
- lazy（遅延読み込み）
- eager（優先読み込み）
- auto（ブラウザのデフォルト）
```
<img src="large-image.jpg" alt="Large image" loading="lazy">
```
decoding
画像のデコード方法を指定します：
- sync（同期）
- async（非同期）
- auto（ブラウザのデフォルト）
```
<img src="graphic.png" alt="Graphic" decoding="async">
```

referrerpolicy

リファラーポリシーを指定します。

<img src="image.jpg" alt="Image" referrerpolicy="no-referrer">

crossorigin

クロスオリジンのリクエスト制御を行います。

<img src="https://example.com/image.jpg" alt="Example image" crossorigin="anonymous">

使用例

基本的な画像

<img src="flower.jpg" alt="A beautiful flower">

サイズ指定

<img src="landscape.jpg" alt="Landscape photo" width="400" height="300">

遅延読み込み

<img src="large-photo.jpg" alt="Large photo of a mountain" loading="lazy">

装飾画像と空の alt 属性

装飾目的の画像は、alt 属性を空にすることでスクリーンリーダーに無視させることができます。

<img src="divider.png" alt="">

注意点

アクセシビリティ:
alt 属性を適切に設定し、すべての画像に説明を提供してください。
画像の最適化:
ファイルサイズを削減し、ページの読み込み速度を向上させるために、画像を圧縮してください。
レスポンシブ画像:
さまざまなデバイスで適切に表示されるよう、<picture> 要素や srcset 属性を活用することが推奨されます。
外部画像:
他サイトの画像を使用する場合、crossorigin 属性や referrerpolicy 属性を適切に設定してください。

練習問題

練習1: <img> 要素を使用して、適切な alt 属性を設定した画像を挿入してください。
練習2: 遅延読み込みを設定した画像を挿入してください。
練習3: サイズを指定して画像を表示し、CSSを使って枠線を追加してください。