1. Technology

Why don't my images show on my Web page?

Uploading, Linking, and Using Images

By

Holding note of exclamation
Niels Laan/E+/Getty Images

When you're building a Web page, you'll want to add images. Most WYSIWYG editors (Expression Web, Dreamweaver, Nvu, etc.) can make this easy to do. But even with these editors, you can end up with a page live on the Web with no images or broken images.

The most common problem on a beginner's website is broken images. There are several causes of this:

  1. the images were not uploaded
  2. the images were uploaded incorrectly (less and less common now)
  3. the images were uploaded but not linked to correctly in the HTML

Fixing the Problem

The first thing you need to do is figure out what the problem is.

  1. the images were not uploaded
    If you do not remember opening your FTP client or Web access and choosing your images to upload, then you should do this again. Re-uploading your images allows you to be sure that they are on the site in the first place.


  2. the images were uploaded incorrectly
    If you are uploading images through a Web page, this doesn't apply to you.

    If you are using a drag and drop FTP client less than 2 years old, this doesn't apply to you.

    This problem is very uncommon now, as most FTP clients will upload images automatically in the correct "mode". However, if you are using a text based FTP client or your client doesn't change the mode automatically, you should make sure that your images are uploaded in "binary" format (the other choice is ASCII).


  3. the images were uploaded but not linked to correctly in the HTML
    This is the most common problem when images are not displaying on a Web page. And there are several reasons for it.

Where Your Images Are on the Server is Important

It's not enough that you upload your images to your Web server, you need to know where exactly you're putting them.

When you build a Web page on your hard drive, the best way to do it is to create a local version of your Web server files and directories. This will help you remember where things are kept and make it easy to upload into the correct locations on your Web server. For example, on one of my sites I have a directory structure that looks something like this:

  • /
    My home directory, where my index file is stored
  • /library/
    The library, where my articles are stored
  • /images/
    My images directory
  • /links/
    My links directory

These directories are mirrored on my local hard drive, with all the files that I have on my server in the same directories as on the server:

  • c:\website\
  • c:\website\library\
  • c:\website\images\
  • c:\website\links\

The directory structures are essentially the same. The differences are:

  • my hard drive includes the drive letter "C:"
  • I have my pages in a sub-directory called "\website\"
  • since I'm on a Windows machine, my hard drive uses back slashes (\) and the Web server uses forward slashes (/)

When I make a change to a file in the C:\website\links\ folder, I know I need to upload it to /links/ on my Web server. This organization also makes it easy to see when a file hasn't been updated on the server, if the server and my hard drive aren't mirror images, then I know I need to upload something.

An image can be missing from a Web page if you upload it to the wrong directory. But if your local directories and your Web server directory trees match, you'll be less likely to make a mistake when uploading.

Image Names are Important, Too

When you link to an image on your hard drive, you may not realize that the image name or how you're linking to it could cause problems on your Web server. There are two things to remember when naming images, and then linking to them in your Web pages:

  • Most Web servers are case sensitive. This means that an image called "House.jpg" is going to be different from an image named "house.jpg". I recommend you give all your files lowercase filenames, and then always link to them in the lowercase as well.
  • Many Web servers don't like spaces in file names. While you can create an image and name it "my house.jpg" on most computers, the space can cause problems on Web servers. I recommend you name all your images using only letters (a-z), numbers (0-9), underscore (_) and hyphen (-).

Link Correctly to Your Images So They Don't Disappear

The best way to link to images so that they display on both your local drive and your Web server is to link them using "relative links". There are two ways of linking to files and images on the Web: absolute and relative.

  • absolute links
    These are links that have the full URL and all directory information encoded in the link. Most WYSIWYG editors use this type of link, resulting in an image tag that looks something like this:
    <img src="C:\website\images\house.jpg" width="200" height="400" alt="My House" />
  • relative links
    These are links that relate where the current page is to where the image or document is located. They rely on the images and HTML pages not being moved out of their current location. They generally look something like this:
    <img src="../images/house.jpg" width="200" height="400" alt="My House" />

Relative links work because they don't refer to exactly where the image is, just where it is in relation to the current page. It uses slashes (/) to represent directories or folders and double dots (..) to represent moving up one step in the directory tree. For instance, you know that I store all my graphics in C:\website\images\ and I store all my articles in C:\website\library\. If I have an image called "house.jpg" in my images directory that I want to display in an article, I would link to it like this:

<img src="../images/house.jpg" width="200" height="400" alt="My House" />

Many images disappear from Web pages because the Web designer forgot to change the image source links from absolute references on their hard drive to relative paths on the server. If you view the source of your Web pages on the server and see "C:\" or "file://" in the src="" attribute of your images, those images won't display correctly.

Previous Features

©2014 About.com. All rights reserved.