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? – toomanyairmiles Feb 23 '12 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 Feb 23 '12 at 16:07
  • You make a fair point, I'd be interested to see the results, I've posted my answer below . – toomanyairmiles Feb 23 '12 at 16:15
  • would the delay in redirecting cancel out the gains from the cookieless subdomain? – David Xia Mar 2 '12 at 4:50
  • @DavidXia No and there won't be a real delay. Plus you could download more than two files per time. – kaiser Mar 2 '12 at 5:33

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 Mar 22 '12 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 Mar 22 '12 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 Mar 22 '12 at 10:33
  • oh, I was not aware of the built in capacity of WP for device sniffing, thx for the tips – brasofilo Mar 23 '12 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 Feb 23 '12 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. – random_user_name Feb 23 '12 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 Feb 28 '12 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 Feb 23 '12 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. – toomanyairmiles Feb 23 '12 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 Feb 24 '12 at 11:04
  • Want to write an answer? – kaiser Feb 24 '12 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 Feb 28 '12 at 19:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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