iPad big (770)

Responsive Images in WordPress with Picturefill

Images are the single biggest performance hog on most websites.
Serving the same big images to a desktop and a mobile device kills your site’s performance, and makes you lose site visitors. We need to be able to serve a high resolution image to a desktop, and a smaller image to a mobile device. Responsive images (or adaptive images) are the solution.
Responsive image solutions are many, and none are perfect. Until the technology gets better, we really just have to pick one and deal with the downsides.
Picturefill is one of the better solutions, and it’s not too hard to implement. It’s a javascript file that allows us to serve different image sizes based on media queries. It gets the job done, let’s take a look at how to use it with WordPress.

Demo

This is a large image for the desktop, if you make your browser smaller (less than 600px), you’ll see the image swapped out for a smaller version. I made the smaller one white so it’s easy to see the change.






The hi-res image is 111kb, the smaller version is 25kb. That’s a huge savings, and imagine that multiplied by all the images on your site! This is the single biggest performance increase for mobile devices for most sites.
How do we do this in WordPress?

Add picturefill.js to your site

The first thing we need to do is add picturefill.js to our site by enqueueing it in our theme (or plugin).
Go ahead and grab picturefill.js from github: https://github.com/scottjehl/picturefill
The only file we need is picturefill.js. Drop that file into your theme’s /js folder, or anywhere in your theme folder.
Next we need to enqueue it so it can be used. Add this code to your theme’s functions.php file:
[php]
function picturefill_script() {
wp_register_script( ‘picturefill’, get_stylesheet_directory_uri() . ‘/js/picturefill.js’);
wp_enqueue_script( ‘picturefill’ );
}
add_action( ‘wp_enqueue_scripts’, ‘picturefill_script’ );
[/php]
Make sure to edit the path to picturefill.js, if you don’t have it in the /js folder in your theme.

The HTML

Now that our javascript file is ready to use, we just need to add the html in the WordPress page editor.
Here is the (simplified) syntax we’ll use:
[html]




[/html]
As you can see, it’s just a small image for mobile, and a larger one for desktops. You can also add more sizes, but let’s not overcomplicate things for now.
We just need to add one more thing, a fallback for browsers that don’t support javascript. Here’s the full code:
[html]






[/html]
Swap out your normal html <img> tags with the above syntax, and you’re done! (Obviously you need to change the image urls)

Tips

Swapping out all your image tags manually would be a huge pain, so I use this on an as-needed basis. There is a plugin that changes your image tags to the picturefill syntax automatically, but I have not tested it, so make sure you test it first. It’s here http://wordpress.org/plugins/picturefillwp/
Picturefill is not the only game in town for responsive images. Here’s a great article on Smashing Magazine about your options.


Posted

in

by

Comments

5 responses to “Responsive Images in WordPress with Picturefill”

  1. Caspar Hübinger Avatar

    So far, so good. The swapping part is where the rubber hits the road though, isn’t it? 😉 In the long run I think we need to teach WordPress to that natively. Meanwhile we could use filters like image_send_to_editor, img_caption_shortcode and post_gallery to achieve an output like the one above—given we’ve come up with a proper setup for appropriate image sizes.

    1. Scott Avatar
      Scott

      Ya, you can do a lot of stuff programatically to make this process easier, but it’s kind of a case-by-case basis. I don’t think anything will make it to core until there is a standardized solution for this, which will be a while 🙂

  2. Sam Avatar
    Sam

    Very nice tutorial, works perfectly. I just have few questions in my mind.
    I have a simple home slider written like the code below. The image source are from the “the_post_thumbnail(‘homeslider’)”. My questions are. 1. How am I going to apply this to Picturefill?, 2.Do I need to create 3 sets of each image(small, medium, large)? 3. How am I going to use the images I set in function.php file as add_image_size()? Thanks in advance. Any clue would be appreciated.
    query(‘posts_per_page=3&category_name=slider’);
    while($previewPosts->have_posts()): $previewPosts->the_post();
    the_post_thumbnail(‘homeslider’);
    endwhile;
    ?>

    1. Scott Avatar
      Scott

      Hi, I’m not sure how exactly this works with your code. The general idea is to get the HTML I posted in the above to display for each slide. You can see how I integrated picturefill into a slider in this gist: https://gist.github.com/scottopolis/9005711

      1. Sam Avatar
        Sam

        Awesome! exactly what I need. You are one of the reason why internet is so good. 🙂