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: Mozilla splash page
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 
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 
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 
1 Like
thanks @chrisdavidmills
i like firefox also
but we need to test our site everywhere also 
thanks again and have a nice day
1 Like