Art-direction solution works on mobile, but resolution-switching solution does not

Hello everybody.
I did the assessment for multimedia and embedding module on MDN (Mozilla splash page) .
But there’s a problem and I made my own sample code to ask my question. and here’s the project page and live demo:
Project page / Live example 1 / Live example 2.

This is the problem:
Please, first check the live example. In the live example there’s two images and above each one is a copy of the HTML code used for the corresponding image. I’ve used <picture> element for the first image and <img srcset="…" sizes="…"> element for the second one so that if the page is loaded on a mobile device, the mobile version of images must be shown (I labeled mobile version images with “mobile-version” so it’s obvious when the mobile version is being displayed). But, when i open the live example on my mobile phone the first picture image being shown (which uses <picture> element) is the mobile version but the second one (which uses <img srcset=…" sizes="…">) is not the mobile version. And I’m confused why, because for both methods I’ve used same media condition (max-width: 800px) but it seems the first media condition evaluates to true but the socond one does not. (when I used inspect on desktop browser and make the viewport narrow both methods work and show mobile version images) The same problem happens for the mozilla splash page example.
Thanks for help in advance.

Hello @Vahid.Pouyafar

i really do not understand what the difference between live example 1 and 2

test those on chrome based browser on desktop on big width then try to resize your screen and you will see it load only the wider one and just resize it when you resize your window

that how chrome act for the srcset attribute it does not load the other image since the it already loaded the big one

for the mobile some mobile device has retina display so that make it has more pixel available so try to set the width to higher value and see if it fixed

hope that help and have a nice day

i forget i like the desgin and color you choose of that example
i am a big fan :slight_smile:

have a nice day

1 Like

Hi @justsomeone. Thanks for your reply. You’re right there’s no difference between live example 1 and 2. But I have another question. How can I edit my post???!!! There’s no button. Is that because of my trust level? How long shoud I wait. I need to edit my post.

Hello @Vahid.Pouyafar

you welcome there should be a pen under your post and if not there check the the 3 horizontal dot if it not there then there maybe some rule related to discourse

Screenshot from 2020-09-01 12-47-41

hope that help and have a nice day :slight_smile:

“live example 1” and “live example 2” are identical. I should’ve put only one of them.

no problem :slight_smile:

@justsomeone Actually didn’t get the answer to my question.
Everything works well in desktop browsers (Chrome or Firefox) when I resize the viewport.

Desktop browser —> large viewport

art-direction-original

resolution-switching-original

Desktop browser —> small viewport

art-direction-portrait

resolution-switching-small

But in mobile browser, only for the first photo the mobile version displays and not for the second photo, although they both use the same media condition (max-width: 800px)

Mobile browser

For the first photo, the mobile version is displaying.

But for the second photo, the desktop version is displaying.

If the browser loads the mobile version for the first photo, it means the condition (max-width: 800px) has evaluated to true. The second photo uses the same media condition (max-width: 800px) but browser loads the desktop version!!!

first for desktop

go to chrome and clear cache then try again and you will see it does not load the mobile one

now for the the mobile one
@chrisdavidmills could you help us here as i can not see the issue

and have a nice day both of you :slight_smile:

go to chrome and clear cache then try again and you will see it does not load the mobile one

Which image do you mean? The first one or the second?
I cleared the cache in chrome and it still loads mobile version for the first image. And it doesn’t load mobile version for the second image. But when I click on “toggle device toolbar” button (Ctrl + Shift + M) twice, the second image also shows mobile version.
Albeit in Firefox it shows mobile version for both anyway.

the second one as it the one that use the srcset

for this point

not sure what chrome do when toggle the device toolbar

but was talking about what the normal user will get

you can say chrome optimize the network request so it does not load the second one as it already the bigger one and it can resize it

but if you clear the cache again and open new window in small size then the mobile version will display and if you resize the page to larger width it will load the bigger one
why cause in this time chrome will worry about image could get pixled when get bigger

and hope you get your answer for the mobile issue from chris soon

have a nice day :slight_smile:

Oh yes now I got what you’ve been talking about. you mean:

1- For the first image which uses <picture> element, the browser loads the desktop version on desktop wide screen and when you resize the viewport, it shows the mobile version.
2- But regarding the second image, the browser loads the desktop version on desktop wide screen and when you resize the viewport, it just makes the previously fetched image smaller. (And I think this is the effect of max-width: 100% style set on <img> element.)

Of course this is not the case for the second image when I view the page on desktop Firefox. It does not just resize the image, instead it loads the mobile version.

But the main problem is mobile. So I have to wait …
Thank you very much @justsomeone :slightly_smiling_face:

exatly that’s why we need to test our code in many browser manly firefox chrome safari as they the most used one

and you very welcome

based on your srcset width descriptor and the sizes attribute, the browser computes the pixel density.
for example if the intrinsic width you specify is 500w and the size is 250px, then the density is 2x.
after calulating all the densities, the browser selects the most adequate asset for the device.
anyway, its only a hint for the browser and the behavior is not guaranteed.

your mobile browser selects the bigger image because it improves the quality of the image.
if for example the the screen width is 500px,
then, if it takes the 500px version, then the density is 1x
and if it takes the 1000px version, the density will be 2x (remember that you have set max-width: 100% in the css)

if the screen density is 2x for example, it will probably prefer the 2x version,
but if the screen density is only 1x, it will probably prefer the 1x version, because taking the 2x version is waste of bandwidth for nothing

for more information see the spec here:
https://html.spec.whatwg.org/multipage/images.html#image-candidate-string

anyway, if you change the markup from:

<img srcset="/assets/resolution_switching-small-version.jpg 500w,
             /assets/resolution_switching-original.jpg 1000w"
     sizes="(max-width: 800px) 500px,
            1000px"
     src="/assets/resolution_switching-original.jpg" alt="Paris" />

to:

<img srcset="/assets/resolution_switching-small-version.jpg 500w,
             /assets/resolution_switching-original.jpg"
     sizes="(max-width: 800px) 500px,
            1000px"
     src="/assets/resolution_switching-original.jpg" alt="Paris" />

though not recommended by the spec as it says:

If an image candidate string for an element has the width descriptor specified, all other image candidate strings for that element must also have the width descriptor specified.

it seems like it shows the smaller image on small screens and the bigger image on big screens

1 Like

:confused: Oh boy, it’s more complicated than I thought. I’m a beginner and I really need several days to figure this out. Currently I don’t have the courage to refer to Specifications!!! I have to study more about pixels, resolution, density, PPI, etc. and the fact that one CSS pixel is equivalent to several device pixels (Am I right?! —> CSS pixels and device pixel). But thanks for your help @Rafael_Green :slightly_smiling_face:

yes, sort of

one css pixel is 1/96 inch
see here: https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel

DPI is dots per inch.
So if a device has 266 DPI, then an element with 96px width will take 266 dots on the screen

@Rafael_Green In the example below, where am I wrong? Where’s the problem?

This float example uses (min-width: 600px) media query and if it’s true the layout should become two-column.

when I view the example on my mobile in portrait mode, the layout is one-column.
But when I view the example on landscape mobile screen, the layout turns to two-column layout. So it means the media feature rule (min-width: 600px) is true.

But according the calculation below, it can’t be true.
600 (CSS px) / 96 (CSS px) = 6.25 in. ----> My mobile (Nokia 6.1 plus) PPI is 432 pixels per inch and the resolution is 2280 × 1080. ----> 6.25 × 432 = 2700 (device px).
But in landscape mode the screen width is 2280 px which is less than 2700 px so (min-width: 600px) should be false!

what screen resolution do you get when clicking this link?
http://whatismyscreenresolution.net/

maybe the css 1px on your phone is different than 1/96 inch

You mean 1/96 inch rule is not constant and differs based on device?!

316 × 730 !!!??? :open_mouth:

I forgot to mention you in post above. @Rafael_Green