Summary  
This chapter covers using the `srcset` and `sizes` attributes to serve different image resolutions based on device and viewport size, improving performance and accessibility with descriptive alt text and appropriately sized images.

General domain of usage  
Web development

Responsive images adapt to different screen sizes using the `srcset` and `sizes` attributes. This approach allows you to serve different versions of an image depending on the user's device, ensuring that images look good and load efficiently on all screens. Instead of always sending the largest image, you can provide a set of images at various resolutions and let the browser choose the best one based on the device's display and viewport size.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPlJlc3BvbnNpdmUgSW1hZ2VzIEV4YW1wbGU8L3RpdGxlPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxoMT5SZXNwb25zaXZlIEltYWdlcyB3aXRoIHNyY3NldCBhbmQgc2l6ZXM8L2gxPgogICAgPGltZwogICAgICBzcmM9ImltYWdlcy9waG90by1zbWFsbC5qcGciCiAgICAgIHNyY3NldD0iCiAgICAgICAgaW1hZ2VzL3Bob3RvLXNtYWxsLmpwZyAgIDQ4MHcsCiAgICAgICAgaW1hZ2VzL3Bob3RvLW1lZGl1bS5qcGcgIDgwMHcsCiAgICAgICAgaW1hZ2VzL3Bob3RvLWxhcmdlLmpwZyAgMTIwMHcKICAgICAgIgogICAgICBzaXplcz0iKG1heC13aWR0aDogNjAwcHgpIDQ4MHB4LCAobWF4LXdpZHRoOiA5MDBweCkgODAwcHgsIDEyMDBweCIKICAgICAgYWx0PSJBIHNjZW5pYyBtb3VudGFpbiBsYW5kc2NhcGUgd2l0aCBhIGxha2UgaW4gdGhlIGZvcmVncm91bmQiCiAgICAvPgogICAgPHA+CiAgICAgIFRoZSBpbWFnZSBhYm92ZSB1c2VzIDxjb2RlPnNyY3NldDwvY29kZT4gYW5kIDxjb2RlPnNpemVzPC9jb2RlPiB0byBsb2FkCiAgICAgIHRoZSBtb3N0IGFwcHJvcHJpYXRlIGltYWdlIGZvciB5b3VyIGRldmljZS4KICAgIDwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

Use **descriptive alt text** for each version of your images to improve accessibility. Avoid using large images where smaller ones suffice, as this helps your pages load faster and reduces data usage for users on mobile devices.

What is the main benefit of using `srcset` and `sizes` attributes with the `<img>` element?

Learn how to create meaningful, accessible, and visually rich web content using HTML. Combine text, images, audio, and video to craft pages that are structured, engaging, and optimized for search engines. Gain practical skills in semantic markup, media integration, and navigation design to build web pages that look great and perform well.

Build a strong foundation for creating clear and readable web content. Use semantic elements to structure text, emphasize key information, and organize content with lists that enhance both meaning and accessibility.

Enhance web pages with images that are both visually engaging and accessible. Embed and optimize visuals effectively, add descriptive alt text, and use figures with captions to give context and meaning to visual content.

Combine multimedia and navigation elements to create engaging, discoverable, and user-friendly websites. Add audio and video content, build intuitive navigation menus, and include meta information that improves SEO and accessibility.

Responsive Images