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:

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' );

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:

    <span data-picture data-alt="My responsive image">
        <span data-src="small.jpg"></span>
        <span data-src="large.jpg" data-media="(min-width: 600px)"></span>
    </span>

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:

    <span data-picture data-alt="My responsive image">
        <span data-src="small.jpg"></span>
        <span data-src="large.jpg" data-media="(min-width: 600px)"></span>
        <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
        <noscript>
            <img src="small.jpg" alt="My responsive image">
        </noscript>
    </span>

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.


Get more content like this

Get valuable insight on business and money in your inbox once per week.

Posted by Scott

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

    Reply

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

      Reply

  2. 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;
    ?>

    Reply

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

      Reply

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

        Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Being a business owner is hard. I'm trying to get better in business and life, enter your email if you want to join me.
Holler Box