Hi guys just wanted an assessment for the following test your skills page: Test Your Skills!
Here is my live demo: Live Demo
Here is the code: Code
Cheers and thanks 
Well done, @Phayzor! This is mostly correct.
However, there is a problem with the red panda <picture> element. The idea is to use the 1200px-image for large screens and create a portrait image of the red panda for smaller screens. This portrait image is missing from your assets and code. Furthermore you don’t need the second <source> element because if the first <source> condition fails the <img> element will automatically be used.
I hope my explanations are more or less clear. Otherwise feel free to ask any further questions. I’m happy to have another look at it if you decide to improve this problem. 
Happy coding!
Michael
Hi @mikoMK! Cheers for the review and advice. I have updated the code to meet the requirements. It makes a lot more sense now. Thanks!
Fahed
1 Like
Great! Now it works correct!
As I said before, you can now even simplify your <picture> element like this:
<picture>
<source media="(max-width: 600px)" srcset="images/red-panda-portrait.jpg">
<img src="images/red-panda-1200.jpg" alt="Image of a red panda">
</picture>
I think then it’s perfect! 
Hello!
I made an experiment and compared how pictures on the page behave if we leave or remove srcset attribute. Frankly speaking I can’t see the difference, because every time I alteri the browser’s window’s size pictures change their sizes accordingly. I would be grateful for suggesting what do I miss here
Here is my screen recording
Kind regards
Denis
Hello @DenisM and welcome to the community. 
Thanks for the screen recording. I think you are mixing two things up:
First, there is the styling of the images on the page. All four images have a width if 25% for a total of 100% of their parent (the red box). As you correctly observed they are changing their size to always fit the red box no matter how big or small it is. If an image has such a styling we call it “responsive”.
Second, there is a performance optimization where we use a small version of an image (e. g. 120px width) and a bigger version of the same image (e. g. 400px). Here come the srcset and sizes attributes into play. We tell the browser for which width we need which image file. When we are on mobile and the image will only be 100px width, then the browser knows it only has to download the small version. It wouldn’t make sense to download the big 400px width image and scale it down to 100px width.
You can see the effect when looking into the network tab of the Firefox DevTools:
Downloaded images with a small browser window
Downloaded images after I made the browser window bigger
I hope that clears things up a bit. Feel free to ask more questions if it is still unclear. I’m happy to help you 
Have a nice day!
Michael
1 Like
Thank you a lot for the assessment, it has helped me with understanding the whole picture of this problem.
-
There is one more thing which is not too clear - it’s concerned to setting up a picture depending on the browser’s window and slot’s size. The thing is, it’s said that browser loads the image referenced in the
srcsetlist 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
But if we are saying about performance optimization, shouldn’t the image that is smaller than a slot size be chosen (of course if there is one)? Or that’s not the point? I marked this in my example by blue oval on the screenshot. -
I also noticed such an unclear behavior concerned an art direction problem, when my cut image is displayed only when I scale browser’s window’s content. I marked this in red on the screen
Kind regards
1 Like
Glad it helped!
-
In my opinion it makes sense for the browser to choose the bigger one since the number one priority of the browser is to display everything correctly. If it would default to the next smaller image that could lead to a tiny version of the image being massively stretched out. This behavior makes sure that the smallest possible image is served but never by sacrificing image quality.
-
Your code looks correct and I’m also wondering why
Desert480.jpgwasn’t loaded at that browser size. One possibility:clientWidthdoesn’t count scrollbars, but media queries do count them. So from a media query perspective the483px clientWidthcould look like (around) 510px when including the scrollbar. To confirm this you could test it on a smaller document without scrollbars and/or find out at which exactclientWidthvalue it switches images.
I’m interested in the results!
Michael
1 Like
Hello,
I’m very grateful for your explanations because I understood these issues thanks to them. This did was a problem of the scrollbar width.
1 Like
Hello @DenisM and @mikoMK hope you do not mind to add my 2 cents here
one notice about chrome or any chromium based browser (the new version of edge is chromium based) if you visit the page for the first time with large size then it will load the bigger one which is obvious but if you resize the window to smaller one it will still use the larger one but scale it down (firefox does not do that)
try to clear your browser cache and you will notice that behaviour
if you start the browser and resize it to smaller size then visit the page it will load the smaller one then if you scale it up it will load the larger one (do not forget to clear the history and cache )
hope that help and have a nice day
2 Likes
@DenisM Thanks for testing the behavior and giving feedback! So window.innerwidth is what media queries actually use. Interesting!
@justsomeone Thanks for the input! The behavior of Chromium seems like a reasonable method, since scaling down should never sacrifice image quality and the unnecessary smaller image (in this case) needn’t be downloaded.
2 Likes