Using Adaptive Images in WordPress

A quick, and easy to follow, guide on how to use adaptive images on a Wordpress site to help reduce page size on mobile devices. This tutorial also be used for standard websites.

One of the main issues with creating a responsive website in WordPress is that you end up serving the same size image to all devices, regardless of monitor or device resolution. What does that mean? Potentially large page sizes which then take longer to download and uses up more data allowance (if using a mobile network, unless you’re lucky enough to be in a 4G area – I still struggle to get GPRS in my area!)

This is where Adaptive Images by Matt Wilcox comes to the rescue. So here’s a step-by-step guide on how you set it up in WordPress. You might want to try the New Nine Adaptive Images WordPress plugin first, but I couldn’t get that to work for one reason or another.

1. Download the latest version of Adaptive Images

2. Upload adaptive-images.php to your root folder (even if you are running WordPress in another directory i.e. /wp)

3. Add the following to your .htaccess file (you might have one at root and one in your WordPress installation directory. Add this to the one at root level)

RewriteCond %{REQUEST_URI} !wp-content/plugins
RewriteCond %{REQUEST_URI} !wp-includes
RewriteCond %{REQUEST_URI} !wp-admin

RewriteRule .(?:jpe?g|gif|png)$ adaptive-images.php

What this is telling it to do is to exclude images in the plugins, wp-includes and wp-admin folder and only include images with the jpeg, jpg, gif or png file extensions. Add or remove as required.

4. Add this line to your header.php file, preferably directly after <head>

<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';</script>

5. Configure the $resolutions variable at the top of the adaptive-images.php file to match the breakpoints in your theme’s CSS. Make sure these match the breakpoints exactly. Not sure whether this was me but when I was just using random breakpoints, it didn’t seem to work and therefore needed then to match the CSS, so I created extra breakpoints. For example 1280,1024,960,768,600,460,400,320. If you’re unsure what breakpoints to use check out this page listing some of the most popular tablets and smartphones.

6. Configure the $cache_path variable to where you would like to store the images generated i.e. wp-content/uploads/adaptive/ai-cache. I also added an extra rule to my robots.txt file to stop robots from scanning that folder

Disallow: /wp-content/uploads/adaptive

They already search the main uploads folder on my site, so there’s no need for them to look here as well.

There are lots of other settings that can be changed. Take a look at the Customisation section for more settings.

Bingo! You’re done. I’ve tested this a few times including using it with W3 Total Cache installed and everything works perfectly.

9 replies on “Using Adaptive Images in WordPress

  1. Avatar for Amar Ilindra Amar Ilindra says:

    Any possible solution for CDN?

  2. Especially for WordPress we have extended the idea of adaptive images and created a special plugin called “Adaptive Images for WordPress”. You can find it here: https://wordpress.org/plugins/adaptive-images/.

  3. Avatar for Omkar Omkar says:

    Thank you very much.

    I was not able to make it work till I found your blog mentioning that we should add the following in the header:
    document.cookie=’resolution=’+Math.max(screen.width,screen.height)+’; path=/’;

    This thing I was not able to find on their plugin. They should have mentioned it on top which would have saved lot of time. Great plugin and great post from you. Really helpful. Thanks alot.

  4. Avatar for daretothink daretothink says:

    WordPress themes have a header.php file located in wp-content/themes/your-theme/header.php

    With the .htaccess file paste the content at the bottom of file, after the # END WordPress

  5. Avatar for soeezauto soeezauto says:

    I believe I followed the instructions correctly, but it does not seem to work.
    At least the Google tool at https://developers.google.com/speed/pagespeed/insights/, is telling me that the images were not resized. The only possible issue I can think of is that this is a WordPress integration to an existing website, though I believe it should work even then.

    So, to be sure,

    1 – I added to adaptive-images.php to the root folder
    2 – added the rules to the existing rules of the .haccess file on the root folder.
    3 – added the line to the header.php file within my WP theme, which is a child to twentyfourteen

    4 – placed my resolutions ( got some doubts there, but I think it’s fine)
    5 – created the folder ai-cache within /wp/wp-contents/uploads/ directory and placed that address on the corresponding line on adaptive-images.php file

    I verified that it does not create the images. The ai-cache files remains empty.

    Any suggestions?
    Thanks!

    1. Avatar for daretothink daretothink says:

      Hi. It’s very hard for me to know without actually delving into your site. If you want to contact me directly via the Contact page I’ll try to help as much as I can.

  6. Avatar for db donaldson db donaldson says:

    I got past that first problem. But the language of .5 is beyond me. Could you possibly add an example of what these things look like when they are written into the existing code?

    For example, how do you “onfigure the $fesolutions to match the breakpoints? Can you just enter in all of the widths the Theme(s) on your page use? or should you use all of the widths included on you link for Viewport Sizes?

    How do you configure the cache_path variable? Do I just enter “wp-content/uploads/adaptive/ai-cache” (although for my own site)? Currently there is no ai-cache file there. Will it just make one automatically?

    How do I add the extra rule to stop bots from scanning–that makes sense to do?

    Thank you. I’d like to do this–I’m a ways from “Bingo” though.

    1. Avatar for daretothink daretothink says:

      You configure the $resolutions to match those of your CSS breakpoints i.e. if you have media queries in your CSS for 320, 480, 768, 960 then these are exactly what you would add to the resolutions array.

      The cache_path variable is where you will be storing the ai-cache so you want to include the path from root to that folder, exactly as per my example.

      To add an extra rule you’ll need to add “Disallow: /wp-content/uploads/adaptive” (or whatever the path is to your adaptive folder) to your robots.txt file.

  7. Avatar for Étien Étien' says:

    Thanks for sharing! Great technique. Works for me, but unfortunately, there’s a conflit with my gallery plugin in device version…

Leave a Reply

Your email address will not be published. Required fields are marked *