What is srcset and sizes?

What You'll Learn

• How srcset works
• Using the sizes attribute
• Pixel density vs width switching

Understanding Srcset

srcset and sizes enable resolution switching - serving different sized versions of the same image.

Pixel Density Switching

<img src="photo.jpg"
     srcset="photo.jpg 1x,
             photo@2x.jpg 2x,
             photo@3x.jpg 3x"
     alt="Photo">

Width-Based Switching

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

Sizes Breakdown

• Under 600px viewport: image is 100% wide
• 600-1200px viewport: image is 50% wide
• Over 1200px: image is 600px wide

Browser picks best srcset based on this.