Responsive images can be a real pain. There are at least a half a dozen options to pick from, and every single one of them is essentially a hack. The benefit for your end user, however, is extremely high. On any given site, page weight is mostly images. Sites that have implemented responsive images will have faster load times across all devices.

There is a working draft in the W3C to make responsive images a possibility in the browser, but it may be a long time before we see it in HTML. Fortunately, Scott Jehl of the Filament group put together the Picturefill polyfill which mimics the proposed spec and implements responsive images using Javascript. Picturefill.WP integrates this functionality right into WordPress.

What’s It Do?

Picturefill.WP will take care of the responsive images problem for you automatically. First, it adds the picturefill javascript file to your WordPress install (in the footer). Then it uses WordPress’s automatic image sizes in order to filter the image output of each page, and change it to the proper picturefill syntax. It uses the image sizes defined in your Media settings in order to determine breakpoints and will automatically load in whichever image size fits the width of the viewport. So an iPhone user will receive the smallest image, while a desktop user may receive the largest. And there’s basically nothing to set up.

How’s It Work?

Setting your height to “9999” will ensure that height is sized proportionally to the width

Before you even install the plugin, make sure you go into your Media settings and set image sizes that match the breakpoints of your design. You should set a new image size for each layout change on your site. WordPress only has three sizes, Thumbnail, Medium and Large. If you have more then three breakpoints, you may need to add new image sizes using the add_image_size function.

<br />if ( function_exists( 'add_image_size' ) ) {<br />	add_image_size( 'new-size', 300, 9999 ); //300 pixels wide (unlimited height, proportional)<br />	add_image_size( 'cropped size', 220, 180, true ); //(cropped is set to true)<br />}<br />

Also, if you have a lot of legacy images that are sized differently, use the Regenerate Thumbnails plugin to batch re-size all of your old images.

After that, simply install and activate the plugin. There won’t be any settings, but you can check if it works by opening a page and re-sizing your browser and watching new images get loaded in. There’s nothing else to set up. Basically, your standard tag that WordPress outputs will be replaced by a long HTML string that enables the Picturefill polyfill to do its work. And in case a user does not have javascript enabled, a <noscript> tag will automatically be added with your largest image size so that they will still be served an image. That’s about it.

Costs, Caveats, Etc.

Picturefill.WP is completely free and pretty new to the Plugin Directory, but Kyle updates it frequently enough to keep up with updates from WordPress and Picturefill. Its source is on GitHub if you feel you would like to contribute.

Keep in mind, the plugin only works on images that are within the_content();. This means that featured images/post thumbnails will not be included. This is a feature that the author is working on, and he has provided a quick fix that you may want to check out if you have some development chops. Also, the plugin gets some of its information from the classes that are automatically generated by WordPress, namely thewp-image-{image id} These are automatically included whenever you insert an image with the “Add Media” button, but keep this in mind if you are having problems.

Resources

• Picturefill.WP on GitHub