Adaptive Images In A Responsive Web Design World.

By Jeremy Girard

Mar 24, 2015

When it comes to responsive web design, finding the “perfect image” is about much more than just selecting one that looks great in your design.  Choosing the right image is important, but to create Pixel-Perfect Responsive Web Designs that not only look great, but also work well for all devices, you need to expand this idea to focus on not only the “right image”, but the “right image at the right time.”

Adaptive Images are one way you can kick your responsive websites up a notch by improving overall performance without sacrificing image quality or the impact those awesome images will have in your design.

The Problem With Images And Responsive Web Design.

Since the very beginning, responsive web design has had a problem with images. To quote Ethan Marcotte, the father of responsive web design, this approach “takes three core ingredients:

  1. A flexible, grid-based layout

  2. Flexible images and media

  3. Media queries

All three of these ingredients contribute to the awesomeness of responsive design. They also, however, are responsible for the problems that we encounter when using images while creating a responsive website.

A flexible grid, built with percentages instead of pixels, allows our site’s design to maintain its proportions as the screen size changes. Flexible images will then scale up or down as our grid/screen size adjusts, and media queries allow us to make sweeping changes to our responsive web site’s design once specific sizes or breakpoints are met.

The problem here is that those “flexible images” we mentioned are flexible in terms of the size on screen, but not in terms of the file size of those images. If your design calls for an incredibly rich, very large image that stretches edge to edge on your design, then you need to deliver that image at the largest size it will appear, otherwise you risk losing image quality. This is because large images that are sized down will still look good and retain their quality, but the opposite does not hold true. If you try to scale an image up to make it larger, you will see obvious quality loss – and this situation only gets worse as you get to bigger and bigger sizes! With current website design trends favoring extra large images, this is definitely an issue that we will encounter in our responsive and adaptive web designs.

Any professional designer will agree that this image problem is unacceptable from a visual design standpoint. As we strive to create Pixel-Perfect Responsive Web Designs, we cannot have our image quality crash and burn once we get to large screens where those giant images are meant to make a strong impression and carry the tone of the design. No, our images must look great at all screen sizes! In that there can be no compromise!

Going Big.

Because of the aforementioned problem with responsive images, designers who are creating responsive websites have often elected to “go big” with their images, using the largest possible size (or in some case, even larger to make sure they fully cover all scenarios) to ensure that those images will look great even on giant screens. Sure, this approach works really well for those giant screens and for users with lightning fast download connections and unlimited bandwidth, but responsive web design is about delivering websites to users on a variety of devices, from the very big to the very small. This is where we see problems with this “go big” approach, because it is so focused on the “big” that it forgets about the “small.”

A visitor on a small, mobile phone does not need or want that 2000-pixel wide image to be downloaded to their device if they are only going to display the image at a fraction of its original size. This is wasteful at best and suicidal at worst! Forcing website visitors to download images 10 times larger than they need is guaranteed to annoy almost all people – but some of those annoyed visitors will not even wait for that full download to be completed. Instead, their impatience will drive them away from your site before it is even fully loaded. That’s definitely not the kind of reaction we want our images to make in our audience!

Performance matters a great deal to the success of your website and delivering giant images in all instances, even when much smaller images would suffice, hurts download speeds and overall performance on responsive websites. Because of this, it didn’t take long for website developers to figure out that, to create Pixel-Perfect Responsive Websites that look great and work just as well, we needed to address the image problem. Enter Adaptive Images.

What Are Adaptive Images?

Before we get into the nitty-gritty and look at the pros and cons of adaptive images, let’s take some time to define this approach and explain exactly what “Adaptive Images” are.

Unlike images applied with CSS that can be changed with media queries based on the user’s screen size (this is the third core ingredient mentioned earlier for responsive web design and it also applies to adaptive web design), inline images that are added directly to the HTML cannot be swapped in this same fashion. This is why we need a different solution.

The “Adaptive Images” approach uses Javascript and PHP to dynamically rescale images on the server and then deliver the optimum images necessary to best support the user’s current screen size. With this approach, we get the best of both worlds – a great looking image that is not sent at a size far larger than needed (file-size wise) simply to cover our ass.

Sounds like exactly what we need, right? Well, like with anything in website design, there are pluses and minuses to this approach. Let’s take a look at exactly how adaptive images are applied and also what some of the benefits and drawbacks of this method are.

A Little History On Adaptive Images.

Over the years, there have been a number of attempts to address the problem with responsive images. One of these was an experiment by The Filament Group called “Responsive Images: Experimenting with Context-Aware Image Sizing.”

The popular approach we now know as “Adaptive Images” was eventually inspired by those early experiments that the Filament Group published. Created by a developer named Matt Wilcox, the Adaptive Images idea improved on those early experiments in order to create a solution that was easy to use, flexible enough to work in a variety of instances and different CMS platforms (or none at all), and had intelligent fallbacks to handle instances where Javascript didn’t load or other problems arose.

Sounds pretty good so far, right? Let’s look how this approach works when applied to responsive web design!

How Adaptive Images Work.

According to the website for Adaptive Images,

“Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embedded HTML images.”

That’s sounds pretty damn cool, but how exactly does this happen? In a nutshell:

• As our webpage loads, images are requested from the server. A cookie is sent along with each image request.
   
• A file known as an .htaccess file tells the server to look at and run one of the .php files included on the site before the images that were requested are sent back to the browser/user that made the request.
   
• The .php file compares the user’s screen size to some variables and decides what size image would be best in this instance. If a rescaled image for that size already exists, it sends the rescaled image. If that rescaled image does not exist, the code will grab the original, high-quality image and automatically resize it. This creates a new, scaled-down image that is then sent to the browser.

So with an Adaptive Images approach, you can still use those bad-ass, awesome-looking giant images and they will be delivered to screens that can support them, but for devices and screen sizes where that giant image would be overkill, the .php code will send a small, more appropriate image instead.

How Low Can You Go?

So exactly how much file size can you save using this approach as part of your responsive web design process? It turns out you can save an amazing amount of file size! There are a number of examples shown on the Adaptive Images website, the first of which is a photo titled “Creepy Lane” which was taken by Matt Wilcox.

The original image for “Creepy Lane” clocks in at 850kb and at a size of 1900px by 1069px. This is representative of the large, edge-to-edge photos you see on many responsive web design site examples these days. There are then four other sizes that were created for this same image:

• 200kb and a size of 1382px by 778px (23% of the image’s original file size)
• 100kb and a size of 992px by 559px (12% of the original size) 
• 70kb and a size of 768px by 443px (8% of the original size)
• 30kb and a size of 480px by 271px (3.5% of the original size)

So with an Adaptive Images approach, we are now delivering much smaller files sizes to devices with smaller screen sizes. For small screen mobile devices, our file size is an astounding 3.5% of the original image’s size! Instead of an 850kb download, we have a tiny 30kb download. And the best part is that users on those small screen devices will not see any loss of image quality at all! They will be getting an image that looks great on their screens, but because it is optimized specifically for those smaller sizes, we do not need to worry about the problems with flexible images and responsive web design (or adaptive web design) that I covered earlier – namely images that look great but are too big for small devices, or the inverse, with images that load fast but look horrible on big devices. We have our cake and we can eat it too!
Mmmmmm…. cake.

How Do We Add Adaptive Images To Our Website?

So this is all pretty incredible, but here’s the million dollar question -- how hard is it to integrate it onto our sites? Turns out, it’s pretty dang easy, which is a sure bonus for this approach!

The installation instructions on the Adaptive Images website detail a simple 4-step process to make this work. Rather than repeat those instruction verbatim here, I will give a quick summary and allow you to get the full instructions directly from the source. To get this working on your site, simply:

1. Download the latest version of the Adaptive Images .zip file. This zip file   contains a few .htm files, a few .php files, and the .htaccess file I referred to earlier when I was explaining how Adaptive Images works
    
2. Next, you upload two of these files the your server, where the root of your website is. One of the files is the .htaccess file and the other is one of the .php files. There are a few additional instructions for sites that use Wordpress or for ones where a .htaccess file is already present, but all of those instructions are on the site and, in general, what you need to know is that these two files need to get on your server.
    
3. Next, you will add one line of Javascript to your website. If you are like me and writing Javascript by hand is not for you, no worries, this is a simple copy and paste job. If I can do it, you can do it!
    
4. Last, in one of the .php files, you need to edit one line to establish the different breakpoints you are using in your website. Whether you have gone with a responsive web design approach or an adaptive web design one, you will have breakpoints where your media queries kick in. Those breakpoints are what you will add to this file as part of your Pixel-Perfect Responsive Web Design process.

That’s it!  At the most basic level, this is all you need to do!

Adding A Custom Touch To Adaptive Images.

As I just mentioned, these four steps are all you need to bring this approach to your responsive or adaptive web design, but for those that want some customization options open to them as they create a website, there are a handful of extra touches you can also add.

In the same .php file you used to specify the breakpoints for your responsive web design, you can also determine the image quality that will be used and whether you want a subtle sharpen to be applied to the new images that are created with this approach. Remember, the code/server will automatically generate the scaled down images for you, using your high-quality, full-size image as the base, so being able to customize these settings allows you a measure of control on how the output of these images will look.

Supporting Retina Displays.

Another customization you can add to this approach, but one which is not done using the aforementioned .php file, is to add extra support for high-resolution retina displays. By using an alternate line of Javascript in your file (instead of the one added in Step 3 of the process detailed earlier), you can deliver high DPI images to these retina screens.

Obviously, these images will look amazing on those screens, but because of the high DPI, they will be much bigger (file-size wise) and will require extra time to download. The nice thing is that non-retina screens will not try to access these images. This is another example of the right image at the right time and it shows how the Adaptive Images approach really does add a layer of awesome to our responsive web design process!

The Limitations And Drawbacks Of Adaptive Images.

So far Adaptive Images sounds like all rainbows and unicorns, but in the spirit of presenting a fully balanced look at this approach, we should also look at the limitations and drawbacks of this method, because are there are some that you should be mindful of.

First off, Adaptive Images is a PHP-based solution, so you need PHP to be running on your server. This is not a huge drawback considering the popularity of PHP, but it should be noted.

This approach will not work if your site uses a Content Delivery Network (CDN). A CDN is a network of servers that delivers pages to users based on their geographic location. This is often seen with massively popular sites that have a global appeal (think eBay, Facebook, etc.). By delivering pages from a server that is geographically closer to the user, there is an increase in the speed with which those files can be sent. You are probably not using a CDN, but again, this limitation should be noted. 

Finally, because this solution uses cookies, there is a chance that the user could have cookies disabled on their computer or that the cookie will not download properly. Luckily, the creator of the Adaptive Images approach considered this scenario and added some fallbacks to protect our responsive and adaptive web designs from failing to work properly if this should happen.

The  Adaptive Images’ code checks for the presence of ‘mobile’ in the user agent string sent by the requesting web browser. If it sees this in the string, it will deliver the smallest images to the device while other (desktop) browsers will get the largest. If the cookie works, then the code will perform the functions described earlier in this article and scaled images will be sent to the browser, but it is nice to know that, even if the cookie fails, we are somewhat protected with a smartly executed fallback. Good looking out – thanks Adaptive Images!

Should I Use Adaptive Images On My Responsive Website?

So we’ve taken a look at the inherent problems that images bring to responsive web designs (and to adaptive web designs because they also use the media query approach). We’ve covered the history of the Adaptive Images solution along with how easy it is to add it to our sites and the potential issues that we should be mindful of should be decide to use this solution when we create a responsive website. The only thing left to decide is whether or not you should utilize this solution. The answer is an enthusiastic “YES!”

The benefits of this approach have been covered at length in this article, but to recap:

• Appropriate images will be automatically sent to different devices.
• Improved page speed and download time will result.
• Scaled images are generated automatically, instead of you needing to personally create those individual images yourself – which would make long-term site maintenance very challenging.
• Very easy steps to integrate this into your website.
• Smart fallbacks are built in to this approach to cover you even if the solution “fails.”

Those are the “pros” to this approach, so what about the “cons”? Honestly, outside of the few limitations covered earlier, none of which are really big or insurmountable problems, there aren’t any real reasons not to use this approach in your responsive web design projects!

Jumping back to the start of this article, I mentioned that “the right image” for a website design is more than just one that looks great in that design. As you have seen here, the right image means sending a file that looks good, but will also download efficiently for a user on the device they are using and at the resolution they have set for their screen. Adaptive Images allows us to design with images that look amazing and not worry about sending too-large files with our website because the code will handle the optimization for us.

Tell Us What You Really Think.

So what are your thoughts on Adaptive Images? Does this sound like something that would benefit your responsive web design process? Have you worked with Adaptive Images before? If so, what was your experience? Share your thoughts on this solution, and help contribute to the conversation about an innovative and exciting way to tackle the problem of images in responsive web design.

Blog  /  Web Design  /  Responsive Web Design

Comment