Mozilla Splash Page Assessment | One Bug Maybe

I have completed Mozilla Splash Page test, and everything works fine but one thing.
I have tested the site on Mozilla Firefox and Google Chrome, and seems like I have found bug or what so ever…

At the section of Adding responsive images to the further info links, it says to use img element with srcset and sizes attributes with “link/size” pair, but seems like such approach isn’t working properly in Google Chrome and I don’t know the reason, but it works fine on Mozilla Firefox. responsive.html example is made by MDN Community and it has the same issue…

So, I have used both approaches in Adding responsive images… section.

Using <img> element;

<img srcset="firefox_logo-only_RGB_120w.png 120w,
firefox_logo-only_RGB_400w.png 600w,
firefox_logo-only_RGB.png 1200w"
sizes="(max-width: 120px) 120px, (min-width: 121px) and (max-width: 600px) 600px, 800px"
src="firefox_logo-only_RGB.png"
alt="Firefox Logo">

Using <picture> element;

<picture>
<source media="(max-width: 120px)" srcset="originals/mozilla-dinosaur-head-120w.png">
<source media="(min-width: 121px) and (max-width: 600px)" srcset="originals/mozilla-dinosaur-head-400w.png">
<source media="(min-width: 601px)" srcset="originals/mozilla-dinosaur-head.png">
<img src="originals/mozilla-dinosaur-head.png" alt="Mozilla Dinosaur Head">
</picture>

I would like to be assessed.

Hi there @Murtaza_Abbasi!

Thanks for sending in your code. This is a pretty tricky assessment, and you’ve made a really good attempt. Well done!

So, the <picture> element stuff works fine, but your srcset stuff doesn’t seem to work. srcset is really tricky and annoying to get working…

Try looking at our version (which does work) and let me know if you can make sense of it: https://mdn.github.io/learning-area/html/multimedia-and-embedding/mdn-splash-page-finished/

And on the Chrome subject — the example does work, but it is just tricky to test in Chrome. If you first load it in wide screen mode, it’ll load the larger images as expected. If you then shrink the viewport down and reload it, it’ll still show you the larger images, because it already has then in its cache — why load more images when you’ve already loaded some, right? But this is really annoying for testing :wink:

You need to load it with a narrow viewport first. Then you’ll see the smaller images loaded.

2 Likes

Hello @chrisdavidmills and @Murtaza_Abbasi

thanks for the question and the answer

just to make sure that i got it right for the chrome part

is that mean the chrome to safe the bandwidth and not request the image again and just resize it am i right ?

Hello @chrisdavidmills,
Thanks for assessing my code.

So, seems like it is not a bug but chrome’s intelligence to select images based on media query to save bandwidth, well isn’t this the main purpose of media query. I just loaded my Github Response Test Page on less width window and it loaded image specified for that width…

Google Chrome is intelligent :smiley:

1 Like

Yes, you are.

Google Chrome is intelligent

It sure is. But also it is weighted slightly towards the user experience in this regard, than the developer experience, whereas I think Firefox is the other way round. I personally prefer how Firefox does it, because it makes testing easier :wink:

1 Like

thanks @chrisdavidmills

i like firefox also :slight_smile: but we need to test our site everywhere also :wink:

thanks again and have a nice day

1 Like