Best location for images and CSS

Two street signs saying one way but in both directionsWhere should images and CSS files be located on a web server? Should we aim for portability, simplicity, consistency? There are many factors at work when trying to decide the image and CSS directory on a website. We've tried many locations but have ended up liking one in particular.

The biggest problem with the image and CSS location conundrum is the way our CSS and HTML documents work.

Our HTML documents use a base location from the root of your website. Therefore image locations usually start from / or from our base href location. Our CSS documents start image locations from the CSS root which could be something like http://www.marcwatts.com.au/css/. This causes an inconsistency between the starting positions of each image location. So let's look at some examples to further clarify how we can locate our images.

/* <base href="http://www.marcwatts.com.au" /> <link rel="stylesheet" href="templates/website/css/css_file_1.css" type="text/css" /> <link rel="stylesheet" href="templates/website/css/css_file_2.css" type="text/css" /> <link rel="stylesheet" href="templates/website/css/css_file_3.css" type="text/css" /> image directory = templates/website/images/ */ /* html */ <img src="/templates/website/images/some_image.jpg" alt="Some Image" /> /* css */ background: url(/templates/website/images/some_background.jpg);

There are a couple of problems with the above format. The biggest is starting our image locations with a slash. What this is effectively doing is forcing our website to be in the root of the domain. For example http://www.marcwatts.com.au. But what happens if we have our website on a staging server such as http://www.staging.marcwatts.com.au/website_1/. This suddenly breaks our image location code as it means images will try to be found from the root of our staging server instead of under the sub directory where our website is. This can also be a problem if your website has multiple sections such as http://www.marcwatts.com.au/shop/. What we need to do is never use a slash to start any locations just in case our website moves.

/* <base href="http://www.marcwatts.com.au/shop/" /> <link rel="stylesheet" href="templates/website/css/css_file_1.css" type="text/css" /> <link rel="stylesheet" href="templates/website/css/css_file_2.css" type="text/css" /> <link rel="stylesheet" href="templates/website/css/css_file_3.css" type="text/css" /> image directory = templates/website/images/ */ /* html */ <img src="templates/website/images/some_image.jpg" alt="Some Image" /> /* css */ background: url(../images/some_background.jpg);

We have now eliminated our locations from starting with a slash but this has caused an inconsistency with our code. Our HTML documents are starting with templates/ and our CSS documents start with ../.

Let's see what happens if we move our images to our CSS directory.

/* <base href="http://www.marcwatts.com.au/shop/" /> <link rel="stylesheet" href="templates/website/css/css_file_1.css" type="text/css" /> <link rel="stylesheet" href="templates/website/css/css_file_2.css" type="text/css" /> <link rel="stylesheet" href="templates/website/css/css_file_3.css" type="text/css" /> image directory = templates/website/css/images/ */ /* html */ <img src="templates/website/css/images/some_image.jpg" alt="Some Image" /> /* css */ background: url(images/some_background.jpg);

Well that is a little better as we now don't have the ../ in our locations, but it is still inconsistent. Let's try moving our CSS and image directory to the root of the website.

/* <base href="http://www.marcwatts.com.au/shop/"/> <link rel="stylesheet" href="css/css_file_1.css" type="text/css" /> <link rel="stylesheet" href="css/css_file_2.css" type="text/css" /> <link rel="stylesheet" href="css/css_file_3.css" type="text/css" /> image directory = css/images/ */ /* html */ <img src="css/images/some_image.jpg" alt="Some Image" /> /* css */ background: url(images/some_background.jpg);

That looks nicer, we have less code to write and it is very close to consistent. But we can do one more thing. We could move a core CSS file to the root of our website. This CSS file should be a combined CSS file containing all our CSS styles.

/* <base href="http://www.marcwatts.com.au/shop/" /> <link rel="stylesheet" href="css_files_combined.css" type="text/css" /> image directory = images/ */ /* html */ <img src="images/some_image.jpg" alt="Some Image" /> /* css */ background: url(images/some_background.jpg);

Now our code is looking great. We can link to our images from our HTML and CSS files in exactly the same way which makes our website a lot more consistent and cleaner.