Relative URLs and Absolute URLs

by kirupa (https://www.kirupa.com/me/index.htm) | 2 September 2013

A lightly contentious issue for many web developers revolves around what kind of URL scheme one should use when referencing resources and links within the same site. For example, you can use a fully-qualified absolute URL:

<img src="//www.kirupa.com/images/foo.png" width=100 height=100>

You can also use the more compact relative URL:

<img src="../images/foo.png" width=100 height=100>

Now, this article isn't about picking sides and telling you why one is superior to the other. The reason is that you need to use both absolute and relative URLs as part of creating your sites and apps. Instead, this article will show you when to use which.

Onwards!

When to Use Absolute URLs

Absolute URLs point to something without any regard for context. A URL like //www.kirupa.com/images/foo.png is something that works in your browser, on a friend's blog, in outer space, or wherever. There aren't too many times when you would need to use absolute URLs. In fact, I can think of two general cases when you need to...

You are Pointing to Content Outside of Your Site

If the content you are referencing lives outside of your domain, you have to use an absolute URL:

[Image: absolute references] (https://www.kirupa.com/html5/images/absolute_references.png)

There is simply no way to use relative URLs for things that go outside of the domain your HTML page is currently in. This applies to things in subdomains as well. You can't reference something in a subdomain using a relative URL syntax.

Your References Will Change Depending on Context

Some of your HTML will find itself merged with other pieces of HTML and served on a variety of different pages in your site. While this may sound like a bizarre scenario, this is exactly what happens when you employ server side includes or site-wide templates to make your content more modular and reusable.

URLs inside these "template" pages cannot assume that relative paths will still work when they find themselves in different locations. For example, this is what the markup for something on this site that gets server side included looks like:

<div id="bookBannerContent">
	<p class="centerImageNoBorder">
		<a href="//www.kirupa.com/book/animation_in_html_css_and_javascript.htm">
		<img id="bookAd" src="//www.kirupa.com/supporter/animation_book_right_banner.png" width="231" height="251"></a>
	</p>
	<ul>
		<li>
		<a href="http://www.amazon.com/dp/1482758954" style="background-image: url('//www.kirupa.com/mini_icons/entypo/shopping_20x20.png');">
		Buy on Amazon.com</a>
		</li>
	</ul>
</div>

Notice that all references are made up of absolute URLs - even for content that lives within kirupa.com. The reason is that this HTML is served up on the sidebar which is then included on pages living in various different directories across the site.

Use Relative URLs Whenever Possible

Outside of the two cases you saw earlier, for any other kinds of references, use relative URLs. There is no point in cluttering your markup with unnecessary characters when your browser, search engines, and everything else on the planet knows how to work with relative URLs and resolve things properly.

If you do some research on the net, you'll see some other reasons people provide for going with relative URLs. Some of them include:

- Relative URLs make it easy to have everything working when switching from a staging/dev environment to a live environment with a different domain.
- When you use an absolute URL, your browser has to do a DNS lookup. Relative URLs avoid that problem so you gain a few microseconds. (More than likely, your browser is smart enough and avoids you having to do this altogether)
- Because absolute URLs use up more characters, they increase the file size of your pages...by a few hundred bytes at most. Yep.

There are a few other reasons, but I wouldn't mention them in public. I feel a bit ashamed about listing the three you see here, for I'm not sure how relevant they even are these days.

Conclusion

Neither absolute URLs nor relative URLs are good enough to use exclusively on their own. Use the right one for the right situation. To point to external content or to reference things from inside a site-wide template or server-side included page, I use absolute URLs. For everything else, I use relative URLs.