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.
- Mozilla Splash Page - MDN Test Page
- Github Responsive Test Page - Github Pages