Help with responsive images

MDN
#1

Hello,

First of all I would like to point out that I love your course, and that I really do appreciate the quality of content as well as the administrators readiness to help and solve our questions. This is an amazing community, and this world would be a better place if people were like this everywhere.

Ok, now to the point:

I’m struggling to understand the difference between the three different ways to make responsive images. If I understood correctly there are three ways to do this:

1.Resolution switching - different sizes.

I do not understand what we get here. In this example we have a live code with 2 content images. One is “Chris holding his daughter” (Which is art direction if I’m correct), and the other one called “Elva dressed as a fairy” should be resolution switching, different sizes.

However, when we narrow our browser viewport and open “Elva dressed as a fairy” with developer tools it always shows the same image with the same intrinsic size of 800x533px and same file size of 128kb, as well as the same content source of https://mdn.github.io/learning-area/html/multimedi…d-embedding/responsive-images/elva-fairy-800w.jpg.

The only thing that changes is the rendered aspect ratio and there could be hundreds of options depending on how big is the viewport.

Didn’t we provide only two options - 480 and 800?

Also, the image behaves completely the same as the one in the unresponsive example. It shrinks down as we shrink our browser viewport. I don’t get what we have achieved with all this code

img srcset=“elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w”
sizes="(max-width: 600px) 480px,
800px"
src=“elva-fairy-800w.jpg”
alt=“Elva dressed as a fairy”

On the other hand, the other picture “Chris holding his daughter” offers two distinct content sources with different image sizes. When we narrow down our viewport our browser switches to the cropped version. I understand this.

2. Same size different resolutions.

If I understood correctly the point here is to offer several images depending on the resolution of the screen or the pixel density on the phones? So, I have a PC with a full HD resolution. When I open this example My browser renders the small 320x213 picture. Shouldn’t it load the biggest picture?

3. Art direction -
I think I understand this one - (basically providing a cropped version for narrower screens. So we have two different images as a resource)

Page of the article:
Responsive images - Learn web development | MDN (mozilla.org)

Sorry for the long post, I would like to fully understand your lesson, but it seems I can’t. I need your help.

1 Like
#2

Hello @Rastko_Gojgic

you very welcome to the MDN world

  1. i guess you use chrome or any chormiuom based browser (like edge/brave and others) am i right?
    if yes then the issue related to how chrome behave
    when you load the page for the first time (that mean you never visit it before or cleared your browser cached after last visit ) it load the right image when you resize your window it just resize the image scale it down to save the bandwidth to load another image but if you open new window or tab and resize it to small version then load the site it will load the small one then if you enlarge the window it will load the bigger one (cause the bigger one would have better resolution and would not make the image looks blur when it scaled up)

so use firefox and check it again or clear your browser cache to see the effect

  1. 1 x mean that your device has 1 physical pixel for each 1 css pixel
    for 2 that mean that there 2 device pixel for each css pixel
    check this for some comparison about pixel https://elad.medium.com/understanding-the-difference-between-css-resolution-and-device-resolution-28acae23da0b

  2. you are right just a note both image could be totally different but of course it would make 2 different user get 2 different image or experience based on the size

hope that help and have a nice day :slight_smile:

2 Likes
#3

Hi :slight_smile:

Thanks for the answer!

Yes, I use Edge, but I have downloaded Firefox, and I think I will use it from now on. Especially after reading what its developers stand for.

So one more time, 1.Resolution switching - different sizes. is when we provide several images to users which are different in physical size (KB or MB)?
At that point our browser first automatically shrinks the image as we narrow the viewport. And it continues to do that until the it hits that max-width attribute value of 600px, and then it switches to the smaller image?
Then it continues to shrink that smaller image again until we reach the smallest possible viewport in our browsers. Am I right?

2. Same size different resolutions. I didn’t realize that this refers to css pixels, so that clears it up a bit. To be honest, I wasn’t even aware of that concept. I will certainly find out more about it from that link you sent me.

Have a great day :slight_smile: :slight_smile: :slight_smile:

#4

you very welcome @Rastko_Gojgic

do not forget that in real project you would need different browser to test your site/app and even different platform like windows/linux/mac/ios/android and sometime different version do not worry about that now there some tools and lesson here in mdn teach you how to do it

i prefer to stay way from looking at image from it’s storage size sure image with lower resolution are lower in storage size (of course if we fixed the format)

and you right about your example and please notice that order make difference as the browser use the first match

  1. another one from the mdn community teach me that sometime device report fake resolution so check this post

keep reading till the end of this post :point_up:

and you very welcome :slight_smile:

1 Like
#5

Thanks for the tips! I’m really happy that I’m a part of this community :slight_smile:

1 Like
#6

you very welcome and we happy to have you here with all of us :slight_smile:

just a little edit to your example

when you visit the page the browser it check for the size of the viewport then it check each rule there one by one and the first match will be applied
so it first check is my viewport is 600 or less if true then it apply the first image if false it the second one the 800 one

and have a nice day :slight_smile: