We have our images resizing nicely and we now understand how we can limit the display size of specific images should we choose to. However, earlier in the chapter we noted the inherent problem with scaling images. They must be physically larger than they are displayed in order to render well. If they aren't, they start to look a mess. Because of this, images, in terms of file size, are almost always bigger than they need to be given the likely display size.
Various people have tackled the problem, attempting to provide smaller images to smaller screens. The first notable example was the Filament Group's "Responsive Images" (http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/). However, recently, I've switched to Matt Wilcox's "Adaptive Images" (http://adaptive-images.com). The Filament Group's solution required the image related markup to be altered. Matt's solution doesn't and automatically creates the (smaller) resized images based on the full size image already specified in the markup. This solution therefore allows images to be resized and served to the user as needed based upon a number of screen size break points. Let's jump in and get Adaptive Images up and running.
The Adaptive Images solution requires Apache 2, PHP 5.x, and GD Lib. So you'll need to be developing on an appropriate server to see the benefits. So, go ahead, download the .zip file and let's get started:
Extract the content of the ZIP file and copy the adaptive-images.php and .htaccess files into the root directory of your site. If you are already using an .htaccess file in your site's root directory, do not overwrite it. Instead read the additional information in the instructions.htm file included in the download.
Now create a folder in the root of your site called ai-cache .
Use your favourite FTP client to set write permissions of 777.
Now copy the following JavaScript into the <head> tag of each page that needs adaptive images:
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
Note that if you're not using HTML5 (we'll be changing to HTML5 in the next chapter), if you want the page to validate, you'll need to add the type attribute. So the script should be as follows:
<script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>
It's important that the JavaScript is in the head (preferably the first piece of script) because it needs to work before the page has finished loading, and before any images have been requested. Here it is added to the <head> section of our site in progress:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>And the winner isn't…</title>
<script type="text/javascript">document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script><link href="css/main.css" rel="stylesheet" type="text/css" />
</head>In the past, I've typically placed all my images (both those used for background CSS elements and inline images inserted in the markup) in a single folder such as images or img. However, if using Adaptive Images, it's advisable that images to be used with CSS as background images (or any other images you don't want to be re-sized) be placed in a different directory. Adaptive Images by default defines a folder called assets to keep images you don't want resizing within. Therefore, if you want any images left alone, keep them there. If you'd like to use a different folder (or more than one) you can amend the .htaccess file as follows:
<IfModule mod_rewrite.c> Options +FollowSymlinks RewriteEngine On # Adaptive-Images ----------------------------------------------------------------------------------- RewriteCond %{REQUEST_URI} !assets RewriteCond %{REQUEST_URI} !bkg # 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 ------------------------------------------------------------------------------- </IfModule>
In this example, we have specified that we don't want images within assets or bkg adapting. Conversely, should you wish to explicitly state that you only want images within certain folders to be adapted, you can omit the exclamation mark from the rule. For example, if I only wanted images in a subfolder of my site, called andthewinnerisnt, I would edit the .htaccess file as follows:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images -----------------------------------------------------------------------------------
RewriteCond %{REQUEST_URI} andthewinnerisnt
# 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 -------------------------------------------------------------------------------
</IfModule>That is all there is to it. The easiest way to check that it's up and running is to insert a large image into a page, and then visit the page with a smart phone. If you check the contents of your ai-cache folder with an FTP program you should see files and folders within named breakpoint folders, for example, 480 (see the following screenshot):
Adaptive Images isn't restricted to static sites. It can also be used alongside Content Management Systems and there are also workarounds for when JavaScript is unavailable. With Adaptive Images, there is a way to serve entirely different images based upon screen size, saving bandwidth overheads for devices that wouldn't see the benefit of the default full size images.