Schedule a call

Simple image optimisation tips that will improve the performance and conversions of your website

Images are an integral part of a website. They serve a variety of purposes and affect multiple aspects of your site. Whether decorative or informative, images have a tangible impact on your bottom line. From the colours that affect psychology to technical aspects of multimedia on your website, discover our actionable tips on how to optimise your images. You can implement most of these suggestions in just a few minutes. Depending on your CMS, you might not even need the help of a developer.

Why you should care about optimising images on your website

As with any other product, websites need maintenance to protect their longevity. And we’re not talking about just the technical maintenance. If your website is editable by your marketing team, there are several factors that they can influence. Images are a big part of “manual” maintenance. It’s an ongoing process, and getting it wrong can impact your performance.

Editable systems have many benefits, but staying on top of things is a requirement to make them worth it. If you’re publishing a lot of content, you’ll find yourself attaching images left and right. This opens up the possibility of publishing unoptimised images, which can have the following consequences:

  • Slower performance of a page or the website as a whole
  • Reduced conversions
  • Accessibility issues
  • Images of a poor quality negatively affecting your brand

And to top it off, the combination of the above could have a negative impact on SEO. So in the end, you might end up with fewer conversions and less traffic, creating a vicious cycle. Thankfully, it’s easy to avoid this grim outcome. Read on to discover how you can avoid these mistakes in just a few minutes.

What should be the size of website images?

Should your logo be as large as possible to improve the quality? Or maybe if the file is 500 by 200 pixels, it should have those exact dimensions? The rules might be a bit confusing, especially if you’ve worked in print marketing before. In that niche, high resolution is a necessity.

But on websites, large images take longer to load. So how to hit the sweet spot? Thankfully, there’s a golden rule:

Images on your website should be double the size of the container to accommodate Retina displays. The Apple technology allows their devices to pack more pixels on smaller screens, and as a consequence assets need to be double the size to avoid pixelation.

So if you want to display an avatar on the Team page which is 300 by 300 pixels, the file needs to be 600 by 600 pixels. Can it be bigger or smaller? Yes, but you would end up with heavy files or lower quality images on some devices. Bigger isn’t better in this case – you won’t have a noticeable quality improvement.

The best image formats for the Web

Perhaps the most common misconception about web images is that “PNG is a web format”. To an extent, it’s true – but PNG isn’t a “website” format. In this case, “web format” only means that it’s not suitable for print. In fact, PNGs allow for fewer colours than JPEGs.

Their distinct advantage is the transparency layer. Because of that, they seem like a good choice for icons and logos without a background. That additional layer drastically inflates the file size of a PNG – they can be 10 times larger than JPEG. So if you’re using an image with a background, the choice is obvious.

But what if you need transparency? PNG is good, but in some cases, SVG is a better alternative. The files are incredibly lightweight thanks to a much different technology. To explain it, let’s quickly define the difference between raster graphics (like JPEG and PNG) and vector graphics (like SVG).

Did you know…

Raster graphics are images made up of many coloured pixels. Every pixel impacts the file size, and doubling the resolution means the pixel count quadruples.

Vector graphics use mathematical statements which are programmed to display lines and shapes. These can scale indefinitely without increasing the size of the file, as the volume of the code remains the same.

This gives SVGs a huge advantage. They can be as small as 1KB, when PNG files are often larger than 200KB.

Those of you that follow the latest trends will be familiar with WebP, a modern file format that also allows transparency and is smaller than PNGs. It’s a viable option, but browsers with about 5% of the market share don’t fully support it just yet. We’ll update this as soon as this changes, but even though 5% seems small, it’s a major hurdle.

It’s mostly an issue because Safari doesn’t fully support WebP as of yet. There are workarounds to this, but they don’t work out of the box and would require development resources. The performance improvements might be worth it, so it’s worth considering – but it’s not an easy fix that a website manager can handle.

To summarise:

  1. Use JPEG for images with a background
  2. Use SVG when you need transparency and when you can use vector graphics
  3. Use PNG if the image can’t be a vector but requires transparency (i.e. cutouts of silhouettes)
  4. If you can implement a Safari workaround for WebP, use this format as the default and upload Safari-friendly formats based on points 1-3

How images affect performance

The exact numbers will vary case by case. Compressing a JPEG image by 54% without sacrificing on the quality can give upwards of 15% of improvement in loading times. You’ll find that images on websites can often be compressed by 70-80%, so the benefits would be even greater.

Other performance improvements

Scripts that slow down your website

Images are a big performance factor and their impact is often misunderstood. Similarly, scripts can slow down your website and it’s often impossible to optimise the third-party ones. So how can you improve your performance with such a big limitation? There is an incredible resource that measured how various scripts affect loading times, which might help you choose alternative providers of the integrations you’re using.

How to optimise and compress images for a website

At this stage, you will know that two factors are very important for image performance: compression and resolution. Starting with the latter, we just need to reiterate that your images should be exactly twice the size of the container. If you don’t know what the container is, you can right-click the image and choose “Inspect” in your browser and it will highlight the size. If you find that an image is 1600 by 800 pixels but the container is just 400 by 200, you should reduce the resolution to 800×400.

Compressing is much easier. As long as you can update files in your content management system, you have a handful of online tools. Optimizilla is our favourite image compressor which works with JPEG, GIF and PNG files. All uploaded data is also removed after an hour, so your privacy is protected.

Accessible images – how to name image files?

Accessibility is often overlooked, but it also has a tangible impact. The obvious consequence of neglecting it is making the website less usable. Accessibility is incredibly important for people with disabilities, and some deviations from the standards will impact every single user.

In case of images, the most important factors are the file names and image alt text. It’s easy to get it wrong if you’re familiar with dated SEO practices. People often think they need to put keywords in there, or description that are tailored to search engines. This is the biggest mistake.

File names and alt text need to be for the people.

So how to achieve that? First of all, you need to realise that there are two types of images: decorative and informative. In case of both of them, make sure to keep the file names descriptive. Accessibility-wise, these are the “last resort” for screen readers.

How to write image alt text

As for alt text, there is a subtle difference. Decorative images should have an empty alt text tag. In that case, screen readers skip them. But if you leave out the alt tag entirely, some screen readers will read out the file name as a fallback mechanism. That’s why it’s so important to keep them informative.

When it comes to informative images, your alt text should not be empty and it needs to be descriptive. Don’t stuff in paragraphs of text in there, and don’t worry about keywords. Be specific. Alternative text is a feature for your users. It was an SEO factor in the past, when search engines weren’t advanced enough to work based on other factors – but it was never intended to be like that.

Where to get free images for a website

We’ve compiled a list of the 4 best libraries with free images for a website.

The psychology of colours and images

These last few tips will be less actionable at times, but they can bring great results – almost at a flip of a switch. Some will require assistance from a developer, and likely even a designer, but we firmly believe the effort is worth it in most cases.

Psychology is often underestimated on websites. The colours on your website are more than just a subjective preference of a style. This will come as no surprise to those businesses with precise brand guidelines. Instead, many design choices blindly follow “best practices”. They’re often a product of guesswork and personal preference – and that’s not what your business needs.

As an example from our article about how colours affect sales, there is a big difference between the purpose of a website with dominant background colour and the more toned down ones. The former works great with strong brands, while the latter shines for e-commerce and other conversion-orientated websites.

The imagery on your website can also psychologically influence the buyers. Researchers found that pictures can help people imagine smells. They aren’t equally effective across all media formats, and they might less persuasive if used as small images on a website, but it’s definitely worth keeping in mind. Perhaps nice floral imagery is a perfect fit for your website?