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!
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
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
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.