HTMLの <img> タグは、ウェブページに画像を埋め込むために使用されるインライン要素です。このタグはセルフクロージングタグであり、閉じタグが不要です。
<img> タグの基本的な構文
<img src="image.jpg" alt="画像の代替テキスト">必須の属性
- src (source): 画像ファイルのパスを指定します。これはローカルパスやウェブ上のURLのどちらも可能です。
- alt (alternative text): 画像が表示されない場合や、視覚障害を持つユーザーがスクリーンリーダーを使用している場合に、画像の内容を説明するテキストを提供します。
任意の属性
- title: 画像にマウスカーソルを合わせたときに表示される追加情報を提供します。
- width と height: 画像の幅と高さをピクセル単位で指定します。CSSでスタイリングすることも一般的です。
- class、id、style: CSSスタイリングのための標準的なHTML属性です。
<img> タグの使用例
<img src="images/photo.jpg" alt="青い空と白い雲" width="300" height="200">このコードは、images ディレクトリ内の photo.jpg という名前の画像ファイルをページに挿入し、その画像の幅を300ピクセル、高さを200ピクセルに設定しています。
<img> タグのベストプラクティス
- 適切なaltテキスト:
alt属性は、画像が何を表しているかを簡潔に説明すべきです。これはアクセシビリティとSEOの両方において非常に重要です。 - 画像の最適化: ページの読み込み速度を向上させるために、適切なファイルサイズと形式（例: JPEG、PNG、GIFなど）で画像を提供することが重要です。
- レスポンシブ画像: 異なるデバイスや表示サイズに適応するために、
srcset属性や<picture>要素といったレスポンシブ画像のテクニックを利用することが推奨されます。
<img> タグは、ウェブページに視覚的な要素を加え、ユーザーエクスペリエンスを豊かにするための基本的なツールです。適切に使用された <img> タグは、ページの視覚的な魅力を高めるだけでなく、検索エンジン最適化にも寄与し、ウェブのアクセシビリティを向上させることができます。