Images, figures, and responsive sizing

Images need meaningful alt text and often belong in <figure> with <figcaption>. CSS controls how they scale inside layouts.

HTML checklist

• alt describes purpose (decorative images may use empty alt="").
• width and height attributes reduce layout shift when possible.
• loading="lazy" for below-the-fold images on real sites.

CSS sizing

• max-width: 100%; height: auto; keeps images inside narrow columns.
• object-fit: cover for cropped thumbnails in fixed boxes.

Practice

The sample uses a placeholder gradient block—replace with a real img src when you host assets. Adjust .thumb height and object-fit.

Important interview questions and answers

1. Q: When is `alt=""` correct?
   A: When the image is decorative and surrounding text already conveys meaning.
2. Q: What is layout shift related to images?
   A: Browser reserves space late if dimensions unknown—provide width/height or aspect-ratio.
3. Q: Figure vs bare img?
   A: Figure groups image + caption as one unit of meaning.