Image Optimization Techniques for Mobile Devices

Mihai Popescu

2 years ago

For the past 4 years, websites have been getting fatter and fatter. And I’m purposefully using the words fat and not large or big. The bad news is that most of it is deadweight. The good news is that solutions are available and that significant results are easily achievable. As a publisher, you are positioned to benefit strongly from these optimizations. But why should you even care?

Well, imagine website loading as a time-trial knockout race. If you fall below a certain time threshold you get to go to the next round, if you don’t – that’s it, you’re out. Winners along the way get certain prizes, like readership loyalty, conversions, better user experience, etc. The losers? Well, the losers don’t get much, they get left out because they failed to prepare for the race.

Here at Appticles, we want to put you into the best position to succeed at your goal. For mobile, where the page size threshold is much lower and the majority of people still run on 3G connections, eliminating deadweight becomes that much more important. So what we usually do here is we take a topic relevant to our customers and we collect the perspectives of different reliable sources in the industry. Then we distill that into improvements for our products and insights for our readers.

In this article, I will address a set of critical questions related to image optimization on mobile for publishers:

Why is image optimization on mobile so important?

Should I really do it for my own publication?

How should I do it?

The growing importance of images on mobile

In the last 2 years, the average page weight has shot up by over 30%, reaching more than 2 MB in size [1]. Images account for more than 60% of total page weight. Naturally, they themselves have grown by 40% in the same time period, which means they are responsible for 65% of all that growth in page weight. Not surprisingly, the mobile internet speeds haven’t really kept up with this growth and the average connection speed stands at an estimated 2 Mbps [2].

That’s because most of us are still running on 3G level mobile internet connections. In real-world terms, the best case scenario for our average connection means it takes 8 seconds to download an average webpage from a mobile device [3]. I don’t know about you, but if I were to navigate to an average webpage from an average mobile connection, I would probably not visit again.

But you might say

“ Sure, Mihai, but most of us now have Wi-Fi in most places we go and so benefit from higher download speeds. “

See, I thought that was true as well, until I looked at the numbers. As a percentage of total mobile data traffic, Wi-Fi accounts for slightly more than half [4]. That is significant, but if you were to ignore optimizations for mobile network users you might be ignoring as much as half of your potential users. Even more tangible than this is what Etsy found – an extra 160kb of images caused their bounce rate to increase 12% on mobile [5].

We’ve even done our own, more detailed studies, looking at the top 10,000 Alexa sites and for publishers the average page weight for those that even have a mobile strategy is 3.14 MB – waaay above the average. If the split holds, that means that almost 2 MB is represented by images alone.

But that’s not all, we’ve used Google’s own metric for page speed to determine how well the top publishing sites fare, and it’s not pretty. The average is around 47/100. To put this into perspective, Google says that a score of 85 or above indicates that the page is performing well [6]. Ouch! And we are only talking about the top publishers, the kind that you’d expect they would have the resources to tackle this problem.

So what are the conclusions we can draw from this data? Well, we know that page weight impacts page load time. Most of that weight is represented by images. We know that this impact is more strongly felt by users on slower internet connections – i.e. mobile networks. We know that publishers have a larger than average page weight. But the bottom line here is images are the low-hanging fruit of the optimization problem and here’s why.

Images – the low-hanging fruit of mobile optimization

Because of the increase in number and diversity of the devices accessing the web, you can no longer serve the same image size to all of them. That would mean a great experience on high resolution devices running on speedy wi-fi, but also a lot of deadweight for lower-resolution ones, running on slower mobile connections.

An experiment was done by A List Apart – publication focused on web standards and best practices – and found optimizations can reduce page weight on a reference retina iPhone between 40 – 70% [7]. That means our average publisher page weight can drop from 3.14MB to 1.88MB, which in load time can mean page load time decreases by at least 5 seconds. I don’t know about you, but if I wasn’t impressed at the start, after running the numbers I would want to know how to do this myself.

If you’re using Appticles already, you’re covered – this is one of the things we do to keep our pages loading blazingly fast on mobile. If not, I will share some of the easier options you have to make this a non-issue, focusing on the three major Content Management Systems – WordPress, Drupal and Joomla, as well as a method where you need a quick-n-dirty solution for a custom CMS which allows you to change the HTML markup.

A plug-n-play solution for publishers on WordPress

Fortunately, for WordPress, the solution is quite straightforward for most publishers. There are two situations:

For WordPress versions older than 4.4, you have to install a plugin – RICG Responsive Images. No further configuration is necessary. WordPress will generate several versions of your uploaded images and serve the best size for each device.

If you are running 4.4 or above, then congratulations, your images are by default responsive.

In the unlikely case that either of the responsive image solutions cause problems, there is a temporary fix available in the form of a plugin – disable-responsive-images.

Drupal modules for Responsive Images

Depending on the version of Drupal you’re running, there are different options available:

For Drupal 8, you get the ‘Responsive Image’ module by default, but you just need to activate it. To configure it, just follow the steps available in this tutorial and your site will be ready to deliver different sized images depending on the device.

If your website is running Drupal 7, then a backport of the ‘Responsive Image’ module is available under the name ‘Picture’. You can set it up by following the tutorial at this link.
If you’re running a version older than Drupal 7, I suggest to upgrade immediately as versions older than 7 are no longer actively maintained by the community.

Joomla solutions that work out of the box

For Joomla, the solution available has a different way of approaching this, but I won’t go into the technical details, but the end result is the same – your visitors will receive device appropriate re-scaled versions of the website’s images. It only supports Joomla!2.5 and above, so if you’re using something older I suggest to upgrade to the latest version for full compatibility. You can download the plugin from the Joomla Extensions Directory here. There is a paid version as well which offers more features and support, but the free version is fully usable as is.

For times when it’s quicker to make your own markup than installing other plugins

Let’s say you’re running a custom CMS that I didn’t cover and you have access to insert your own HTML markup, you are short on time and you must implement several responsive images. What do you do? Do you start painstakingly creating different sized images and then writing the markup on your own? Well you could, but that would take you some time. You can use something like www.responsivebreakpoints.com which lets you upload an image and then adjust a few parameters to generate the HTML markup for you, for instance you can:

Select the minimum and maximum width values that you need for displaying the image;

Adjust size step – Only scaled down image versions that reduce the file size by the size you select are included.

After you’re done tinkering with the options, it will generate all images at the specified resolutions which you can download individually or all at once. Next to them, you also have the necessary HTML markup which you can add to your page. But beware, browser support is quite limited at the time of this writing. However there is a solution to solve compatibility, and it’s relied on heavily by the responsive image plugin in WordPress – PictureFill.

Conclusion

I hope after reading this you’ve seen the benefits of optimising images for mobile users and how it can help improve the experience for users on mobile networks. As a rule of thumb, remember – the more users wait for your page to load, the less likely it is they will have a good experience. At the end, it comes to one simple thing –

“Is the webpage I’m visiting mindful of my time, mindful of me being on the go?”

Your actions will ultimately determine the answer to this question. So whether you’re using Appticles or not for getting to your mobile users, we all share a common goal: putting webpages on a diet for the good of the mobile web and its users!