Interview Question

How do you create responsive images?

Use srcset and sizes to avoid sending an image larger than needed.

💡 Concept ✅ Quick Revision 🌐 HTML

Answer

Responsive images let the browser choose a suitable file for the screen. • Use `srcset` and `sizes`, or `<picture>` when the image crop must change. • Prefer native HTML elements before adding custom scripted behavior. • Test the result with a keyboard, a small screen, and browser developer tools.

💡 Simple Example

<img src="small.jpg" srcset="small.jpg 480w, large.jpg 1200w" sizes="100vw" alt="Mountain">

⚡ Quick Revision

Use srcset and sizes to avoid sending an image larger than needed.