Responsive Images picture fill – Size Attribute

[jack_Quarry]

Can some one please explain the function of Size attribute whilst defining various image sizes?
I got my images working fine – responsive & adaptive by playing around with the numbers in the Size attribute but I don’t understand what stands for what.
Please help..

Example:

<article>

<img srcset=”
img/img_1920.jpg 1920w,
img/img_960.jpg 960w,
img/img_768.jpg 768w,
img/img_480.jpg 480w,
img/img_320.jpg 320w”

  sizes="(min-width: 320px) 1920px, 100vw"

     alt="yollo Image!">

</article>

What does “100vw” mean?
vw = viewport?
Please help..

[jack_Quarry]

Thanks.

I am unable to access http://ericportis.com/posts/2014/srcset-sizes/ from my workplace.

As you can see, currently I have 5 different images at different dimensions,
img/img_1920.jpg 1920w,
img/img_960.jpg 960w,
img/img_768.jpg 768w,
img/img_480.jpg 480w,
img/img_320.jpg 320w”

I set my size attribute,
sizes=”(min-width: 320px) 1920px, 100vw”

based on the assumption that,

min-width for the img = 320px;
& max-width for the img @ 100vw = 1920px.

Is my assumption correct?

[jack_Quarry]

Here’s what i got,
http://codepen.io/TheEnd/pen/poutq

It appears to be perfectly adaptive.

Note that I am also using Flexbox besides Picturefill – v2.0.0-beta – 2014-05-02

I would like to know if my size attributes are effectively making the “responsiveness ” functional?

[jack_Quarry]

So I read the articles and played around but still…dont get it :/
I have added image dimensions to the images so that we know which image is being called.

http://codepen.io/TheEnd/pen/epGlo

I am lost as to why the image does not “shrink” / “expand” with the viewport.
For example:

Between viewport size,
-> 960px to 1920px, the 1920px img can be called and scaled down OR
-> 768px to 960px, the 960px img can be called and scaled down to fit

[jack_Quarry]

Sorry Atelierbram, I have not been able to get back to you.
I saw your codepen and I was wondering if we could just stick with img srcset, as it seems to be supported by most of the current browsers,
http://caniuse.com/srcset

Also, would i be right to assume that in most cases, we can make the image adaptive by defining size = “100%”?

[jack_Quarry]

Looks good to me..
I was wondering,

size=”100%” roughly translates to “100% of viewport”
So,
basically, “100vw” is same as “100%’ with regard to the size attribute?

I am going to start using this, wonder how it shows up in different devices..

[Paulie_D]

Support – http://caniuse.com/#search=vw

[jack_Quarry]

Most of the browsers that support “srcset” support “vw” as well, so it should work as intended.

Thanks everyone!

[Author]

Posts