Adaptive Content Images within WordPress

There are plenty of adaptive image solutions out there, but I needed one that understood the relevance of the content area, automatically created re-sized images for various breakpoints and minimized the download impact for end-users. Remember, images that are part of your theme should be solved through the theme files, my goal was to tackle any images that a user uploads (i.e. dynamic content).

Here is an example of my automated plug-in (play around with the browser):

There are four major breakpoints (with another useless one which I had to add for some legacy images). The results in file-size reduction are quite astounding:

These are the settings I used:

How does it work?

The plugin is called Hammy and you can download it on WP.org. As I’m crap at php, there certainly isn’t any black magic involved. It’s really a mash-up of WPThumb (an awesome image resizing tool) and jQuery Picture (a nifty plugin that serves the best suited image size). It’s also non-destructive, so it will filter your content as opposed to overwrite it, thus taking something like this:

… and transforming it into (stripped out long URL’s to make it easier to read)…

If you’re confused as to why the image name is Stingray, look again. For those wondering what the hell is going on:

  • The standard img element is being replaced with picture (read more about that tag here)
  • Various sizes are automatically generated and stored within a source tag. None of those are downloaded, unless JavaScript is off, in which case the original image is rendered (hence noscript tags).
  • The content width is analyzed and the biggest image which fits within it is then downloaded and shown to the user.

What else?

So to summarize how this plugin Hammy works:

  • No changes required to your theme files, .htaccess or otherwise (plug and play!)
  • Select the container you choose to designate as being the “content” one.
  • Setup your breakpoints in line with how you’ve structured the “responsiveness” of your website. Alternatively target common mobile/tablet resolutions.
  • Add classes you wish to ignore (i.e. “thumbnail”, “nextgen”, other gallery plugins).
  • Retina support (for the 1% of the world)
  • Named after a Squirrel that is really fast, just like your website will be on mobile now (if you haven’t seen Over the Hedge, definitely do).
  • Chose to use WPThumb instead of Photon as image re-sizer (Photon requires users to have JetPack installed which isn’t the case for all).

If you want to contribute on GitHub, here is the page (I simply ask that you don’t try to lump features, fixes all in one big pull request).

Thoughts?

How are other people solving this, what are you using? I’d be interested in hearing your thoughts as this can have quite the performance impact (83% from desktop to mobile for instance). Fire away!

  • http://twitter.com/wpmariken Mariken de Ruiter

    Thx Noel this looks great!

  • http://about.me/edwardmcintyre Edward McIntyre

    Epicness! Been looking for a good solution for WP

  • http://twitter.com/jacobdubail Jacob Dubail

    If you’re “crap at php”, I should quit my job right now!

    I’m excited to give this a test run later today. Thanks for putting this together.

  • http://twitter.com/mattwiebe Matt Wiebe

    Great looking stuff here Noel! Two suggestions:

    1. You could just make this depend on Jetpack and use Photon for the resizing. Faster, fewer dependencies…

    2. If you don’t want to make it depend on Jetpack, you could accomplish all your downsizing with built-in WP functions – see the Custom Image Sizes plugin for an example of this.

  • http://www.noeltock.com/ Noel

    Thanks Matt! We’ve hardly ever used Jetpack on client work and this plugin was born out of those projects (having jetpack as dependency/requirement is also too extreme). Regarding downsizing, with the release of 3.5, WPThumb will be rewritten to use the native resizing stuff. WPThumb has other builtin tools which we need on massive sites which are not available in core (same reason photon exists).

  • Tina Cook

    Amazing Noel, thank you. Can’t wait to try out.

  • http://twitter.com/jacquesletesson Jacques Letesson

    Hi Noel, thank you very much for this plugin !

  • Guest

    cool stuff, any

  • flofromparis

    cool stuff, any well known adaptive content text plugin for wordpress you can recommand ?

  • josefulander

    “…images that are part of your theme should be solved through the theme files…”

    What is your solution to this?

  • dimitris

    thanks for sharing, looks amazing.

  • http://www.mathewporter.co.uk/ Matt Porter

    Well I am crap with PHP and thats awesome, need to have a fiddle on my dev site and implement.

  • marcio

    Hi, does anyone know how to setup hammy with photon? I can get them working separately but when I use them together photon doesn’t work. Thanks.

  • Amish Sharma

    Thanks for the information post such an in depth. It’s great see how to folks are pushing the ideas behinds structured and adaptive content with WordPress related,

  • gearu

    How does Hammy work with images served up in a lightbox? Can this be done as well, so that if a lightbox is opened on a smaller device that an appropriate image is served up?
    What about with a slider? I use Royalslider WP-Supersized to display some fairly large images – is is possible to configure these to work together?