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!