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”
Leave a Reply
-
HTML email signature in Apple Mail
Step by step guide on how to add an HTML signature to Apple Mail.
-
Secure your WordPress Blog
A guide to securing your WordPress website.
-
HTML email signature in Gmail
How to add a HTML signature in Gmail, without any text-decoration for links
-
Remove p tags from category description
By default Wordpress adds paragraph tags to category descriptions. Find out how to stop this.
-
DIV align bottom right (or left!)
Find out how to align a DIV to the bottom left or right.
-
Website Dimensions and Designing for the Web
What browser size should you design your website. Find out more.
-
Root Path and Configuration of your Website using php
Display the root path and configuration of your website by uploading a php file to your website.
-
HTML email signature in Zoho Mail
How to add a HTML signature in Zoho Mail. A very easy and stable solution.
-
FREE EU Cookie Law Script
If you haven’t already implemented the changes then we’ve put together a little bit of code to help you.
-
Remove the shadow from Mac Screen Grabs
How to remove the shadow from Apple Screengrabs.
-
10 Useful Sites for Web Developers
Some useful websites for web developers.
-
3 FREE Apps to protect your PC
A few free apps to help you protect your PC.
Any possible solution for CDN?
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/.
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.
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
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!
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.
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.
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.
Thanks for sharing! Great technique. Works for me, but unfortunately, there’s a conflit with my gallery plugin in device version…