Project MDN Splash Page: unable to responsively load images

MDN
#1

I could not get my images loaded responsively so I tried the following steps but still failed:

  1. I forked the repo and used GitHub Pages to load the finished HTML file from learning-area\html\multimedia-and-embedding\mdn-splash-page-finished\index.html. Before this I also tried it locally.
  2. Load the HTML file in the browser, the four images in the further-info part are all loaded with 400 pixels version.
  3. I tried both ‘Inspect Element’ in Firefox and ‘Inspect’ in Google and loaded the page simulating devices with less than 500px width.
  4. I checked the network to see which images, 400px or 120px, were loaded and every time only 400px version were loaded.

I got the <picture> element work to load different images with different widths, but the responsive <img> tag never worked for me. Did I miss anything or it was actually loaded but the network tool in Inspect is not the right way to test it?

Please kindly advise, thanks!

#2

Hello @wszhan

could you share the full code on any sharing site and alsoo link to the topic you asking about

and have a nice day :slight_smile:

#3

Hi @justsomeone

Thanks for the reply!

Actually it is exactly the same code as in the repo, and you can check it live here.

Please share any thoughts on this, thanks! :smiley:

#4

for firefox it work fine here try to clear cache then open it again then resize the window and check if it work of not

for chrome

if you display it in wide then it will load the bigger image which is fine but if you resize the window it does not load the image with small size it just resize the bigger image
so can say it save the bandwidth so if it already has the image with higher size then it just scale it down and do not load it the small version

hope that help and have a nice day :slight_smile:

#5

Hey there @wszhan, first of all, I am a student just like you, so you can take my advise with a pinch of salt. However I have already worked on this challenge and was able to load my images responsively. Could you share your code, I take a look maybe there is something you are missing? An alternative is to run your code through HTML validator, its really good at catching bugs :wink:…

#6

Hi @justsomeone

Thanks for pointing out that the cache might be the problem!

I tried it in Firefox and it worked well in responsive mode.

But in Chrome it did not work no matter how I cleared the cache, I suppose that it might be due to the cause you mentioned. BTW I found the problem quite common for others too. I will use Firefox to test <img> tag’s responsiveness then, or just use <picture> if I want to ensure responsiveness.

You have a nice day too! :smiley:

#7

Hi @Githuma

Thanks for reaching out to help!

Following @justsomeone I kinda solved the problem: the code actually worked but chrome did not allow me to see that it worked because it cached the larger images and never served smaller ones. But in Firefox I saw it worked perfectly.

Have a nice day! :smiley:

#8

you very welcome @wszhan and thanks a lot

to make it load both size in chrome

  1. clear cache
  2. resize the window of chrome to the smallest size then go to the link
    and you will notice it load the small size
  3. now maximize the window it will load the bigger one

hope that help and have a nice day

1 Like
#9

Hi @justsomeone

Thanks for the detailed steps. I tried these steps exactly as you told and it worked! :smiley:

It seems that I must

  1. resize the window to the smallest size
  2. clear cache
  3. load the page

The order of steps is important, and only by following these steps will chrome load the smaller pictures. It also loaded larger pictures when I resized the browser window to a larger size.

Really appreciate your help! Cannot be more thankful for solving the problem that haunted me for days!

Have a great nice day to you! :smiley:

#10

Hello @wszhan

you very welcome
we both should thank @chrisdavidmills for that as he the one who teached me that

and have a nice day both of you :slight_smile:

1 Like
#11

@wszhan Great to hear that everything worked at the end :upside_down_face:. @justsomeone for sure is a :goat: when it comes to these things…

2 Likes
#12

loool thanks a lot :smile:

1 Like