Responsive Images in WordPress with Picturefill

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:






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:








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.

Subscribe

Get more great content like this, enter your email below.

Share

Loading comments...

Leave a comment

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