Recently we have been optimising Web Tech Gadgetry for the fastest possible page loading times. Our motivation to do so was determined by the importance of a sites page speed. Although it is often argued whether or not Google favours faster loading sites to slower loading sites in their search rankings, it can however be said that a faster loading site is going to keep visitors on your site for longer. This means these visitors are more likely to return your site in the future, whilst also reducing your bounce rate in Google Analytics. Nonetheless the fruits of our success can be seen below.

Google Pagespeed

Now that we have covered the importance of having a fast loading site we can now move onto the purpose of this post, and that is to share our story on how we optimised our responsive images for smaller screens. Essentially the problem is that responsive images scale, rather than resize. This is of course not a problem for desktop computers or devices that are connected to a home network, but if you are out and about using your phone, downloading full size images can take up a good chunk of your monthly data allowance.

Uploading the files

The key to solving this problem can be found by using a freely available PHP script called Adaptive Images. In this post we will be taking you through the steps of installing this script on a WordPress site running under Apache. To get started download the Adaptive Image files from the link featured above and extract the files to a suitable location. To keep things simple I decided to upload the adaptive-images.php file to the root directory of our site, so we suggest that you do the same. The next step is to create a new directory and name it “ai-cache” (again in the root directory), you may have to change the chmod of this directory to 777 so that the new cached mobile images can be written to the directory.

Editing .htaccess

Now we must move on to the more advanced stages of setting up Adaptive Images as we must now turn to editing the .htaccess file, this can sometimes prove difficult depending on the complexity of your current WordPress setup. Before we continue we’d suggest that you make a local backup of your current .htaccess file if things go a little pearshaped. Next open up your .htaccess file and find the line or lines that look similar to the text below.

<IfModule mod_rewrite.c>

RewriteEngine On

# Some stuff here

#Some stuff there

</IfModule>

If you cannot find the lines above there is no need to worry as all you need to do is add the first line and the end line of the above to your .htaccess file along with “RewriteEngine On”. Now add the text below in-between the above two tags, if there is other stuff inbetween these tags ensure to paste this text in above all else except the Rewrite Engine On line.

# 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

# 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 ——————————————————————————-

The final touch

Now we can relax, the hard part is over and all we now have left to do is add a single line of JavaScript to our themes header.php file. Your theme’s header.php file is commonly found in ‘wp-content/themes/your_theme_name’, once this is found download it to an easily accessible location such as your desktop. Open it up and navigate to the head section of the file and implement the following line of code below and re-upload it via FTP.

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

To test to see whether or not it has worked, view your site on a mobile device whilst refreshing the content of the “ai-cache” directory we created at the beginning of the tutorial. If this directory is no longer empty then it has worked and you are now serving smaller images to your mobile users. Just think about all the bandwidth you have now saved.

Edit: we had a few issues using this plugin whilst using a CDN. Many images uploaded to the site after the addition of the plugin had a sub-par resolution. On further research we have discovered that this plugin does not work very well in conjunction with the use of a Content Delivery Network.