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.phpWhat 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.
The post Using Adaptive Images in WordPress appeared first on Dare to Think.