WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a brilliant idea and since WordPress already takes care of some of the work, I just need to find a good method to make this work.

I am working on a project that needs to be responsive to all devices, whether a desktop PC or mobile gadget. Thus, I want the images to also be responsive, meaning that mobile devices shouldn't load 50KB+ images.

For each page or post, I can add a Featured Image using Post Thumbnails which, at full-size, the image is about 950x250 at ~60KB. If I load the website on an iPhone/Android, I wouldn't want the ~60KB image to load, but instead would like the small thumbnail to load in its place.

The default method for responsive images is to make the width of the image 100% of the parent container, thus it will resize automatically if the parent container is also resized. Not the best method for larger images.

I thought about trying out Filament Group's responsive image script, but I tried it and it didn't work right. One way this could be accomplished is through user-agent detection, but I'd rather not do this method either since user-agents can be spoofed.

Here's another method for resizing images on the fly, but this seems to be duplicating what WordPress has already done.

If there is a way of doing this with the Media Gallery images that WordPress has be default, with all the resized thumbnails already created, that would be preferable.

share|improve this question

Step 1:

Define two custom image sizes, e.g.:

add_image_size( 'normal-thumbnail', 400, 300, false ); // Default image size
add_image_size( 'mobile-device-thumbnail', 200, 150, false ); // Mobile-device image size

Step 2:

Implement your chosen means to determine client. There are several ways, and which method you use is outside the scope of this question. But, assuming you have a method that works for you, output the result to some variable, such as $mobile_device = true;

Step 3:

In your template files, output the image conditionally, based on client.

if ( true = $mobile_device ) { // client is mobile; be responsive
    the_post_thumbnail( 'mobile-device-thumbnail' );
} else {
    the_post_thumbnail( 'normal-thumbnail' );

Note: you could repeat the if/else (or do a switch) for multiple form factors (i.e. screen sizes). Just add multiple custom image sizes, and conditionally test for each screen size you want to support.

share|improve this answer
This was pretty much what I was looking for, thanks! I'll try to test it as soon as I figure out the Step 2 and come back to let you know my results. – micah Sep 1 '11 at 6:45

The best way is to use a fluid grid to build the WordPress theme, and remove the width and height values of featured images through a function for proportional scaling. A tutorial on Making WordPress images responsive:

Method 1: The CSS

Add the following code to your CSS file. That will make the images scalable according to screen size.

img { max-width: 100%; }
img { -ms-interpolation-mode: bicubic; }

Removing automatic height and width in WordPress <img> tags

Now drag the window to see the image scaling in action. You’ll notice that the images in your WordPress blog scale weirdly. They horizontal scaling fine but vertical scaling in WordPress images are all wrong.

To make the images resizable proportionately in WordPress, We have to remove the automatic width and height values WordPress add for < img > tags.

As an example, We have to change this:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” 
    width=”100″ height=”100″ />

To This:

< img class=”imgclass” src=”../images/featuredtmb.jpg” alt=”alt comes here” />

For the images that are in a post or a static page/template page, all you have to do is, add the above CSS to the style.css file, and then remove the ‘width’ and ‘height’ properties from the < img > tag in your WordPress editor. That’s it!

But for the image that are displayed dynamically by WordPress, such as post thumbnails, the width and height needs to be removed dynamically using a function.

Add the following function to your functions.php file.

function remove_wp_width_height( $string ) {
    return preg_replace( ‘/\/i’, ”,$string );

Then when you call for those post thumbnail images in you template.php page, replace:


With This:

echo remove_wp_width_height( get_the_post_thumbnail( get_the_ID(), ’large’ ) );

That’s it. Drag and resize the browser to see your responsive WordPress images in action!

Method 2:

The above will not work for some themes.

If you are one of the few that it did not work, you can still get your image issue solved using below function.

Add the following function to your functions.php file.

This removes inline width and height attributes from images retrieved with the_post_thumbnail(), and prevents those attributes from being added to new images added to the editor.

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );  
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 ); 
function remove_thumbnail_dimensions( $html ) {     
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );     
    return $html; 
share|improve this answer

One way this could be accomplished is through user-agent detection, but I'd rather not do this method either since user-agents can be spoofed.

This is not a bad method and is actually the industry standard, a good WURFL has a very high accuracy rating, the ones I have used and tested always returned solid results and independent testing ( above what I would bother doing) seem to have them in the 98% +range. Who cares if some lame bot is spoofing a user-agent, they aren't there for a good reason anyhow.

For step 2 I think either method comes down to which is actually faster, a PHP backed WURFL or CSS media query's.

share|improve this answer
Interesting. I've never heard of WURFL so I have a bit of reading to do. Thanks for pointing it out. I have my reservations about user-agent spoofing but you're probably right that the majority of legitimate traffic won't be spoofing. Time for more research! – micah Sep 1 '11 at 6:44
I'm gonna pass this link along purely for the comments. There's a lot of arguments against user-agent sniffing and they bring up a lot of good points. infrequently.org/2011/01/cutting-the-interrogation-short – micah Sep 3 '11 at 5:18
Interesting but these guys are talking about the expense ($$$) of ua testing for enterprise level applications, not exactly a WordPress blog, look at your server logs, does the 1% of non user agents mean 1 million people or 1, do you roll out new application features every month ? I do on the other hand actually agree that feature detection is the future..well that is unless everyone has an iphone or andriod... – Wyck Sep 3 '11 at 5:52
Ultimately, I agree that feature detection is the future. I think using this stackoverflow problem would be an awesome solution. I use Modernizr and I'd need to figure out how to combine his method with Chip's solution, although I'm still not very good at jQuery. What do you think? – micah Sep 3 '11 at 6:49
For most web sites, I think you can't go wrong with using media query's, esp with something backup up by a javascript library. The problems I see are sites that use lots of interface images still serving them for mobile by using something lame like diplay:none;. Effective responsive layouts tend to be minimal designs because of this. – Wyck Sep 3 '11 at 17:35

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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