Question 1

When do you use <img> vs CSS background-image?

Accepted Answer

img for content images that need alt and intrinsic sizing; CSS for decorative chrome. Content images belong in HTML for a11y/SEO. Backgrounds don't expose alt and are harder to print/select.

Question 2

Explain srcset and sizes.

Accepted Answer

srcset lists candidates; sizes tells the browser layout width so it picks an appropriate resource. Descriptors can be width (w) or density (x). Wrong sizes causes over/under-fetching. Pair with modern formats.

Question 3

What does the <picture> element solve?

Accepted Answer

Art direction and format negotiation (AVIF/WebP) with fallbacks. source media/type choose among candidates; img is mandatory fallback. Different from srcset-only density switching.

Question 4

How do you make video accessible?

Accepted Answer

Captions/subtitles tracks, transcripts, keyboard controls, no autoplay with sound. Prefer native controls or fully accessible custom players. Describe significant visuals when needed.

Question 5

What are preload, autoplay, and muted on media elements?

Accepted Answer

Hints for buffering and playback policy; autoplay usually requires muted for video. Browsers restrict autoplay. preload=none saves bandwidth. Don't autoplay unexpected audio.

Question 6

How does lazy loading images work in HTML?

Accepted Answer

loading="lazy" defers offscreen images; still provide dimensions to reduce CLS. Critical LCP images should not be lazy. Native lazy is simpler than IntersectionObserver for many cases.

Question 7

Explain object-fit vs changing intrinsic image size.

Accepted Answer

object-fit controls how replaced content fills a box; width/height attributes reserve space. cover/contain are common. Always set dimensions or aspect-ratio to avoid layout shift.

Question 8

How would you deliver responsive hero images efficiently?

Accepted Answer

picture for art direction, AVIF/WebP sources, accurate sizes, high fetchpriority for LCP, no lazy. Compress appropriately. Avoid huge PNG heroes. Measure LCP in the field.

Question 9

What is the track element used for?

Accepted Answer

Timed text tracks like captions, subtitles, descriptions, chapters for media. WebVTT is common. Kind and srclang matter for AT and UX.

Question 10

When is <audio> preferable to embedding third-party players?

Accepted Answer

Simple self-hosted audio with native controls and fewer privacy/perf costs. Third-party players add scripts/trackers. Custom UI must remain accessible.

Question 11

How do you prevent layout shift with media?

Accepted Answer

Reserve space via width/height or CSS aspect-ratio; avoid injecting media without placeholders. Fonts and ads also shift layout — treat media as part of a CLS budget.

Question 12

Architect a media pipeline for a content site.

Accepted Answer

CDN transforms, format negotiation, responsive variants, caching headers, a11y requirements in CMS. Editors need alt requirements. Automate compression. Monitor bandwidth and LCP.

Media HTML Interview Questions

Other HTML interview topics