Learning Objectives
Level: intermediate
Target: anyone having a responsive WordPress website
In this How to Create A Website For Mobile Devices The Lazy Way tutorial, we will help you to further enhance your responsive WordPress website by reducing the download speed of images considerably using “Adaptive Images” technique. After implementing this responsive image technology, your responsive website will look perfect in all mobile devices.
If you have not implemented a responsive WordPress theme, you are advised to read How to Create A Website For Mobile Devices The Lazy Way [Part 1] for the step by step instructions.
The Automatic Way to Reduce Image Sizes for Mobile Devices
Why Reducing the Image Sizes is Important?
- Website speed matters a lot, especially when people are viewing your website from mobile devices on cellular data. Researches have found that if your website does not load in 5 seconds, 90% of visitors on mobile devices would leave the website. From How to Create A Website For Mobile Devices The Lazy Way [Part 1], you understand mobile viewing is gaining importance over the past few years and soon more people will view your website from mobile devices than from desktop computers. Losing mobile visitors will mean losing more than half of the prospective visitors to your site!
- Images account for the majority of bandwidth (i.e. download time) for your website, if there is a way to reduce the image sizes without scarifying the quality, your website will be able to load much faster.
- Normally, the images on the webpages are tailored for viewing on large screens (such as desktop monitors) which are much larger than required on small mobile screens.
You may try to run your website through a website speed test service and in the content breakdown section, you will be able to see a statistics of the amount of data required for the download of all images (which are usually more than 50% for the average websites). Think, if your website loads in 10 seconds and if you can reduce the total size of all the images to 1/4 of the original, you can cut out 4 seconds from the total loading time!
How to Reduce Image Sizes for Mobile Devices?
The following describes the normal process involved in reducing the images sizes for mobile devices in WordPress the traditional way:
- Configure WordPress to create at least three sizes of optimized images for every image uploaded (one for mobile phones, one for tablets and one for desktop monitors)
- Change the source for every image tags (i.e. <img src=’… ) for indicate the presence of optimized images for each devices. There are several proposal on the syntaxes of the different image sources, below shows the solution by HiSRC:
<img src="logo-200x100.png" data-1x="logo-400x200.png" data-2x="logo-800x400.png"> - A script (either on the server or the client side) will try to detect the screen size and/or the bandwidth of the mobile devices the visitors used to visit your website.
- The server will try to determine which size (among the three sizes) of the image to be sent to the visitors’ mobile device. With the smaller images being sent, the amount of data will be reduced and the mobile visitors will be able to see the webpage in a much shorter time (remember, images account for over 50% of the data).
What the above steps mean? If you already have 100 articles published on your website, you will need to edit each articles and look for all the images and manually insert the different sources in the “Text” mode and you need to manually generate the additional images with lower resolutions. That involves a lot of hard and technical work!
What is the Best and Laziest Way to Reduce Images Sizes in WordPress?
What are the solutions for Responsive Images?
As this is a very important part of the responsive website design for mobile devices, many solutions have been developed / are being developed to provide the best solution to the problem. Below are some of the most popular and best implemented ones (in random order):
- Picturefill – This is a javascript based solution in which you can specify images for different resolution (e.g. one for desktop, one for tablets, one for mobiles). You will have the chance to use differently cropped images for different devices. However, the downside is that you will need to create the different images manually. Some people might consider that seeing different things on different devices might not be a good idea.
- HiSRC – This is a javascript solution dependent on jQuery library. It employs the mobile first concept to load the low resolution images by default. Then it will detect whether the screen is wider than a pre-defined width and the network connection is fast enough. If these two criteria are met, the higher resolution files will be loaded to replace the original one. The downside is that the various version of the same image with different resolutions will need to be marked with a special markup. Alternatively, if you are into javascript, you can specify a convention for the different resolution images like by adding the suffix (-low, -original, -high) to the filename and generate the files accordingly. Similar solution: rwdImages
- Responsive Enhance – Similar to HiSRC, this is a javascript solution in which you need to specify the higher resolution images with a special markup in the <img> tag. The script will try to determine the width of the screen and load a larger resolution file if the screen is wider than a pre-defined width. Unlike HiSRC, this solution is not jQuery dependent. Similar solution: Response, Riloadr
- SENCHA.IO is a service provided to help you to determine which resolution of the image is to be displayed on to the visitor. All you have to do is to upload a high resolution image to them and point your image SRC to their server. They will take care of the rest. However, since this solution depends on a 3rd party server, you have little control of the reliability of the service. If it ever closed, you will lose all your images. Similar solution: ReSRC.it, Responsive.io, Thumber.io
- Adaptive Images – This is a different breed in responsive image solutions. It is unique in being a server side solution. The server will try to determine the browser width and serve the best images accordingly without relying on javascript on-page. (Well, it does make use of javascript to set a cookie for best results). All the different resolutions of the same image will be generated on the fly if not generated before. It works well for web pages created before this solution is implemented.
Glad that you have asked this question. The most flexible solutions to responsive images for your WordPress website that involves the minimal amount of work is Adaptive Images. You will only have to follow the steps outlined below once and all your images uploaded in the fast, present and future will be made responsive automatically. Though it involves some more technical steps, it is worthwhile to learn these to make your website truly responsive and mobile optimized. Don’t worry, follow the steps below closely and you will be able to implement the solution in no time.
Step By Step Instruction to Implement Adaptive Images
It is always advisable to backup your WordPress website before attempting the following changes. But, don’t worry, the following changes are easy and reversible. If anything goes wrong, just delete the changes you have done and your website will be back to normal.
1. Download Adaptive Images Files
Download the latest version of Adaptive Images files here. You will get a zipped file (with extension .zip). Unzip it by double clicking it (Windows or Mac OSX).
2. Upload adaptive-images.php
Upload the file adaptive-images.php to the folder where you have installed your WordPress files (i.e the same folder containing index.php, wp-admin, wp-content and wp-includes. If you installed WordPress on the root folder, the path should usually be “/public_html“. You can upload a file via a FTP client.
There are a number of options you can make adjustment to in the adaptive-images.php file for finer control. If you are not familiar with PHP, just leave it alone. This script will work well out of the box without manual adjustments.
3. Add a line of JavaScript to header.php
Go to Appearance > Editor in your WordPress admin area. Choose “Header (header.php)” on the right hand side. Put the following script (by copy and paste) to the line just above <?php wp_head();> (if any) and </head>:
<script>
document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/';
</script>
Pro-tips: If you would like to have your images looking well in Apple devices with Retina display, use the following script instead. However, it would take longer to load the images as the images with much higher resolutions would be downloaded.
<script>
document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
</script>4. Alter the .htaccess file
Important: DO NOT upload the .htaccess that comes with the Adaptative Images download file. (In most case, you would not be able to see the .htaccess file anyway). This is the most technical part of the guide, read and follow closely.
The following is demonstrated using a Bluehost web hosting account. Your hosting account might look different, you might need to ask the technical support of your hosting account if needed.
Open the cPanel of your hosting account, click on the “File Manager” and find the “.htaccess” file. Open it with an editor.
The .htaccess file might look something similar to the below:
...
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
...
# END WordPress
Copy the following block of code for the Adaptive Images:
#START Adaptive-Images
#Add any directories you wish to omit from the Adaptive-Images process on a new line.
#Omit plugins, wp-includes and wp-admin content.
RewriteCond %{REQUEST_URI} !wp-content/plugins
RewriteCond %{REQUEST_URI} !wp-includes
RewriteCond %{REQUEST_URI} !wp-admin
#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
Paste the above block of code to just below the line with “ReWriteEngine On” :
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
#START Adaptive-Images
#Add any directories you wish to omit from the Adaptive-Images process on a new line.
#Omit plugins, wp-includes and wp-admin content.
RewriteCond %{REQUEST_URI} !wp-content/plugins
RewriteCond %{REQUEST_URI} !wp-includes
RewriteCond %{REQUEST_URI} !wp-admin
#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. Testing Adaptive Images
You need to view your WordPress website using a mobile device such as mobile phone or tablet. Check if all the images are there without issues.
On your hosting account, you will be able to see a new folder named ai-cache has been created in the same directory as the adaptive-images.php file. This folder houses all the extra images automatically created for the different resolutions.
Congratulations! The Adaptive Images solution works perfectly on your website. You have become a responsive WordPress website ninja!
Any Easier Way to Implement Adaptive Images on WordPress?
There are a number of WordPress responsive images plugins in the plugin directory. However, many users have different opinions on the usefulness and effectiveness of the plugins. Some even report that the plugins break their website. Take caution while making the decision to whether installing them or not.
- PB Responsive Images – This plugin will automatically update all your <img> tags to include the different resolution images for different devices. You do not need to do this yourself. All the images are to be generated automatically.
- Hammy – This plugin replaces all the <img> tags with <figure> tags to include the different resolutions of the same images. You can exclude some images with a pre-defined class. It depends on the javascript library jQuery.
Since these solutions have their shortcomings, we would advise you to manually implement the Adaptive Images solution as detailed above.
Conclusion – How to Create A Website For Mobile Devices
If you have followed through the instructions on How to Create A Website For Mobile Devices The Lazy Way Part I and Part II (this post), your website would have been transformed into a truly responsive mobile optimized website great for mobile viewing and you are posed well to the new opportunities brought about by the mobile internet era!
Edward Chung
Latest posts by Edward Chung (see all)
