Did you know that optimising images is one of the best ways to increase page load times for your site? The problem of bad image optimisation is very common on small business websites. When you upload large image files, they make your website slower. Slow loading pages results in a poor user experience, reduces the effectiveness of your SEO strategy and lowers your conversion rates.

Research by Google shows that bounce rates increase by 32% when page load time increases from 1 second to 3 seconds. For a small business website, this means a large reduction in traffic and new customers.

Fortunately, optimising images for your website is a straight forward process that doesn’t require much technical knowledge.

What is image optimisation?

It’s the process of saving images in the smallest file size possible without reducing the quality of the image. This is done by using compression technology to reduce file size.

Compression can either be ‘lossless’ or ‘lossy’. Lossless compression means that the image quality remains the same as it was before the compression process. You can also decompress the image to restore the original quality. Lossy compression permanently deletes data from the file to reduce its size. When you use this compression method, it’s not possible to restore the original image if needed.

There are 3 key areas you need to look at to successfully optimise your images for the web:

  1. Image dimensions (height and width)
  2. File format (JPEG, PNG or GIF)
  3. Compression (Higher compression means smaller file sizes)

Most content management systems (WordPress, Joomla, Drupal) or website builders (Wix, Squarespace, GoDaddy) offer native image optimisation, or you can install third party plugins to automate these tasks.

These give you an easy method to obtain reasonable results. However, if you want the maximum impact, it’s always better to optimise your images before uploading them. This gives you a greater degree of control over the final image.

Image dimensions (height and width)

When you take photos with a camera or download stock images, they are normally high resolution, starting with a resolution of 300 DPI and a width of 2000 pixels. An image of this size is great for printing but isn’t very good for a website.

You can crop and resize your image to reduce the file size. When cropping the image, remove details that distract from the subject or aren’t relevant to the content.

The subject doesn’t have to be in the centre of the image. The majority of editors and cameras have a rule of thirds guide built in. Repositioning the main subject produces a dynamic composition that makes the image more visually appealing.

If you are cropping a series of images, keep the cropping consistent, so the final images maintain the look you are trying to achieve.

When you are happy with how the image looks, you need to resize it. Most photo editors allow you to set the height and width when you export the image. The best practice would be to save the image using the exact dimensions you need for the website.

This might not be possible in every instance due to the responsive nature of websites. If that’s the case, export the image using the smallest size possible. There’s no reason for the image to be 2000 pixels wide if it’s only displayed with a maximum width of 450 pixels.

File format (JPEG, PNG or GIF)

Before you save or export your image, you need to choose which file format to use. There are three common formats used for websites:

JPEG – For photos or images with a lot of detail.
PNG – For graphics & logos. Or when you need a transparent background.
GIF – Anything that is animated

PNG is an uncompressed file format which means it’s capable of producing higher quality images, but the file sizes are also bigger.

JPG is a compressed file format, so image quality is permanently reduced, but it produces significantly smaller files.

What about next-gen image formats?

If you’ve tested your web pages with Google Page Speed Insights you’ll probably have come across an opportunity that says “serve images in next-gen formats” with an estimated time saving of multiple seconds.

Next-gen image formats such as WebP, JPEG2000 and JPEG XR offer vastly improved compression capabilities, which means higher quality images with even smaller file sizes.

If you’re using a content management system like WordPress or Drupal, adding next-gen image formats to your website is relatively straight forward. There are numerous caching and CDN plugins that can handle the task. Optimise your image as you normally would, upload to your website and let the plugin handle the rest.

If you’re using a website builder, this might be a little harder (or impossible) to implement. Next-gen formats are still in their infancy and not supported by all web browsers. WebP is leading the way and is currently supported by Chrome, Edge, Firefox and Opera. JPEG 2000 is supported by Safari on Mac and iPhone. JPEG XR is only supported by Edge and Internet Explorer.

To ensure the image is shown correctly, you need multiple versions of the same image in different formats. The website picks which one to show based on the device and browser being used to view the page. Unfortunately, most website builders don’t offer this functionality just yet.

Compression

The third area you want to consider is how much compression you should use. This is usually done when you save or export the image.

If you’re using software such as Adobe Photoshop or Affinity Photo, you’ll find an option called ‘quality’ that can be adjusted. The higher the quality, the larger the file size. In our experience, reducing the quality to 90-95% will reduce the file size substantially without a noticeable difference in the image quality.

There are also web tools you can use to compress your images if you don’t have access to software like Photoshop. Websites like TinyPNG and JPEG Mini offer a quick and easy way to compress images.

If you’re using one of these websites, save your images in the largest format possible and experiment with settings to get result you want. They try to make the file size as small as possible, which can result in a grainy image. Make sure you adjust the settings manually to keep the image looking sharp.

As a general rule of thumb, large full-width images or banner images should be no more than 1 MB in size. Smaller graphics should be 300 KB or less. This should provide the right balance where the images look good, load quickly and make it easy for the search engines to index them.

What software can I use to optimise images for the web?

Depending on your budget and technical knowledge, there are many options available to help you optimise the images for your small business website.

Our favourite options are:

Adobe Photoshop – considered the best photo editing software for a reason. Photoshop has all the tools you need to create amazing images for your website and brand. The downside is the cost. Photoshop (or Creative Cloud) subscriptions can get expensive.

GIMP – GIMP is a free and open source image editor. It offers a comprehensive range of features and has an active support community if you’re looking for help. The downside is the learning curve is steep. The software is extremely powerful, but getting the best out of it takes some practice.

Affinity Photo – Affinity Photo offers a nice balance between features, usability and affordability. The software offers a comprehensive range of editing tools that allow you to create images with ease. You pay a one-off fee rather than a monthly subscription, which makes it more affordable for many businesses.

Web tools for image editing

PIXLR – user-friendly and comes with a 100% free app for your smartphone for editing on the go.

Canva – offers an advanced online image editor.

PicMonkey – described by experts as a “staggeringly great photo editing tool”

TinyPNG – TinyPNG uses smart lossy compression techniques to reduce the file size of your WEBP, JPEG and PNG files.

JPEG Mini – Using patented image optimisation technology, JPEGmini reduces the file size of your photos significantly (up to 80%), while preserving their full resolution and quality.

In conclusion

If you’re not saving optimised images for your website, you need to start doing so immediately. It will make a drastic improvement to the speed of your website and your users will have a better experience.

Fast loading websites also perform better on Google. They favour websites that allow searchers to find what they want quickly. For a small business website, this can be an effective way to get ahead of your competition without having to invest lots of money in SEO.

About Wild Marketing

Wild Marketing build stunning websites for small business and craft online advertising strategies that convert visitors into loyal customers. We have a range of different website options available to suit all budgets.

If you are looking for an affordable website for your small business, we offer a pay monthly web design service that includes everything you need to get online.

If you have web design requirements that are more complex, please feel free to contact us to discuss.