HTML要素 ・ リンク・画像
<img>
画像を埋め込む
ページに画像を表示します。src 属性で画像ファイルを、alt 属性で画像の内容を説明する代替テキストを指定します。
01
サンプルコード
HTML
1<figure>
2 <img src="photo.jpg" alt="窓辺に置かれた観葉植物" width="320" height="200">
3 <figcaption>図1：alt属性で画像の内容を説明する</figcaption>
4</figure>
CSS
1img {
2 max-width: 100%;
3 height: auto;
4 border-radius: 6px;
5}
6figcaption {
7 font-size: 13px;
8 color: #666;
9}
02
実行結果
ブラウザでの表示
03
解説
img は終了タグを持たない空要素です。src に画像のパス、alt に画像の内容を書きます。
alt は画像が表示できないときや、スクリーンリーダーで読み上げるときに使われます。装飾のための画像なら alt="" と空にします。
CSSで max-width: 100% と height: auto を指定すると、親要素からはみ出さず、縦横比を保ったまま縮小されます。
04
応用例・注意点
主な属性
| 属性 | 説明 |
|---|---|
src | 画像ファイルのパス |
alt | 画像の内容を説明する代替テキスト |
width / height | 表示サイズ。指定するとレイアウトのずれを防げる |
loading="lazy" | 画面に近づくまで読み込みを遅らせる |
srcset | 画面の解像度や幅に応じて画像を切り替える |
画像を遅延読み込みする
ページ下部の画像に loading="lazy" を指定すると、最初の表示が速くなります。
HTML
1<img src="gallery-01.jpg" alt="作品1" loading="lazy" width="640" height="400">
注意点
- 01alt 属性は省略しないでください。
- 02width と height を書いておくと、読み込み中にレイアウトがずれる（CLS）のを防げます。
- 03大きな画像はWebPなどで圧縮し、表示サイズに合わせて用意します。