What's the best way to use the Featured Image for responsive web design?

Question

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.

Answer 1

Step 1:

Define two custom image sizes, e.g.:

<?php
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.

<?php
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.

Answer 2

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:

the_post_thumbnail();

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; 
}

Answer 3

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.

Answer 4

First you have to define “best”. My definition would be: Renders the image with the designer’s intended effect on any device or screen Renders the image with equal quality as the original Consumes the absolute minimum amount of system and human resources (i.e. bandwidth, CPU, designer/programmer time)

Here are the approaches I have seen so far:

1. Load the image full size and have the browser scale it down to fit layout. Define the image max-width as 100% and have it scaled down by the width of its container.

Pros: Requires next to no effort to implement, cross browser compatible and supported by older browsers.

Cons: Often downloading more data than required and then spending CPU cycles on the client scaling it down (slow). You may end up with very poor quality images depending on the browser’s scaling algorithm. No possibility for artistic direction and can’t adapt image for retina type displays.

2. Use media queries to read the client’s properties and fetch one of several tailored images for different breakpoints in your design. (The proposes HTML Responsive Images Extension and The srcset attribute tags are working on baking this approach into the HTML spec).

Pros: Faster download on mobile devices. Can handle retina type displays. Improved image quality since images where hopefully processed using some high quality method. Artistic direction becomes possible.

Cons: Someone has to spend time processing, cropping and managing multiple versions of the same image. More coding: you now have to spell out each and every version of the image in some fashion and create media queries for all desired layouts. Repeat the above for each and every image you serve. Will only work for browsers supporting CSS3 Media Queries or the new tags.

3. Make the backend Optimize images for any screen or layout using a single source image on the fly. In my opinion, this is equivalent to treating responsive images as a content negotiation task much like HTTP.

Pros: Designer doesn't have to spend any time processing images and managing multiple versions. The most optimally sized image is sent every time. Can handle retina type displays and dynamically adjust for artistic direction (although with some extra effort – have to know where to focus). No special or extra markup required (caveat below). Cross browser compatible and will work for older browsers.

Cons: Have to capture and transmit information about client’s browser and screen properties. First time an image loads may be slower than in any other approach since the image has to be processed (is typically cached for later requests).