Images from my website won't load in mobile browsers

Question

I'm building a REALLY basic 'Hello World' HTML/CSS site to get used to coding from scratch (previously I relied heavily on Dreamweaver trial and error!).

Everything was looking great on my laptop but I wanted to test how the site looked on a mobile browser, so I saved the site folder to my Dropbox and tried to load the home page from my Android phone.

The page loads perfectly but the one image I have doesn't - I just get the alt text. This is the case for both Android's native browser and Opera mobile.

I have tried both .jpg and .gif file types, and also adding in a fixed width, height and border value as suggested on another thread here (this changes the shape of the alt text placeholder but that's all). I did also add a '/' at the tail of the <img> tag, again to no avail.

I'm amazed that this is a problem for such a basic page, but I have triple-checked all my code in the textbook I'm using, so I'm not sure what to do except post here!

The HTML for the image concerned is as follows:

<div id="banner"><img src="750x262PxBanner.gif" width="100%" alt="banner"></div>

I have no CSS for this div beyond padding-top: 10px , and the image is in the same folder as the page it's on - as I say this is a VERY basic site, and it looks fine on my laptop!

Thanks in advance for any advice.

Answer 1

Try to access the picture's URL from your smartphone , and check if the image loads correctly (acces the .../750x262PxBanner.gif instead of .../index.html ): maybe the URI is incorrect for the smartphone, or the file format isn't supported.

Rename the picture to avoid case sensitiveness (use lower case only for instance).

Else, try not to start the picture's name with [0-9] .

Answer 2

A few suggestions:

1. Try giving width and height of that image in pixels and recheck. Like this <img src="750x262PxBanner.gif" width="750px" height="262px" alt="banner"> (doesnt makes big sense, but may work in rarest of scenarios)
2. Try putting the absolute image path to know weather loading is an issue or not.
3. Try renaming the image to banner or something without numbers. (Again, really doesnt make great sense, but may or may not work)
4. Try to host files with some hosting or upload the same on some FTP