Visual content. It’s engaging, it’s impactful, it’s pretty much a requirement for any business website in this day and age – but is yours actually losing you valuable web traffic?

Large photo and video file sizes will slow your website down

A reported 40% of users abandon sites that take longer than 3 seconds to load [1] . So you can’t afford to let something easy to prevent like large image file sizes cost you business.

The users abandoning your website are represented in your website’s bounce rate figure. Your bounce rate impacts your Google page ranking, so your images really can cost you. This will get worse from July this year – but more on that later.

Ageing man

“I was 25 when this webpage started loading…” 

We’re not talking image dimensions here (as much as it’s important that these are optimised according to your website design) we’re talking about the number of Kilobytes ‘KBs’ or worse – Megabytes ‘MBs’ – of space they take up.

Think about it. You have a beautiful, show-stopping image as your main header or background on your homepage. You might also have smaller images that showcase the different services or products you provide – with the aim of attracting users and encouraging them to navigate to further pages.

These images all take up physical space on your web page. So when a user visits your page, that data needs time to load.

But every image adds to your load time, so every image file size counts.

If your file sizes are too large, do you know what happens to those beautiful, show-stopping images sure to lure prospective clients in? Well, 40% your prospective clients won’t ever get to see them – they’ve already left your yet-to-be-loaded page.

What’s more, 79% of shoppers dissatisfied with a web page’s performance say they’re unlikely to return, and 44% say they’d tell a friend about a bad online experience .

That’s bad for business.

Let’s take a look at an example of a slow website

Back in 2010, Huffington Post ran an article on the Top 10 Slowest Loading Websites of the Fortune 500 [2] . Now the majority of these have since done a great deal of work to improve load times since (we tested them all), but there were a couple still lagging in the load stakes.

Smithfield Foods is a meat-processing company with its HQ in the USA. The first thing we saw when we visited their website? Blank space. For over 4 seconds. We were then presented with:

Blank space

Is that text? Oh yeah, difficult to read on that white background though –

Blank space 2

 

 

Oh! So that’s what it’s supposed to look like, a video that showcases their household name brands!

Smithfield

Now we can see that engaging content – but we had to wait for it. Many people won’t.

Remember, this is a big brand. It can afford to take other, more complicated (and expensive) steps to ensure its page loads fast e.g. reducing server response time, minifying their Javascript, HTML and CSS. Which has been done.

Yet despite this, Smithfield’s poor image and video optimisation is contributing to its page-rendering time being in the bottom third of all pages. Fortune 500 company. Bottom third.

How do we know this? Read on.

So how do I analyse my web page speed?

Glad you asked.

Google PageSpeed Insights [3] allows you to analyse the performance of your web page on both mobile and desktop. It also provides recommendations as to how you can improve your speed. This is the result for Smithfield Foods:

Insights

What was Google’s top suggestion for improvement?

Suggestions

Of course.

 

The one downside of PageSpeed Insights is that the ‘How to fix’ sections are really for the tech-savvy and the recommendations for optimising images are code-based.

How can I easily optimise my website images?

There are a number of ways you can do this, from the codey stuff [4] Google suggests to utilising the ‘Save for Web (Legacy)’ feature in Photoshop.

Let’s choose the simplest way:

  1. Use the right image formats for web:
    .JPG, .PNG, .GIF. The holy trinity. Put your .TIF, .SVGs and the like away. They are not welcome.

  2. Make sure your image dimensions are suited to your website/CMS
    Find out your ideal website dimensions depending on where you are placing your image. E.g. full background or header images are likely to be the full-page width, with featured images in your content likely to be smaller.

    You can usually find this information out in your CMS or if you’re using a website design template, it will be in the documentation.

    Having images in the right dimensions means your website won’t spend valuable load time trying to resize them to fit their location.

  3. One steps 1 and 2 are adhered to, use a free web-based compression tool such as Tiny PNG [5] or Image Smaller [6] .
    You simply upload your images into the tools and they remove any unnecessary meta-data and the like, often reducing file sizes by up to 90% !

Tiny PNG even has its own image analyser [7] , which will tell you the no. images it finds on your website, the combined size of these images and then the optimised size, based on the compression Tiny PNG can deliver.

Take our website for example, Tiny PNG has recognised that by optimising the images on our site, we could reduce the space they take up by 60% with our page speed increasing by over 7 SECONDS. We do have an excuse, we’re currently overhauling our entire website – what’s yours?

TinyJPG

Won’t optimising my images make them look bad?

Let’s try it! So I know that the recommended image dimension for this blog is 801×517 pixels. I found a beautiful image of a lake on pexels.com and in Photoshop, resized it to the required dimensions, exporting it as a .JPG, which you can see below:

459KB image

The file size for this 801×517 image? 459KB . Well it is beautiful and look at all those colours!

How about this one?

142KB

What’s the difference? 69% to be exact. This image – via Tiny PNG – is only 142KB in file size.

Exact same dimensions, exact same beauty. Faster load time.

What’s a good image file size to aim for?

Well, this depends on the number of images on your web page. For a fast loading page, ideally all the images on your page will take up less than 500kb.

One of our clients for example has a header image on each page that is 1290x850px in width. We know the featured images on their page are 600x400px. The header images will automatically be larger due to the dimensions, so we allow for up to 150kb in file size for these. Therefore we ensure our featured images are below 75kb.

Taking one of their pages as an example, alongside the necessary hero image they wanted 4 further images to support the page text. Following our rules above, here’s how the final optimised image sizes stack up:

96kb hero image x1
30kb body image x1
22kb body image x1
27kb  body image x1

Combined page image size: <159KB

Running that through tiny PNG’s analyser just to be sure:

Suggestions 2

Just what I thought.

Optimising your image file sizes is quick, simple and could ultimately make you money by reducing the number of bounces on your website.

Still not convinced? Google will be using page speed in mobile ranking from July 2018.

Yup. Last month, Google Announced [8] the speed of your website will actively affect where you rank in Google page listing results on mobile devices. Don’t panic just yet, the change isn’t due to be rolled out until July this year, so there’s plenty of time to get your image sizes sorted.

Want more tips like this? Say hello or view our most recent blogs below:

 

References: