I could not get my images loaded responsively so I tried the following steps but still failed:
- 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.
- Load the HTML file in the browser, the four images in the
further-infopart are all loaded with 400 pixels version.
- I tried both ‘Inspect Element’ in Firefox and ‘Inspect’ in Google and loaded the page simulating devices with less than 500px width.
- 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!