Installing Adaptive Images on WordPress

Responsive Images are one of the next hurdles in making the web truly accessible to everyone. Without responsive images, even if we have a responsive site and the images ‘scale’ using CSS, if our visitor is using a phone or tablet they will receive the full resolution image that a visitor on a desktop would see.

While this might seem like a good thing in that the visitor will see the highest quality image, it results in a waste of bandwidth and a slow experience for the user. We don’t yet have a ‘native’ HTML or CSS solution to this. Well, technically we have the picture element but it’s browser support is, as of this writing, non-existent.

The main problem lies in the way that the browser loads each page. Smashing Magazine said it best:

The problem is that browsers are too quick for us! In order to provide the fastest loading time possible, browsers preload all of the images that they can identify in the source code before any CSS or JavaScript is processed.

So what does that leave us with? Well until the picture element receives support (here’s to hoping!), we need to find a solution that fetches an image based on the current users resolution. There are quite a few good plugins out there, but the one that I’ve found to be most effective for my needs is Matt Wilcox’s Adaptive Images.

One of the best things about Adaptive Images in my opinion is that, unlike the majority of the other plugins, you don’t need to change your markup at all. That means you spend less time installing and your code stays clean.

How to install Adaptive Images on WordPress

When I first went to install Adaptive Images on WordPress, I definitely ran into some trouble. The instructions don’t work the same way when applied to a CMS so some serious Googling was in order. Thankfully someone (thanks, Chris!) had beat me to the punch and worked out most of the kinks. If you want to read a much more detailed tutorial with some additional debugging info, check out Chris Ferdinandi‘s on the Github repo for Adaptive Images.

1. First things first, go download the current version of Adaptive Images. (1.5.2 as of this post)
2. !important (See what I did there?) Save a copy of your current .htaccess file in case things go pear-shaped. Do NOT simply replace your current .htaccess file with the one that Adaptive Images provides. WordPress and various WordPress plugins make edits to the .htaccess file so if you just over-write it with the .htaccess file from the Adaptive Images plugin, you’re gonna have a bad time.
3. Open up your .htaccess file and look around for something like the following:

   # BEGIN WordPress
   <IfModule mod_rewrite.c>
   RewriteEngine On
   

4. Right after RewriteEngine On, add the following:

   # Adaptive-Images -----------------------------------------------------------------------------------
   
     # Add any directories you wish to omit from the Adaptive-Images process on a new line, as follows:
        RewriteCond %{REQUEST_URI} !iwp-content/plugins
        RewriteCond %{REQUEST_URI} !wp-admin
        RewriteCond %{REQUEST_URI} !wp-includes
   
     # don't apply the AI behaviour to images inside AI's cache folder:
     RewriteCond %{REQUEST_URI} !ai-cache
       
     # 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 -------------------------------------------------------------------------------
   

5. Save your .htaccess file and upload.
6. Modify your breakpoints in adaptive-images.php and upload it to the root of your site. This is not the wp-content directory, it’s most likely simply named html
7. Open up your header.php file and add the following before the wp_head() declaration:

   <script>
       document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
   </script>

8. Upload header.php and test!

When testing, keep in mind that just resizing your browser won’t work. You’ll need to actually view the site on a smaller resolution device and inspect the image to ensure that it’s resizing properly.