I don’t surely confident that small(firefox icon, dinosaur etc.) images is resizing when i open index.html in narrower display. I know that in Chrome it’s working not as expected, but how can i check type of choosen image(smaller or bigger) precisely? Tried in Chrome and Edge.
Thanks!
both github links are not valid i even went to your main page and can not find any repository about Mozilla splash
in chrome or any chromium based browser (the new edge is based on chrome also ) and using the srcset when you resize the page it just scale the image it does not load the small one
you can say it save bandwidth that way
firefox does not do that and will load the small image when you resize your page
if you used picture element both browser will load the correct image
right click the image and open in new tab and check the image file name then you will know which one is loaded
by the way when i talk about srcset i mean the one inside the img element as you know we use srcset inside the picture element also
here how it work
try to clear your browser cache
resize the window of the browser to small size
open the page you will notice it load the small version
now try to increase the window size you will notice it load the bigger one
but since you use that on your computer then most probably you has bigger window size that why it load the bigger image first but once it load that bigger version it just scale the image
but why it does not scale the small one in the 4 steps above cause there is change the image when scale up it get pixled
hope that explain it in better way and let me know if i need to do better and have a nice day
when the browser (all browser) load the page it only load single image based on the conditions you set
but chrome go one step further that in case if you already loaded the bigger one you do not need to load the small version to save the traffic in this case
an extra point why chrome do not do that with the srcset in picture element cause picture element is about art direction so images are not same with different resolution if you check the lesson
you will notice it crop the image to make chris and his little angel to be in the center of the image