One of the common issues that new webmasters face is when images and links to other pages either disappear or don’t work once the website is uploaded to a web server. This is usually for one of three reasons:

• The image or the page that is linked hasn’t been uploaded
• The HTML editor has given the image a ‘local’ filepath
• The image has been uploaded to a different location

While it may seem a fairly basic thing … files and folders … this is a really deep subject folks so I’ll try my best to make sense of it for you. Let’s start by looking at how things are organised on your computer versus how they are organized on a web server.

Your Computer

If you are a fairly organised person then you probably have your website in a specific location like My Documents->My Web Sites. That location, on your hard drive, is actually going to be something like c:\users\yourname\Documents\My Web Sites. You might have your images in a folder called images (which would be c:\users\yourname\Documents\My Web Sites\images). If you’re wondering where the whole ‘C:’ thing came from, it was simply a design decision. The operating system has to be able to access the physical hard drive and giving each hard drive a letter seemed like a good idea I guess! It started as C: because floppy drives were around before hard drives and they were always called the A: drive and the B: drive.

The first thing to understand that is really important is that images can be referenced in two ways. Those two ways are called ‘relative path’ and ‘absolute path’. The relative path is the path in relation to the web page. The absolute path is the full path on the hard drive. So, continuing with our example we’ll assume you have a page called index.html and it has a header image that is in the images folder and is named ‘header.gif’. In your html code for the page it can be written in two ways:

Relative – <img src=”images/header.gif”>

Absolute – <img src=”c:\users\yourname\Documents\My Web Sites\images\header.gif”>

There’s quite an obvious difference there and hopefully that example kind of explains how a relative path works. With the relative path we don’t need to know where the image is in relation to the hard drive – we just need to know where it is in relation to the web page. With the absolute path we’re putting the whole hard drive path in there. The obvious problem with using the absolute path is that the image is  only going to appear if the web page is placed in that exact same folder when it gets uploaded. As soon as you move it somewhere else then the absolute path isn’t valid any more.

The other advantage of relative paths is that they will work regardless of the operating system. Which brings us to…

The Hosting Account

The vast majority of hosting services will, by default, give you a unix (i.e. Linux) based hosting account. Files on a unix server are organised a whole lot differently to a Windows hard drive. Where your windows hard drive has a letter, a unix hard drive has none. So, on a unix hard drive the equivalent of ‘c:\’ would be ‘/’. Yep..that’s right. Just a simple forward slash. The unix hard drive is similar once you look below the slash. It has the familiar tree-like structure that a windows hard drive has.

On a unix hosting account you will most likely have a ‘home’ directory (a directory is the same as a folder by the way). Your home directory will be somewhere like /home/yourname where ‘yourname’ is the first 8 letters of your domain name. My home directory for this site, for example, is ‘/home/thewebma’. Under that home directory will be a directory called either ‘public_html’ (if you have a CPanel control panel for your account) or ‘httpdocs’ (if you have a Plesk control panel). Now if you were thinking that the absolute path to our image, when uploaded to the web server might be something like /home/yourname/images/header.gif’ then I’m sad to say you’re wrong. This is because there’s a bit of trickery going on in there.

Your home directory on a web hosting account doesn’t just have your web pages. It stores your web stats, your email accounts and the configuration for your hosting account. If we were to allow the web server to access those areas then it would be mayhem with everyone being able to see and/or mess with your configuration and email accounts. With this in mind, the web server only gets to see whatever is inside the public_html (or httpdocs) directory. This keeps everything safe … unless you decide to copy all your emails and config to that directory which would be kind of silly. So, with all of that good stuff in mind we can now say that your web site starts in the public_html (or httpdocs) directory and that directory, as far as the web server is concerned is called ‘/’. So, taking that a step further … you would upload your index.html into the public_html folder and you would upload your image into a folder called images that would be created inside the public_html folder. Using our earlier windows example it would be fair to guess that the html code for the image would now be:

Relative – <img src=”images/header.gif”>

Absolute – <img src=”/home/yourname/public_html/images/header.gif”>

I can tell you right now that the absolute path will never work. As I mentioned, the web server isn’t allowed to see anything above the public_html directory so it’s just not going to display that image. The main point here is that the relative paths for your windows hard drive and the unix hosting account are the same.

There’s one final twist in this tale that could still trip you up. If you do happen to use an absolute path to an image on your hard drive, the image is still going to show okay on your uploaded website when YOU view it – because you really do have that image on your C: drive.  But for everyone else who views the website the image won’t appear simply because they don’t have your ‘documents\My Websites’ directory on their hard drive.