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
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.
<img srcset="firefox_logo-only_RGB_120w.png 120w,
sizes="(max-width: 120px) 120px, (min-width: 121px) and (max-width: 600px) 600px, 800px"
<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">
I would like to be assessed.