The srcset and sizes Attributes

srcset and sizes

srcset lists available image widths. sizes tells the browser how wide the image will display. The browser picks the best match.

This enables resolution switching without JavaScript.

Example

<img
  src="image-800.jpg"
  srcset="image-400.jpg 400w,
          image-800.jpg 800w,
          image-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  alt="Responsive image"
>

HTML

Full Editor

Pro Tip

Use srcset+sizes for resolution switching (same content, different sizes) and <picture> for art direction.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned