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

4 comments

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.

   Log in to Reply

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

   Log in to Reply

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.

   Log in to Reply

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.

   1. 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.

   1. 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).

   Log in to Reply