Routing image requests to separate subdomains

Question

First, a bit of background info:

The HTTP 1.1 specification, circa 1999, recommends that browsers and servers limit parallel requests to the same hostname to two. (more)

If you carry on reading that article the author suggests "fooling" browsers by having multiuple subdomains all pointing to the same thing.

If I was to serve my images from two separate subdomains (two different hostnames) then the browser would download a maximum of 4 images in parallel (2 per hostname).

Given that, I could now equally spread out the requests between the two subdomains to optimise page download speed, like so:

<img src="http://subdomain1.example.com/img1.jpg" />
<img src="http://subdomain2.example.com/img2.jpg" />
<img src="http://subdomain1.example.com/img3.jpg" />
<img src="http://subdomain2.example.com/img4.jpg" />

This would require me to manually go through the appropriate files and change the 'src' of each image.

---

I'm looking for a far more simple/reusable solution that involves no visible changes to the HTML.

I have an idea:

1. All image-like URLS on [example.com] are redirected (via .htaccess) to [example.com/imghandler.php]
2. imghandler.php redirects to either subdomain1 or subdomain2 - randomly chosen.

To illustrate:

# Request from browser:
>> http://example.com/dir/image.jpg

# Rewritten to:
>> http://example.com/imghandler.php?location=%2Fdir%2Fimage.jpg

# *Redirects* to either:
    1:
        >> http://subdomain1.example.com/dir/image.jpg
           (this is where the browser ends up getting the image from)
    2:
        >> http://subdomain2.example.com/dir/image.jpg
           (this is where the browser ends up getting the image from)

I have two questions:

1. From a theoretical point of view, would this work?
2. Is there a better way of accomplishing what I want?

Answer 1

You are better off just having all your images on 1 server rather than making there have to be 2 requests for each image.

If you have dynamic page content (i.e. it looks like you are using php), you can get the same effect and encode the subdomains directly in the html by creating a function which does the same sort of thing. Your image tags could look like:

<img src="<?php echo image_root(); ?>/dir/image.jpg">

You should be able to apply this kind of change globally to your site with a decent editor and some regex search and replace.

Answer 2

One thing to keep in mind with strategies like this is you want to direct the requests for the same file to the same server. It doesn't do much good to have requests for:

http://subdomain1.example.com/img1.jpg
http://subdomain2.example.com/img2.jpg
http://subdomain1.example.com/img3.jpg
http://subdomain2.example.com/img4.jpg

On one page then:

http://subdomain2.example.com/img1.jpg
http://subdomain1.example.com/img2.jpg
http://subdomain2.example.com/img3.jpg
http://subdomain1.example.com/img4.jpg

On the next.

The trick we use here is to hash the file name (GetHashCode in C#) and use that to choose a bucket:

var serverNumber = image.GetHashCode() % serverCount;

This ensures that further requests for the same image are served from the browser's cache and not by a different server.

Answer 3

1. Yes. It would work. But you would wind up with twice as many requests, still bottle-necking the first request to get a possible redirect through the two-by-two primary domain.

2. You might try using JavaScript (aka jQuery) to quickly change the source of the images in the ready event of the DOM, before the images actually begin loading. You'd want to use a consistent method of calculating which of your subdomain options to use so that future pages referencing the same image would result in a change to the same subdomain choice.