Answer
Responsive image loading lets the browser choose an image resource suited to the layout and device. • Use `srcset` and `sizes` for resolution switching. • Use `<picture>` when art direction or file-format selection is required. • Provide dimensions and useful alternative text on the fallback `<img>`.
💡 Simple Example
<picture><source type="image/avif" srcset="/images/campus.avif"><source type="image/webp" srcset="/images/campus.webp"><img src="/images/campus.jpg" alt="The school campus at sunrise" width="1200" height="675"></picture>
⚡ Quick Revision
Responsive images use srcset, sizes, or picture while preserving a correct img fallback.