Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML Responsive Images Image Delivery with Srcset and Sizes Adding Sizes

Posted by Tunde Adegoroye
Tunde Adegoroye
20,597 Points

Sizes values - Am i right with this?

I've been looking at the sizes attribute and been doing some testing and wanted to know if the theory that i've come up with is right so when looking at the values 50vw

<img 
          sizes="50vw,
                (min-width: 1024px) 512px"
          srcset="img/banner-large.jpg 2048w,
                  img/banner-medium.jpg 1400w,
                  img/banner-small.jpg 800w"
          src="img/banner-medium.jpg"
          alt="Photo of Nick in trees"
          class="banner-image"

        />

Does the 50vw mean serve the right image size as if the viewport were at 50% so in this case it will only serve the banner-small image.

But when the min-width of the screen is at 1024px or larger then set a fixes size for the image of 512px which will then allow the browser to figure out the correct image size which would be the banner-medium obviously depending on the size of your viewport.

On my computer which is a 12 inch macbook i only get the banner-small so i'm assuming this would be different on a iMac where i would get the banner-medium -> banner-large etc.

Hopefully i get the jist of this and i'm on the right track

Nick Pettit

moonshine
moonshine
8,449 Points

In chrome you can always open up the developer tools and simulate different resolutions. Otherwise, I think your explanation is right.

If the viewport is at least 1024px, then that conveys to the browser that the image is 512px wide. Otherwise the image is half the width of the viewport. Based on all that info and other info, the browser magically loads the optimal image.

2 Answers

Manav Misra
Manav Misra
11,778 Points
Manav Misra
Manav Misra
11,778 Points

Floris Creyf To add to your answer:

Essentially, under 1024px, just fill up 50% space.

Once you get to 1024, just use the 512px one, but don't go beyond 512px.

Manav Misra
Manav Misra
11,778 Points
Manav Misra
Manav Misra
11,778 Points

Elena Paraschiv With regards to using this to save bandwidth, the sizes attribute when combined with srcset will save bandwidth because the browser will know to request the best possible src based on the information it gleans from "sizes."

So you are at least partially correct.

Sizes could also be related to art direction, in that, if there is not too much room on a screen, we want the rendered size of the image to be less (or more).

In sum, it requires both srcset and sizes for the browser to load the 'best' choice based on the desired results, that is the rendered size from sizes.

Also, keep in mind that utilizing these attributes is really only worth the effort on relatively larger projects. It could suffice just to load the 'largest' image on all devices if you only have a handful of images.

In practice, I have found myself just using srcset for loading retina and non-retina image (e.g. 1x and 2x). We don't even use sizes too often.

Addl. info here: http://scottjehl.github.io/picturefill/ This document breaks down the use cases for different scenarios related to the <picture>, srcset, and sizes.

Elena Paraschiv
Elena Paraschiv
9,938 Points
Elena Paraschiv
Elena Paraschiv
9,938 Points

Thanks Manav Misra for all the good information!