Images and responsive media

Use meaningful `alt` for informative images and `alt=""` for decorative ones. `width` and `height` reserve space to limit layout shift. `srcset` and `sizes` let the browser pick density-appropriate resources; `picture` supports art direction and format fallbacks.

					<img
  src="hero-800.jpg"
  srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="450"
  alt="Dashboard showing weekly revenue"
  loading="lazy"
>
				

Do not lazy-load the LCP image; preload or prioritize it instead.

On interviews: alt roles, CLS, responsive images, and modern formats (AVIF/WebP).

Common pitfalls: keyword-stuffed alt text; missing dimensions causing CLS; lazy-loading the hero LCP image.

The trade-off is bandwidth savings versus sharpness and early paint — responsive sources help, but over-eager lazy loading delays critical content.

Checklist:

• Write useful alt text.
• Set intrinsic dimensions.
• Use `srcset`/`sizes` or `picture`.
• Avoid lazy-loading critical above-the-fold images.