Home > Web Development > Abosolute vs. Relative Path

Abosolute vs. Relative Path

When we create a web-page at which there are some links (URLs) to images or other pages, links are written either in an absolute or relative way (commonly known as absolute and relative paths).

Suppose that we’ve a website whose domain name is http://www.shoubraeng.com and there’s a web-page that’s in the directory http://www.shoubraeng.com/pages/project/index.html.

Let’s also assume that there’s a subdirectory of the project directory called images.

Here’s a description of the hierarchy (directories are written in bold):

|___ pages

____|____ picture1.jpg

____|____ project

_________|_____ picture2.jpg

_________|_____ index.html

_________|_____ images

_______________|_____ picture3.jpg

The index.html page is the web-page of interest. We’re trying to make a background picture to it from the available 3 pictures. picture1.jpg is in the pages directory, picture2.jpg is in the project directory and picture3.jpg is in the images directory.

Now let’s see the different ways to link to any of these pictures.

Absolute Path

The easy way is to use the absolute/full path of the image that looks like:

<body background=”http://www.shoubraeng.com/pages/picture1.jpg“> or

<body background=”http://http://www.shoubraeng.com/pages/project/images/picture3.jpg“>

You might have guessed that it’s called absolute/full because it contains the very specific path to the image.

One more note about absolute paths is that if the file is on the same domain of your web-page then you may not write the domain name but just start with a slash (/) like:

<body background=”/pages/picture1.jpg“>

Relative Path

It’s called relative because it’s described relative to the path of your web-page regardless of its position.

1- If you are linking to picture2.jpg that’s in the same directory of your index.html web-page then – using relative path – you may just write its name as follows:

<body background=”picture2.jpg“>

Writing only the name of the image in the path tells the browser that it’s in the same directory of the web-page that is being loaded now.

2- If you are linking to picture3.jpg that’s in a subdirectory of your index.html webp-page, it will then look like:

<body background=”images/picture3.jpg“>

It should also be noticeable that starting with a directory name (with no / at the beginning) tells the browser to find the image in the subdirectory located in the directory of the web-page that’s being loaded now.

3- If you are linking to picture1.jpg that’s up on directory from the web-page it will then look like:

<body background=”../picture1.jpg“>

The double dots (..) here tells the browser to go up on directory to find the image.

Which is better … absolute or relative path?

Each is preferred at certain conditions.

Absolute path is better when what you link to is used in multiple pages across your website so that it doesn’t matter where your page is. Suppose that there’s a banner image that you use for all pages in your website … is it good to replicate the image in every folder of your website to use a relative path of it in every web-page there? Of course not.

Relative path is better when what you link to is very specific to the web-page and is located in the same directory containing that web-page or a subdirectory of it. Suppose a situation where you are writing an article web-page that contains many related pictures inside it. You’ve made a directory containing your article and a subdirectory containing all the article-related images. Now you are going to link to these images using either absolute or relative paths and you wonder which is better! Ask yourself the following question and it should reply you …. what if you later moved the article to a different domain? If were’re linking to images in an absolute way then you will have to change all paths again to the new domain but if you were using relative paths then you will not have to change anything.

This is because what is relative here is relative there!

Ahmed Abdullah Hussein

Advertisements
  1. Sarah Daniel
    March 12, 2010 at 10:06 AM

    Thank you. This was helpful.

  2. MaHa
    August 22, 2010 at 6:49 PM

    A wonderful topic as all the topics in your blog . Thanks a lot .

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: