Responsive design brings with it a ton of new possibilities to web designers and developers, but, to the less experienced, it can also bring a fair share of headaches. For instance, I remember being back in school, excited to have finally mastered standard grid designs only to find out that now, thanks to the popularity of tablets and smartphones, I not only have to rethink about how websites are designed, but also re-evaluate how they are built (thanks a lot, technological progress!)

Aside from mastering this new aspect web development–which has been very well pioneered and established in recent years—there are other concerns that may stumble an otherwise enthusiastic rookie of the web: images. While the challenge of making most of a website’s content fit into a responsive web design can be solved by media queries and other fixes, one of the bigger challenges lies within the pixels of a website’s images.

Again, much like with responsive design in general, there are a variety of simple fixes that can alleviate this problem (such as fluid images), however, this can open up a brand new can of challenges. For instance, while using the fluid images in your style sheets will scale the image appropriately to fit the viewport, it’s ONLY scaling the image size, not the file size, meaning that if someone is attempting to view your made-for-the –desktop image on his iPhone, it’s going to take much longer for that giant image to load—something that not only costs time but also eats up money since it’s likely the user doesn’t have a nearly extinct unlimited data plans. This could be resolved by using JavaScript to swap out one image with an image of a more appropriate size, depending on the viewport. However, the hurdle with this solution is that you would need two versions of each image placed on your server, which, for a site that’s particularly image heavy, would be quite tedious to a developer.

But don’t worry—there are still ways to make your site responsive while keeping the images on the site lean, mean and lovely: and that’s by using Adaptive Images.

What are Adaptive Images?

Adaptive Images is a technique created as a simple, streamlined way to make sure images appear properly on any sized device. Tablets, smartphones, smaller-than-average monitors—Adaptive Images detects what sort of device you’re using as well as the size of the browser’s viewport and then automatically creates (and caches) a new version that fits snuggly on the screen. On top of making images much easier to load and view, Adaptive Images is also easy to use; it can be implemented into an existing website without making changes to the markup.

A standard image using Adaptive Images. Monitor size: 1440×900 px

The same exact site and image as above, only viewed on an iPhone. Notice the picture maintains resolution. Load time was approx three seconds.

Getting Started

Before diving in headfirst into Adaptive Images, there are a few things you’ll need first:

The Adaptive Images kit.

• A text editor
• Basic understanding of HTML/CSS (some knowledge of JavaScript and PHP might help, too).
• A basic knowledge of responsive design and using media queries
• A server running Apache 2 and PHP 5

…and that’s about it. OK, let’s do this!

A Note Before Starting

Before you begin, keep in mind that Adaptive Images works with sites that are responsively designed. That means to get the full benefit out this technology and to make sure it works properly, you should already have a responsive site in place, in particular, you should have you media queries set up. You can learn more about media queries and simple responsive design here.

Access Your .htaccess File

With the adaptive images kit at your downloaded to your desktop, open it up. One of the two things you’ll see is an .htacess file and the adaptive-images.php file. Now, access your server and take a look at the root domain. Is there already an .htaccess file there? If not, simply load up the one you got with the download kit. If you do already have one, DO NOT delete it. Instead, save a copy of it and place it somewhere safe. Afterwards, open up a version of the .htaccess file that was already on the server in your text editor.

Search around for a block of code that begins with <IfModule mod_rewrite.c>. When you find it, enter in this text:

[code]
# Adaptive-Images ——————————————————-

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

RewriteCond %{REQUEST_URI} !assets

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

# END Adaptive-Images ———————————————————
[/code]
If you don’t see <IfModule mod_rewrite.c> . anywhere, then paste in this code instead.

[code]

<IfModule mod_rewrite.c>

Options +FollowSymlinks

RewriteEngine On

# Adaptive-Images —————————————————————-

# Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
# RewriteCond %{REQUEST_URI} !some-directory
# RewriteCond %{REQUEST_URI} !another-directory

RewriteCond %{REQUEST_URI} !assets

# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php

# END Adaptive-Images ————————————————————-
[/code]
When you’re done, save the .htaccess file and place it back onto the server.

Work the .php File

Now, open the adaptive-images.php file in your text editor. After viewing the copyright info at the top, you’ll see the CONFIG section which, as you probably guessed, is for configuring the file. This can be pretty important, as this section can determine how adaptive images will jibe with your current site’s markup. Let’s take a look at the four variables in the CONFIG section:

$resolutions : These are the screen sizes that Adaptive Images is planning to work with. There are defaults in place for various screen resolutions. The numbers within the array should match the numbers in your media queries (assuming you’re using them). That way, the site and the images will scale together.

$cache_path: this is where your automatically resized images will be stored on the server. Make sure there is a folder for them, and make sure you set a clear path to it!

$sharpen: This setting (TRUE by default) helps to prevent blur that may come with resizing. This can bog down a busy server, so if you want to turn it off, change TRUE to FALSE.

$watch_cache: This automatically refreshes the cached images. Like $sharpen, this could bog down the server. Change to FALSE if you want to turn it off and handle the caching manually.

Add Some JavaScript

With the .htaccess and adaptive-images.php files modified and in place on your server, there’s one more step: Open up the HTML file where the images reside and include the following bit of JavaScript in the <head> section:

[code type=javascript][/code]

And that’s it! Enjoy the fruits of your labor by knowing that no matter how varied monitors, tablets and smartphone become, everyone will get to enjoy your images!

Summary

Smartphones and tablets aren’t replacing desktops as many once thought they would. Instead, they’re are harmoniously supplementing desktops and laptops, which makes building an ultra-responsive, ultra-adaptable web imperative. As designers and developers, it’s imperative that we find the best ways to make the web accessible and beautiful to everyone, no matter how they view it. Using tools like Adaptive Images—which is hands-down one of the most efficient ways to keep image size and resolution flexible—is only going to make that task easier.