Images

The <img> element embeds raster artwork or photographs. It is a void element—no closing tag—and requires thoughtful alt text.

Required semantics

• src resolves to image bytes (relative or absolute URL).
• alt communicates equivalent information for screen readers and appears when images fail to load.
• width / height reserve intrinsic dimensions to reduce layout shift.

<img
  src="/images/baby-icon.webp"
  width="525"
  height="350"
  alt="Illustrated icon-style portrait of a baby wearing a bib"
>

Rendered output (/public/images/baby-icon.webp in this project)

width/height match intrinsic pixels (525×350) so layout stays stable before CSS clamps the visual size.

Example — informative photograph

<img
  src="/images/black-golden-retriever-with-a-blue-dummy.webp"
  width="1773"
  height="1182"
  alt="Golden retriever holding a blue bumper toy while standing outdoors on grass."
  loading="lazy"
>

Rendered output

Decorative vs informative

• Informative: describe succinctly what the image conveys (alt="Chart showing Q3 revenue up 12%").
• Purely decorative: use alt="" so assistive tech skips ornamentation.
• Functional images inside links/buttons: alt text should describe the action.

Responsive delivery

• srcset + sizes pick resolutions for device pixels.
• <picture> swaps formats (AVIF/WebP) or artistic crops.
• loading="lazy" defers offscreen downloads.

Performance hygiene

• Serve appropriately compressed formats (often WebP/AVIF with fallbacks).
• Use CDN caching headers for immutable filenames.
• Avoid scaling giant bitmaps purely via CSS width.

What developers underestimate

• sizes / srcset correctness: wrong sizes forces browsers to download images far larger than rendered—profiles with DevTools networking + real devices.
• CLS from missing dimensions: always pair width/height (or intrinsic aspect-ratio CSS) unless you knowingly accept shifting layout penalties.
• Charts as bitmaps-only: complex graphs need summaries for screen readers; alt text has length limits mentally—combine with textual data tables nearby when needed.
• Bypassing CSP on images? you still leak metadata / tracking pixels—privacy reviews include img sources.

Why lazy loading alone is insufficient

Browsers may still fetch prioritized above-the-fold images eagerly; prioritize LCP image with hints (fetchpriority) and avoid hero carousels that delay meaningful paint without user intent.

Important interview questions and answers

1. Q: What makes image delivery accessible and performant?
   A: Meaningful `alt`, correct intrinsic `width`/`height`, and responsive sources (`srcset`/`sizes` or `picture`) based on viewport needs.
2. Q: When do you use a table in HTML?
   A: Only for real tabular data, not page layout; use `th`, `scope`, and `caption` to preserve structure for assistive tech.
3. Q: What is the role of the `head` element in production apps?
   A: It provides critical metadata like charset, viewport, title, canonical/social tags, and linked resources used by browsers and crawlers.