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.