THE DIFFERENCE BETWEEN ABSOLUTE & RELATIVE PATHS -------------------------------------------------------------------------------- **TL;DR** @@1. Relative Paths = src="images/file.gif", src="./images/file.gif, src="../images/file.gif, src="../../images/file.gif @@2. Root Relative Path = src="/images/file.gif" @@3. Absolute Path = src="http://www.example.com/images/file.gif" @@4. NO performance difference -------------------------------------------------------------------------------- ###**What are absolute / relative paths?**### These are the two different style of paths or "links" that you can use in your code to reference files and where they are at on your server. ###**What makes them different?**### The way the path / link is written in your site's code is the biggest different. An **absolute path** is the full URL to a file. A **relative path** points to the location of the file you want to link to in relation to the page being viewed _all within your server space_. If the page you're linking to is in the same directory as the page being viewed then the relative path is simply the page name. Below you can find an email of each style of link: **ABSOLUTE:** Page **RELATIVE:** Page ###**Where is the relative path pointing?**### Because we're referencing a file on our server we don't need to tell the client (aka browser) to look anywhere else. We can provide information about where on the server (in relation to the exact page you're visiting and the directory on the server that page is stored) the files that we want are. The idea is that the files are located "relative" to whatever page we are currently on. Are the files located in the same directory / folder as the page we're on? Are they located in a different directory / folder? If so is that directory / folder IN the directory / folder the page we're on is in, or is it outside of it? We can easily specify this information with relative links; the chart below explains how we do that: | Server Path | What it means | |---------------------------------|-------------------------------------------------------------------------------------------------------------------------------------| | | page.html is located in the current directory | | | page.html is located in a folder (directory) called "tips". The "tips" folder is located in the current directory. | | | page.html is located in a folder called "other" that is located in a folder called "tips" that is located in the current directory. | | | page.html is located in a folder one levee up from the current directory. | | | page.html is located in a folder two levels up from the current directory. ###**Does the server know which style of link we're using?**### Nope! Let me explain what happens when you visit a page: 1. You want to visit a site, say http://thisisnotadomain.com, and type that into your browser 2. Your browser makes a connection to the server, and any PHP that's requested is interpreted (converted) into a single, flat HTML file, which is delivered to the browser first 3. That HTML file contains no images, little to no CSS/javascript (only the parts that are inline with the HTML) 4. The browser then makes subsequent requests for any images or other elements depending on what the flat HTML file it received earlier requires in order to display proplery. 5. If the code contains absolute links, no extra step is required, and because the DNS query was made initially for the site the query is cached, meaning it doesn't have to make it again to get the files 6. If the code contains relative links, the request is prepended with the appropriate hostname and then the server provides the appropriate file. Again, the DNS query is cached, so no additional steps are necessary. 7. All the files are eventually requested / received and your browser displays the completed page. ### WARNING: this point and beyond gets highly technical ### -------------------------------------------------------------------------------- Let's take a look from the server / browser perspective how the code actually gets interpreted and what the server sees: Example code on a page: path test This image loaded by relative path:

This image loaded by absolute path:

10.20.7.143 - - [10/Oct/2013:10:37:59 -0400] "GET /lw/pathtest.html HTTP/1.1" 200 248 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36" 10.20.7.143 - - [10/Oct/2013:10:37:59 -0400] "GET /lw/prop-service.jpg HTTP/1.1" 200 8777 "http://heyjosh.net/lw/pathtest.html" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36" 10.20.7.143 - - [10/Oct/2013:10:37:59 -0400] "GET /lw/prop-support.jpg HTTP/1.1" 200 7540 "http://heyjosh.net/lw/pathtest.html" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36" GET /lw/prop-support.jpg HTTP/1.1 Host: heyjosh.net User-Agent: Mozilla/5.0 (X11; Linux i686; rv:17.0) Gecko/20100101 Firefox/17.0 Accept: image/png,image/*;q=0.8,*/*;q=0.5 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate Connection: keep-alive Referer: http://heyjosh.net/lw/pathtest.html Pragma: no-cache Cache-Control: no-cache GET /lw/prop-service.jpg HTTP/1.1 Host: heyjosh.net User-Agent: Mozilla/5.0 (X11; Linux i686; rv:17.0) Gecko/20100101 Firefox/17.0 Accept: image/png,image/*;q=0.8,*/*;q=0.5 Accept-Language: en-US,en;q=0.5 Accept-Encoding: gzip, deflate Connection: keep-alive Referer: http://heyjosh.net/lw/pathtest.html Pragma: no-cache Cache-Control: no-cache When a website is loaded, any CMS in use will deliver a single HTML file, generated by PHP.  That flat HTML is the first thing the browser receives.  It contains the HTML code for the page, from to .  It contains no images, and little to no CSS/javascript.  It only contains HTML code, and other embedded flat text scripting (CSS/Javascript) which is inline in that HTML. The *browser* then makes subsequent requests for any images or other elements.  Whether the references are absolute or relative, makes no difference.  The browser still makes the same request to the server, from its own IP.  In short, it is the *browser* which translates relative paths to absolute, by prepending the request with the appropriate hostname. http://www.boogiejack.com/server_paths.html