Mozzila splash page task

MDN Learn
,
#1

Hi!!!
Just made a Mozilla splash page task.
Here it is:
Github
index.html
Can you check it out and review, please?

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!

#2

Hello @QuebecNova

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

hope that help and have a nice day :slight_smile:

2 Likes
#3

Sorry @justsomeone! Forgot to open repository in public. Now it’s open!

Thank you for answer, and solution!

1 Like
#4

@QuebecNova it’s ok do not be sorry

you doing great well done and you welcome

and have a nice day :slight_smile:

3 Likes
#5

So in chromium srcset is useless?

#6

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

  1. try to clear your browser cache
  2. resize the window of the browser to small size
  3. open the page you will notice it load the small version
  4. 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 :slight_smile:

2 Likes
#7

Ok, seems that for small screens it has purpose that it use less traffic, but in another way.
Thanks! :hatching_chick:

#8

an extra point to explain how it work

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

hope that help and have a nice day :slight_smile:

2 Likes