Adaptive Image Optimization For Responsive WordPress Themes

Adaptive design, which has largely gone out of favor as responsive design has dominated the web, adapts to the type of device displaying the page.

The days of mobile WordPress themes – an extreme example of adaptive design – have, for the most part, passed us by, and I couldn’t be happier. Responsive’s one design fits all approach to creating mobile-friendly content is not always perfect. There are several places where incorporating adaptive design principles can create a better user experience, and make a dramatic difference in page load times.

Different devices for viewing the web.
Using an adaptive design approach, a server can choose how to optimally render pages, as well as enhance or remove functionality on the fly, based on the type of device detected.

When you are designing any website today you are designing for literally hundreds of different devices, all running different operating systems and browsers. In this first part of a two part series on hybrid adaptive/responsive theme design I will look at adaptive image handling in responsive WordPress themes.

Tomorrow, I will look at making selective layout changes based on mobile device type or OS.

If you’re not familiar with adaptive design, it essentially uses a predesigned set of layout sizes based on device screen sizes and, along with CSS and Javascript, adapts to the detected device. A responsive website, on the other hand, will fluidly change and respond to fit any screen or device size.

Responsive image display sizing is built into most frameworks and does not require much work. With Bootstrap 3, you have to add a class of .img-responsive to your image, while Foundation 4 does automatic responsive image sizing.

We hear time and time again about the importance of page load times for SEO and user-retention, yet most of the time we are still serving images designed to look great on a retina-display equipped 27″ iMac on tiny, low-res budget smartphone screens. This is why you need your site to adapt to the file size demands and needs of the user’s device.

Before You Start: Smush It

Before we get to the primary focus of this article, it’s worth mentioning that for any type of device, mobile or desktop, it’s always good to optimize your image sizes.

Big images can be big contributors to page load times, which is never good for SEO or UX. Yahoo’s Smush.it technology provides easy lossless image optimization by stripping out as much unused information from an image file as possible. There is a plugin, WP Smush.it, which can automatically apply Smush.it optimization to your WordPress site’s images.

Just keep in mind that while the plugin will optimize all new images uploaded to your site once it is activated, existing images are unaffected. But, you can use the Bulk Smush.it link under the media library tab to optimize existing images. This feature is labeled as an experimental feature, but I’ve never had a problem with it.

Since WP Smush Pro was launched we’ve added sooo much new stuff. Head over to the project page to check out all the new features! Check out WP Smush Pro

Easy Adaptive Image Sizing

Adaptive images
The New Nine Adaptive Images plugin adds adaptive images settings to the Media tab in your WordPress admin.

Luckily there is a plugin that automatically serves different sized image files based on the device it is serving them to: New Nine Adaptive Images, which uses the Adaptive Images jQuery script by Matt Wilcox.

It’s important to ensure your server meets the requirements for the script, which any decent hosting provider’s servers should.

When setting up this plugin, you will need to modify your WordPress site’s .htaccess rules. The easiest way to do this is generally via the file manager in cPanel. The plugin’s settings, which appear on the media settings page, provides the new rules that you need to cut and paste into your .htaccess file. On the settings page you can also manually set different break points for resizing images, but the defaults should work in most cases.

Only Results Matter

It’s easy to get hung up on responsive versus adaptive and other semantic arguments. It is more important to remember that the person viewing your site doesn’t care what design strategy you used – responsive, adaptive, both or neither.

All that matters in the end is the quality of the user experience. Does the page load in a reasonable amount of time, convey its message and function intuitively on whatever device its being used on? It doesn’t matter to your end-user how you accomplished those goals, as long as they were accomplished.

Be sure to come back tomorrow when I will cover adaptive layout and functionality changes for responsive WordPress themes. In the mean time, if you have any other great image optimization techniques for mobile you’d like to share, add them in the comments.

Image credits: appleboy46adactio.