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

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Posted by Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Sizes values: need some help!

Ok, so I went to the MDN docs and see this:

<img 
  src="clock-demo-thumb-200.png" 
  alt="Clock"
  srcset="clock-demo-thumb-200.png 200w,
               clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw"
>

It means: when the (min-width: 600px) media condition matches, the image will be 200px wide. Otherwise it will be 50vw wide (50% of the viewport width).

In our case, when Nick writes that:

<img 
  sizes="50vw, (min-width: 1024px) 512px"
>

It means: the image will be 50vw wide but the media condition matches. If the media condition matches, it will be 512px wide. Am I correct?

If yes: when do the sizes of the image change? I do not get it.

Thomas.

3 Answers

Steven Parker
Steven Parker
231,236 Points
Steven Parker
Steven Parker
231,236 Points

:point_right: Remember that sizes does not change the dimensions of the image.

The actual image dimensions is controlled by the CSS width (or min-width or max-width) setting.

All the sizes attribute does is provide information to the browser to help choose which of the srcset images to use.

Thomas Dimnet
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points
Thomas Dimnet
.a{fill-rule:evenodd;}techdegree seal-36
Thomas Dimnet
Python Development Techdegree Graduate 43,629 Points

Thanks Steven, I just get it a few minutes ago! The other thing I have to keep in mind: "Chrome will always use the largest image available in the cache"! So if I resize the browser window, it is perfectly normal to have some issues :) (for now!)

Ran ShemTov
Ran ShemTov
14,148 Points
Ran ShemTov
Ran ShemTov
14,148 Points

If you use max-width 100% you'll usually end up with an image scaling up to it's parent div.