Adding Images to Your Web Pages

Getting Images to Display Properly

Woman working at computer
Alistair Berg/Digital Vision/Getty Images

Any images that you want to link in your website's HTML should first be uploaded to the same place you send the HTML for the web page, whether the site is hosted on a web server that you reach by FTP or you use a web hosting service. If you use a web hosting service, you probably use an upload form provided by the service. These forms are typically in the administration section of your hosting account.

Uploading your image to the hosting service is only the first step. Then you need to add a tag in the HTML to identify it. 

Uploading Images to the Same Directory as the HTML

Your photos may be located in the same directory as the HTML. If that is the case:

  1. Upload an image to the root of your website.
  2. Add an image tag in your HTML to point to the image.
  3. Upload the HTML file to the root of your website.
  4. Test the file by opening the page in your web browser.

The image tag takes the following format:


 

Assuming you are uploading a photo of the moon with the name "lunar.jpg," the image tag takes the following form:

 

The height and width are optional but recommended. Note that the image tag does not require a closing tag.

If you are linking to an image in another document, use anchor tags and nest the image tag inside. 

Uploading Images in a Subdirectory

It is more common to store images in a sub-directory, usually called Images.

In order to point to images in that directory, you need to know where it is in relation to the root of your website.

The root of your website is where the URL, without any directories on the end, displays. For example, for a website named "MyWebpage.com," the root follows this form: http://MyWebpage.com/.

Notice the slash at the end. This is how the root of a directory is usually indicated. Subdirectories include that slash to show where they sit in the directory structure. The MyWebpage example site might have the structure:

http://MyWebpage.com/ — the root directory

http://MyWebpage.com/products/ — the products directory

http://MyWebpage.com/products/documentation/ — the documentation directory under the products directory

http://MyWebpage.com/images/ — the images directory

In this case, when you point to your image in the images directory, you write:


 

This is called the absolute path to your image.

Common Problems With Images That Don't Display

Getting images to show up on your web page can be challenging at first. The two most common reasons are that the image was not uploaded where the HTML is pointing, or the HTML is written incorrectly.

The first thing to do is see if you can find your image online. Most hosting providers have some type of management tool that you can use to see where you uploaded your images. After you think you have the correct URL for your image, type it into your browser. If the image shows up, then you have the correct location.

Then check that your HTML is pointing to that image.

The easiest way to do that is to paste the image URL that you just tested into the SRC attribute. Re-upload the page and test.

The SRC attribute of your image tag should never start with C:\ or file: These will appear to work when you test your web page on your own computer, but everyone who visits your site will see a broken image. This is because C:\ points to a location on your hard drive. Since the image is on your hard drive, it displays when you view it.