How to Add an Image to Your Web Page

Adding an image is fairly easy, but there are plenty of things that can go wrong, too. Where people run into trouble is not paying enough attention to details. The path to the image, the image name, and the image extension are all case sensitive.

Case sensitive means that you must capitalize the letters in your image link that are capitalized in the saved image file, file extension, and directory names, and enter the letters in lower case in your code that are in lower case in the same areas.

The image path is simply the path (on your server or hard drive) from the page you want to use the image on to where the image file is stored.

If your image and html file are in the same directory, you would code the image like this:

<img src="image_name.jpg">

If it's coded correctly the image would show up at the spot on your web page that you placed it in your code. If your image was stored in a folder named images and that image folder were in the same folder where your web page file is stored, the path would then be like this:

<img src="images/image_name.jpg">

It's a good idea to keep your images in a separate directory like that. It makes it easier to find things when you're looking for them because there is less to sort through. Depending on how large your site is, this practice can also speed up your web page download time because the server has less files to sort through, too. As you build your web pages on your computer, if you keep the directory structure the same on your computer as you will have them on your web host's server, you can view the pages on your computer and verify that all your links and images work properly before uploading the files to the server.

Unless you have a huge site with tons of images like my BoogieJack.com site, just having a folder called "images" (without the quotes) in the same place as you keep your html files will be sufficient. Because the Boogie Jack site also offers a variety of web graphics, I keep the images used in the site design in one folder, the backgrounds I offer to the public in another folder, the buttons in another and so on.

Common Mistakes

1. As I mentioned earlier, coding the image is case sensitive. If your image is saved as mom.jpg and you type it in as Mom.jpg it won't show up on your page because you capitalized the first letter of mom. Mom's don't usually like to be capitalized anyway, most are less formal than that.

   The same goes for the image extension. Some programs save an image with a lower case extension and some with upper case. If you type it in wrong it won't work.

2. Another mistake is typing in the wrong file extension. If you code a .jpg image as .gif, the image will not work, and vice-versa.

3. Another common mistake is to forget to include both the quotation marks around the image name and file extension. Check that if your image isn't showing up.

4. Another common mistake is to incorrectly identify the path to the image. If you code your image like this:

   <img src="image_name.jpg">
   

   ...but keep it in a folder called graphics it won't work because the path to the image is incorrect, as it didn't reference the graphics folder.

5. I seen many people using HTML editors have broken image links because the HTML editor inserts the image with a reference to the C:drive on the site owners computer. The web server can not show an image located on your hard drive to anyone but you, so while an image referenced this way would still work online for you because the path would still be correct, it won't work for anyone else but you because no one else will have the exact same image with the exact same name in the exact same location on their hard drive.

6. The final mistake to check when your image doesn't show up is often made when the image is uploaded to the server. Images must be uploaded in binary mode. Some programs use automatic detection, but with others you have to choose between binary and ASCII mode. Images uploaded in ASCII mode will be corrupt and will not work.

Oh yes, one last thing...be sure you actually upload the image. I've had people write to me that have spent hours examing their code trying to figure out what was wrong with their image, when the only problem was that they forgot to upload the images or they uploaded it to the wrong folder.

Silly rabbits, those Trix are for kids.