Prepare Images for Your Website

The primary goal of preparing your images is to find the balance between the smallest file size and acceptable quality. There is more than one way to perform almost all of these optimisations. One of the most popular tools ways is to compress them before uploading to the website. This can be done usually using programs like Adobe Photoshop or Affinity Photo. Some of these tasks can also be performed using plugins, which we will go into more below.

Two primary things to consider are the image file format and type of compression you use. By choosing the right combination of image file format and compression, you can reduce your image size by as much as five times. You will have to experiment with each image and file format to see what works best.

Choose a Right File Format

Before you start modifying your images, make sure you have chosen the best file type. There are several types of files you can use:

• PNG – produces better quality images, but also has a larger file size. It only uses lossless compression.
• JPEG – uses lossy and lossless optimisation. You can adjust the quality level for the right balance of quality and file size.
• GIF – only uses 256 colours. It is the best choice for animated dynamic images. It only uses lossless compression.

There are several others, such as JPEG and WebP, but all browsers do not universally support them. Ideally, you should use JPEG for images with lots of colour and PNG for simple images.

Compression Quality vs Size

Here is an example of what can happen you compress an image too much. The first is using a very high compression rate, which results in a very low-quality image (but smaller file size). Note: The original image untouched is 2.06 MB.

So we took the image again at a medium compression rate and as you can see below, the quality looks good now and the file size is 70 KB, which is acceptable for a high-resolution photo. Typically simpler images like PNGs should be under 100 KB or less for best performance.

Image Optimisation Tools and Programs

There are a lot of tools and programs out there, both premium and free, that you can use to optimise your images. Some give you the tools to perform your optimisations and others do the work for you. We are personally big fans of Affinity Photo, as it is cheap and gives you almost identical features to that of Adobe Photoshop.