There're a lot of really complicated descriptions of srcset out there.
As a result, I thought srcset was more complicated than it actually is.
Here's the all-purpose srcset code I used in my static HTML. This covers 1x, 1.5x, 2x, and mobile optimization in a fine-grained way:
<img src="/images/myimage-original.png" alt="My Image" srcset="/images/myimage-100w.png 100w, /images/myimage-150w.png 150w, /images/myimage-200w.png 200w, /images/myimage-250w.png 250w, /images/myimage-320w.png 320w, /images/myimage-400w.png 400w, /images/myimage-500w.png 500w, /images/myimage-675w.png 675w, /images/myimage-850w.png 850w, /images/myimage-1000w.png 1000w, /images/myimage-1200w.png 1200w, /images/myimage-1400w.png 1400w, /images/myimage-1600w.png 1600w, /images/myimage-1800w.png 1800w, /images/myimage-2000w.png 2000w, /images/myimage-2200w.png 2200w, /images/myimage-2400w.png 2400w," sizes="(min-width: 1182px) 591px, (min-width: 800px) 50vw, 100vw," />
In srcset, you're telling the browser the sizes of the images that you have to fill the hole.
/images/myimage-100w.png 100w, describes the width of the image
In sizes, you're specifying the size of the image hole to fill based on media queries. When you say something like
50vw, the browser already knows the pixel width and density of the viewport, so it then figures out the specifics of what image to use.
(min-width: 1182px) 591px specifies that if the screen is wider than
1182px, the max width of my content region, the image will be at
50% of that,
591px, and no bigger.
The next entry,
(min-width: 800px) 50vw, when included with the preceding, says that from
1181px the image will be sized at
50vw, or half the screen width.
799px or less will be full viewport width.
Sizes are read left to right by the browser, until a match is found, and then it uses what it found, or if no match was found, it uses the final entry that has no media query, which is the default and required.
So, I have a 2x retina display. So I scale my browser window to
800px, the image size it's looking for is half of that,
400px. Except it's got a 2x pixel density, so it's actually looking for an
You can tell what srcset image is being rendered in Chrome, Safari, and Firefox by inspecting "DOM Properties."
Chrome (just hover over image in Developer Tools):
Chrome was acting funny in the Responsive Design mode, but when I scaled the browser directly things seemed to be right.
You'll notice that I have a ton of images. It's because I'm auto-generating them. The largest will not be used in my specific use case (though it could be used in other full-width contexts), and could be eliminated, and that doesn't matter. The more options the browser has, the better. You have to find a balance between the value that comes from finessing each image and the sizes it will use, and utility to the client and website user. I'm just providing the full code.
Here's the first part in this series, the gulp build pipeline for producing images for srcset.
- Which srcset image is a browser using.
- MDN on responsive images.