One simple tip for creating a better customer experience on your website

Have you ever visited a website only to be met with a looooooong page load? Over a year, that wait time adds up. How much time do we spend waiting for web pages to load? What could we be doing with that time? We can give visitors much better experiences when they visit our websites by optimising our images. Images can improve customer experience by illustrating our products, services and articles, plus they are an important part of a visual brand. Sadly, they are also resource-heavy – the large file sizes mean longer download times for visitors, and more space used on our servers. Let’s see how optimising our website images creates a better experience for our visitors.

Performance matters

In the Google article ‘Why Performance Matters‘, the author points to Google’s own research that concludes 53% of mobile visitors abandon a website if the page takes longer than 3 seconds to load. Further research by the BBC suggests that for every additional second a page takes to load, 10 per cent of users leave. In short, page speed is important!

Here’s the dilemma: using images can boost visitor conversions, but if your visitors are navigating away from a slow-loading page, they won’t even see the images. So what is the answer? We can optimise our images before adding them to our websites. How do we do that?

  • Firstly, we can compress our images. Most of the images used on the internet are in jpeg file format. This is a ‘lossy’ format, where the image is compressed by removing information from the image. This may not sound good, but for many images we can actually remove quite a lot of information without making them look rubbish. Images taken on your mobile phone are likely saved in jpeg format with a small amount of compression.
  • We can also reduce the resolution of the image. Even phone cameras have plenty of pixels to create a high resolution image with a large file size. Using 3000 pixel wide photos on your website will definitely pile extra strain on your page load and web hosting.

Optimise like a pro

Let’s look at how we can compress and reduce the resolution of our images. What we need is software that can perform both of these techniques as we save the image. Luckily, there are even free apps for iOS and Android that can do this, so we don’t all need to splash out on Photoshop (although that is also a great choice). Here are three options for a variety of budgets that can do the job for you:

  • Snapseed – this is a free app available on the Apple store and Google Play. You can change your image save options to increase compression and reduce resolution. The other benefit to using an app like Snapseed is that you also have image editing options. These will allow you to achieve a consistent look and style to your images, which is an important part of your visual brand.
  • Affinity Photo – an photo editing app for Windows, Mac and iPad. An affordable alternative to Photoshop, just not quite as powerful. This is a one-off purchase rather than a monthly subscription. If you’re interested in dabbling a little further into photo editing, Affinity Photo will do a good job.
  • Photoshop/Lightroom – the ultimate photo-editing combination? A monthly ongoing subscription makes this an expensive choice, but it really is at the top end of the photo-editing options. Probably overkill if you just want to do some light editing and optimise your images for the web.

A screen grab of Snapseed’s settings panel

Optimisation guidelines

So now we have some software to optimise our images. What are the best settings to use to reduce our file sizes? Sadly there are no clearcut rules, but I’ve narrowed down my usage as follows:

  • For compression, the highest quality I save at is 80%. The image will still look great with this level of compression, but be significantly reduced in size. It is quite common for me to save jpegs as low as 50% quality. I find that on the web at least, this doesn’t really affect the viewing experience, but makes page download times much, much shorter.
  • For resolution, I’ll save anywhere between 800 and 1200 pixels for the main body of the website. This depends on how wide your main content is, and how the images are going to be used. Many content management systems like WordPress create smaller alternative sizes on upload. This gives us the option to select the best size for each use case. If I’m saving an image to use across the full screen width, I save at 1920 pixels wide to make sure the image still looks good on high-resolution screens.
  • I try to make image file sizes a maximum of 150 kilobytes (kb). For the larger hero images, this increases up to 250kb. Sometimes a particularly colourful image will exceed that size. That’s really ok if it fits with your brand aesthetic and doesn’t significantly affect page loading speed.

We should all be aiming to give our customers a better website experience. Optimising our images is extra work. The improved customer experience and potential for increased conversions is surely worth it? If you’re not fully convinced, consider this: Google is now using page speed as a ranking factor for mobile search results. Something to think about the next time you’re uploading an image to your website.