I haven’t posted anything lately so I thought I’d update you on something I learned recently.

I’ve been pushed pretty far, by a project I’m working on for the web. This site is extremely image intensive, and as I began to build it out, the site became slower. I knew ahead of time that I would have a lot of images on the site so I had set up a special server to host all the images. My theory was that if I hosted all the images on one server, and all the HTML, CSS, and Javascript on another, it would allow for more files to be downloaded at once. (Since you can only download 2 files at once from a server. I theorized that 4 files at once would be better.)

I was wrong.

The problem with this theory is that since you’re using a completely different server, you have to use a full [a.k.a. absolute] URL.

<img src=”http://www.johnnyrocketcreative.com/images/image.png” alt=”Image”>

So, ever time I needed an image, the DNS had to resolve (When you type in a website, there’s a short delay, where the computer asks other computers where to find the website.) Now, when you’re browsing the web, it’s not all that big of a deal, but once you have to ask where to find EVERY image, that gets to be lengthy.

So, I tried putting all the files on the same server and using just a relative URL [URI] (i.e. src=”images/image.png”) in my IMG tag. See the different from the full URL? There’s no root website in the URL (http://www.johnnyrocketcreative.com). Well, that cut the load time almost in half.

I learned a valuable lesson. Whenever possible use relative URL’s in your IMG tags.

<img src=”images/image.png” alt=”Image”>