The goal

Point the upload-folder to a static subdomain to serve adaptive images, that can get cached.

WordPress Rewrite Rules

You can read more in detail about rewrite rules API at Christopher Davis site.

The how-to on adaptive-images.php

Those are the steps needed (just to make the Q complete):

  1. The HTML starts to load in the browser and a snippet of JS in the writes a session cookie, storing the visitor's screen size in pixels.
  2. The browser then encounters an tag and sends a request to the server for that image. It also sends the cookie, because that’s how browsers work.
  3. Apache receives the request for the image and immediately has a look in the website's .htaccess file, to see if there are any special instructions for serving files.
  4. There are! The .htaccess says "Dear server, any request you get for a JPG, GIF, or PNG file please send to the adaptive-images.php file instead."

The PHP file then does some intelligent thinking which can cover a number of scenario's but I'll illustrate one path that can happen:

  1. The PHP file looks for a cookie and finds that the user has a maximum screen size of 480px.
  2. It compares the cookie value with all $resolution sizes that were configured, and decides which matches best. In this case, an image maxing out at 480px wide.
  3. It then has a look inside the /ai-cache/480/ folder to see if a rescaled image already exists.
  4. We'll pretend it doesn’t - the PHP then goes to the actual requested URI to find the original file.
  5. It checks the image width. If that's smaller than the user's screen width it sends the image.
  6. If it's larger, the PHP creates a down-scaled copy and saves that into the /ai-cache/480/ folder ready for the next time it's needed. It and also sends it to the user.

The question

How would I set up the rewrite rules to point a subdomain to the the uploads folder and vice versa?


  • Is this the best approach, could you not achieve the desired outcome using the standard css3 approach for responsive design? Commented Feb 23, 2012 at 15:50
  • 1
    As there's no definitive resolution for mobile devices, I reduced the built in media sizes to one. Now it makes sense to serve them a) from a static domain and b) cache them for the next visitors. If you've a completely better (and faster) approach: Let me know.
    – kaiser
    Commented Feb 23, 2012 at 16:07
  • You make a fair point, I'd be interested to see the results, I've posted my answer below . Commented Feb 23, 2012 at 16:15
  • would the delay in redirecting cancel out the gains from the cookieless subdomain?
    – David Xia
    Commented Mar 2, 2012 at 4:50
  • @DavidXia No and there won't be a real delay. Plus you could download more than two files per time.
    – kaiser
    Commented Mar 2, 2012 at 5:33

3 Answers 3


If you are not willing to filter only image uploads, i.e., all uploaded media will reside in the same folder/subdomain, then there's a simple configuration solution:

  • go to options-media.php
  • set the Store uploads option to wp-content/uploads
  • set the Full URL option to http://uploads.yourdomain.com
  • create a subdomain making the uploads folder be http://uploads.yourdomain.com
  • I'll give this a try in some days and report back. Thanks +1.
    – kaiser
    Commented Mar 22, 2012 at 0:39
  • cool, as for the mobile sized images, I'd try adding a custom size add_image_size( 'iphone-images', 480, 0, false ); and then serve the proper size according to the device the_post_thumbnail( 'iphone-images' );
    – brasofilo
    Commented Mar 22, 2012 at 6:09
  • For images sizes, I recommend to look at my Gist here, which cares about the whole stuff in every detail. Note: If you want to skip a built in size, assign 0 to h/w. This way the not wanted image sizes don't get saved. About device sniffing: WP has it built in. You can check with $is_iphone if the user's using a mobile device (incl. tabletts). Problem is that they all got the different resolutions und pixel density... :|
    – kaiser
    Commented Mar 22, 2012 at 10:33
  • oh, I was not aware of the built in capacity of WP for device sniffing, thx for the tips
    – brasofilo
    Commented Mar 23, 2012 at 5:39

I am definitely no expert in htaccess, but with a bit of research I found something that I believe would be a good starting point for what you want:

RewriteCond %{HTTP_REFERER} !^http(s)?://(.+)\.adaptive-images\. [NC]
RewriteRule ^(.*)\.(gif|jpe?g|png)$ http://www.adaptive-images.com?url=$1.$2 [R,NC,L]

The idea of the first line is to prevent adaptive-images.com from getting snagged up in the rule, otherwise it would be a recursive call back to adaptive-images, which I assume you do not want.

Credit goes to corz.org for this - the page on htaccess is excellent.

Have you considered running a bit of ajax to do what you want instead? Your level of control might be much higher over what you want to control.

  • Ehm, not sure if I got you right. Adaptive Images is not a service. It runs on my own server.
    – kaiser
    Commented Feb 23, 2012 at 15:09
  • I saw that you linked to it in your question. The principle is the same - just change the domain name(s) in the rewrite rules. Commented Feb 23, 2012 at 17:05
  • As I thought that this topic will maybe be interesting for later readers too, I awarded a bounty and expected to see the full code here. It's imho clear that the answer that gets the bounty awarded should have some WP related code. Else it could be moved to SO as well.
    – kaiser
    Commented Feb 28, 2012 at 19:17

The techniqe you're looking for is RedirectMatch

Either of the following should acheive what you want, steps 1 and 2 are irrelevant to the answer this simply redirects any request for a file ending in .jpg, .gif or .png to the php file.

RedirectMatch \.(png|gif|jpg)$ http://example.com/cache.php

Or using RewriteRule:-

RewriteRule \.(png|gif|jpg)$ cache.php [L]
  • With "rewrite" rule, I meant the built in WP rewrite rules - see the Update/Link to Christopher Davis. :) If it wouldn't be that way, the Q would be off topic and moved to SO.
    – kaiser
    Commented Feb 23, 2012 at 16:41
  • 1
    Oh I see, well it's precisely the same principle, you just need to find a string that matches and perform the action - it really is an SO question and I can't see any advantage to doing php over htaccess - as I understand it htaccess and php run in the same process space. Commented Feb 23, 2012 at 17:09
  • @kaiser I like the .htaccess approach and I don't think it's off-topic. You can make a plugin or theme to write these rules into .htaccess for you. See: insert_with_markers() or wordpress.stackexchange.com/questions/36233/…
    – Michal Mau
    Commented Feb 24, 2012 at 11:04
  • Want to write an answer?
    – kaiser
    Commented Feb 24, 2012 at 11:26
  • As I thought that this topic will maybe be interesting for later readers too, I awarded a bounty and expected to see the full code here. It's imho clear that the answer that gets the bounty awarded should have some WP related code. Else it could be moved to SO as well.
    – kaiser
    Commented Feb 28, 2012 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.