how to optimise images How To Easily Optimise Images For Your Website

Image optimisation is the process of reducing a photo’s file size whilst making sure the quality remains high. There are three elements needed for this: the image’s file size, height and width, and the compression level. 

In this article, we’re going to take a deep dive into image optimisation and how it’s achieved. But first, why does image file size matter anyway?

Why You Should Optimise Your Images

1. Better user experience

Images are usually the largest contributor to page sizes, which has a massive effect on user experience. Optimising your images is crucial because your users:

  • Use different connection speeds — Your users can also be on a variety of connections at home or in the office, whether that’s 4G, 5G, or broadband. If you’re targeting people internationally, bandwidths also vary depending on the country they’re in.

2. Cut back on costs

Since it takes a long time to transfer the data for large images, transferring that data from your hosting company will cost money in terms of bandwidth. The more you can reduce the data being transferred, the more money you’ll save.

3. Improve your site’s loading time

Google considers your site’s loading time as a ranking factor for both Search and Ads. Although there isn’t a huge penalty for this, remember that users are quite fickle. 

A recent study found that a delay of just one second can interrupt a person’s conscious thought process, reducing site conversions in the process. The BBC, for instance, found that they lose 10% of their users for every additional second a page takes to load. 

If your web pages take a long time to download, users will inevitably choose to go to a website that is fast, responsive, and one that they can actually use.

6 Ways to Optimise Your Site’s Images

1. Choose the right image editing software

Here are a few examples of quality editing software:

  • Photoshop — A ubiquitous graphics editor by Adobe, this subscription-based software has a wide range of features that you can use not just to optimise your images but also to touch them up. 
  • Pixlr — If you don’t have the budget for Photoshop, one of the best free online editors is Pixlr. You don’t even need an account to use it. Drag your images into the browser and it will load them up.
  • Microsoft Paint — If all you need is to resize your photos, MS Paint can do the job. It’s built in every Windows computer and you can save files in Windows bitmap, JPEG, GIF, PNG, and TIFF formats.

Whichever software you pick, make sure that you’ll be comfortable using it and it has features good enough for what you need it to do.

2. Understand different image formats

There are several file formats available today, each with its pros and cons. The main thing is ensuring that your website and host support the format that you’ll work with:

  • JPEG — This is the most common image format, as JPEGs can balance quality with smaller file sizes. 
  • GIF — GIF images have a lower quality than JPEGs and are often used for icons or decorative images. This format is best known for animated images.
  • PNG — PNG files can provide a higher quality of images, as they support a wide range of colours and work with transparent backgrounds. However, these features mean the files are larger.
  • WebP — There are various new formats called lossless, which means that you lose less or no image quality for smaller file sizes. The most common one at the moment is developed by Google, called WebP.

As support for newer formats like WebP increases, I believe they’re going to become more ubiquitous with people gradually moving away from JPEGs. 

3. Know how to optimise for thousands of images

For websites reliant on images like e-commerce sites, it can be tricky to optimise thousands of photos. To combat this, you can do the following:

Use a thumbnail for zooming in — Create thumbnails with smaller file sizes that can be loaded quickly. If a user wants to see a larger image that they can zoom into, you can provide an enlarge button. This way, they will be prepared to wait for that image to load. And because it’s a different webpage, that large file will be transferred less often, saving you bandwidth in the process.

Get the dimensions right — Reduce your image to the smallest functional size for its purpose, but don’t reduce it down so small that you can’t see it. If it’s a blog image, for instance, the maximum width is usually 800 pixels wide. Even if you’re going to use a lossless format like WebP, get the dimensions right because this will affect its file size. The more you can reduce your file sizes, the better.

Keep the file sizes down — Our rule of thumb is to try and get an image size to 100 kilobytes or less without severely affecting the image quality. If there are times when this isn’t possible, 120 to 150 kilobytes will still work.

Test your images — Test your images to see if the page loading time improves and if they can help convert customers. Test the image angles that customers prefer, and the ideal number of product listings per page.

4. Know the page speed tools you can use

The three main tools I recommend are:

  • Google’s PageSpeed Insights — This is a free tool from Google. Plug in your URL, and you’ll see info like how your site looks on both desktop and mobile, page load speed, and what you can do to better optimise it.
  • GTmetrix — Apart from page load speed, you’ll also find technical information on your site’s structure, its current performance, and a historical graph. There’s a free version that you can use for a limited number of tests.
  • Pingdom — Another subscription-based tool, you’ll find out your site’s uptime, performance, and end-user interactions. There’s a 14-day free trial period that you can use.

5. Don’t use photos straight from your camera

A lot of clients take pictures with a digital camera and upload those directly to their website. I don’t recommend this as raw images can be several thousand pixels wide and over 10 MB in size. Remember that the rule of thumb is to reduce the image size to about 100 kilobytes or less without severely affecting its quality. 

6. Optimise alt attributes

Alt attributes are the text you see when you hover over an image or when a browser can’t properly render a photo.

Alt attributes can improve your SEO as this helps crawlers index your photos. It also adds an accessibility function to your site. When writing alt attributes:

  • Use natural and plain language instead of stuffing them with keywords (remember that this will also be used for accessibility purposes).
  • Include model numbers or serial numbers for products.
  • Don’t use alt text for decorative images.

Accept the Compromise

When optimising, remember that there should be a balance between the loss of quality that you’re prepared to live with and the file size. This entire process is a compromise because all these software use compression algorithms to optimise the image. The more you optimise the image and the lower the file size you go, the greater reduction in image quality.

If you want to have a website that’s optimised both for search engines and a better user experience, we’ll gladly help you out. Book a strategy call with us today, to find out how we can help you optimise your site (images included).