Interview Question

What are srcset and sizes used for?

`srcset` lists candidates; `sizes` helps the browser choose the right width candidate.

💡 Concept ✅ Quick Revision 🌐 HTML

Answer

`srcset` supplies image candidates, and `sizes` describes the expected rendered width for width-based candidates. • Each `srcset` candidate includes a URL and a width or pixel-density descriptor. • The browser combines `srcset`, `sizes`, viewport information, and device characteristics to choose a resource. • The `<img>` still needs `src` and appropriate alternative text.

💡 Simple Example

<img src="/images/team-640.jpg" srcset="/images/team-640.jpg 640w, /images/team-1280.jpg 1280w" sizes="(max-width: 700px) 100vw, 700px" alt="The school robotics team" width="700" height="394">

⚡ Quick Revision

`srcset` lists candidates; `sizes` helps the browser choose the right width candidate.