Hi. Any assessment appreciated. Thank you and have a good day! 
Hello again @harryghgim! I’ve looked over this, and your splash page is working perfectly — well done!
The small images loaded are the 120px ones on narrow screens, and the 400px ones of wide screens — just the behavior we were hoping for.
and the red panda image loaded is the portrait one on narrow screens, and the landscape one on wide screens. Again, just as we’d hoped.
Nice use of glitch to present all the assets, too. It’s really useful for that, and easier to use than having to try to get it working on GitHub or some similar app.
1 Like
Hi. @chrisdavidmills. Thanks for the feedback!
There’s a few things I’m not sure about what I did. When putting img tag with srcset and sizes properties, do I need to sync the order of srcset with that of sizes? And Does it make a difference between putting 400px first and 120px later, and the other way around? Does the order of properties of img tag(say, srcset and sizes first and src and alt later or reversely) matter? Once again thank you in advance!
I don’t think the order matters. They key text here can be found on the guide page (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images):
So, with these attributes in place, the browser will:
- Look at its device width.
- Work out which media condition in the sizes list is the first one to be true.
- Look at the slot size given to that media query.
- Load the image referenced in the srcset list that has the same size as the slot or, if there isn’t one, the first image that is bigger than the chosen slot size.
1 Like