Your website is indeed very informative… I would be very thankful if you could kindly clear my confusion. My website looks fine when I tested on my computer but when it is loaded at the server and viewed later using IE, some images are not displayed on the web site. I tried with both the GIF and JPG format. Before loading the pages everything is fine… is this a problem with my pages/images or the server?
This is a very common problem faced by budding web developers. Things work fine on the local computer but when uploaded to a server, the images just do not display on the web site. To be truthful, I too had a brush with this issue… a decade ago.
Here are some troubleshooting tips to help you get the images displayed on the web site when its loaded from the server.
Why aren’t the images displaying?
- Images haven’t been uploaded
Let us not negate this option. It is a possibility that the images were not uploaded or not uploaded properly. When using FTP, ensure you select the binary upload mode. Though most modern FTP programs will handle this on their own, there is no harm in making assurance doubly sure, right?.
- Images haven’t been uploaded to the correct directory
You need to confirm whether the images are in the same directory as specified in the src attribute. This, however, concerns only those developers who have segregated images into a separate folder (highly recommended).
- VERY IMPORTANT: The problem of the case of letters in the file name or the URL
This is the most common cause of the image not displaying on the web site problem. Those of you who are developing the web site on a Windows based computer and have Unix/Linux on the web server need to take care.
Windows ignores the case of the letters in the file name; for it, MyPhoto.JPG is the same as myphoto.jpg. Unix and Linux are, however, case sensitive. So if the images are loading fine on your computer but fail on the server, check the case of letters in the file names.
- Directory name
Continuing the above point, remember, on Unix/Linux directory names are case-sensitive too.
- Improper saving of file extensions by image editors
Some image editors are known to use uppercase for file extensions; thus, .JPG instead of .jpg. And as we know from the above points, specifying the incorrect case in the src attribute will affect images being displayed properly from Unix/Linux web servers.
- Image file name contains spaces or special characters
This, again, will lead to problems if the operating systems on the local and remote web server are different. I suggest replacing the spaces and special characters with either hyphens (recommended) or the underscore.
- Images are huge and you use a very slow internet connection
It will take a long time for very large images to be downloaded on slow internet connection. The web server might just give up and this will result in the box with the red cross or a broken image icon.
By the way, the local computer and the web server do not need to have the same operating system. For instance, I have always developed on Windows and used a Unix/Linux/FreeBSD web server. You just need to keep the case of letters issue in mind and you’ll learn with experience as I have.