Absolute Or Relative Image Linking?

Pros & Cons?

[spyder_tek]

I was wondering if anyone could explain to me the pros and cons of "absolute" vs "relative" image source linking?

For example...

Absolute image linking:

<img src="http://www.domain.com/images/zpicture.jpg">

VS

Relative image linking:

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

I understand that the relative approach makes life easier if the domain name ever gets changed to something else.

What mainly concerns me, is performance, security, and compatibility.

In terms of performance, are there any issues surrounding load time or dns lookup?

What are your experiences?

Thank you very much.

[zollerwagner]

I'm certainly not an expert at this, but I can tell you a little.

I'd suggest something slightly different. I have all of my files linked like this:
href="/images/xyz.gif"

I'd guess that this is a simple form of absolute but I'm not sure.

That "/" means root, so I have to be sure that I include all of the path to root. The advantage is that it's no problem moving files from one directory to another or from one site to another. The server knows what the URL is, so it can handle that part easily.

This also makes it easy when used with a subdomain for testing. You don't have to do anything to the links when you move files into the live part of the site.

I used to do relative href="../images/xyz.gif" but that can get pretty confusing.

Including the full url limits your ability to transfer the files to other sites or subdomains and it'll make the file bigger.

[mcmrob]

..and if you're using your entire URL each time you call an image, you'll be increasing your load time.

"/images/image.gif" has my personal preference, for the same reasons mentioned above.

[Soave]

I am having a problem along these lines. I'm useing a Windows XP Tablet PC edition. When I put in links relative to the site root Firefox doesn't recoginize the links, eventhough they work just fine in IE 6. But if I use links relative tho the page they work just fine. Has anyone ever heard of this before or how to fix it? Is it a problem with my comptuer or my code?
<a href="/Tablet_PC/Tablet_PC.html> won't work from anywhere but the root directory.
But if I use <a href="../Tablet_PC/Tablet_PC.html> from anywhere in a second tier directory it works just fine

[zollerwagner]

That's very odd.

You're saying that if you put this:
<a href="/Tablet_PC/Tablet_PC.html>
in any directory but root, it won't work?
And this is in a normal html page?

I don't know how much the browser does in determining where to look for files. I thought that would all be done on the server, but I could be wrong.

[zollerwagner]

I went over to the mozilla forum on Firefox to look for help on this. It does seem that the different browsers look for files in different places. Supposedly IE gets it wrong. (Of course, most of us are thinking like IE, so you've got to wonder!)

I think the answer will depend on what you are serving your pages from. If you are viewing them from: a Unix server, a Windows PC, etc.

In a response from a person who was working on showing a site from a CD-Rom, Unarmed replies:

The leading slash anchors the absolute link to the root of the file system, which can mean different things in different operating systems. IE assumes that the root is on a per-drive basis, but UNIX-based filesystems don't have this luxury. Since Firefox is cross-platform, it errs on the side of caution and does not make that assumption.

A completely cross-browser solution would be to only use relative links (i.e. without the leading slash), but you'll have to modify pages in subdirectories.

And...

Right, there is no "/" in Windows. So using relative links is the best cross-browser and cross-platform solution.

Say your directory structure looks like so:
Code:
+-Root
+-index.html
+-Images
¦ +-logo.gif
+-Subdirectory
+-page.html

In index.html, you can reference logo.gif as simply src="Images/logo.gif".

In page.html, however, you need to up one directory, then go into the Images directory, like so: src="../Images/logo.gif"

[Soave]

You got it. It shows the proper path in the status bar on the bottom but it won't let me click the link. Also if I just the same principal for an <img> tag I get the same problem the image won't load.

I have tried it with both an html page and an xhtml page but neither worked.

But what you just said gave me the idea to test it on my server and Firefox was able to read and understand the links.

Before I was putting the files onto an external drive that the computer read as D: so the site would be read as file:///d:/Tablet_PC/Tablet_pc.xhtml.

I guess firefox can't read root links in a non HTTP environment.

[Soave]

zollerwagner, I didn't see you comments before posting my last one. The way you suggested is the way I have it set up now I was trying for a little more simplicity so I didn't have to change my links from my index.html to my other pages but I guess that is the most reliable way to do it.

Thanks

[zollerwagner]

Hey, no problem. I learned something, too! I do most of my work live on the server, so I'll stick with the "/folder/file" method because it makes it--almost everything--much easier.

[Soave]

FYI

I found a way to do this all on my local machine and get Firefox to read the <a href="/"> style links. I set up a local site using Windows XP's IIS service (contronl panel/Administrative Tools/Internet Information Services). Then I set up a website inside there (this can be tricky if you don't know how to do it already) and then in my explorere bar I use [localhost...] And all my links work fine in both IE and FF, even the site root links.

Thanks

[spyder_tek]

Thanks for all your help! This thread has proven to be most helpful.

I've decided to just use relative linking instead of absolute. I now use <img src="images/image.jpg">

Soave, I also thought of something else you could try in the future. Try adding a period in front of the leading forward slash:

<a href="./Tablet_PC/Tablet_PC.html>

This would tell the browser to search in the current directory (granted the file is in the current directory), and then look for a directory called Tablet_PC, and then Tablet_PC.html

I also tried the above method and it seems to work fine on all the major browsers.

Thanks again everyone.