July 25, 2019
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.
Before you start modifying your images, make sure you have chosen the best file type. There are several types of files you can use:
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.
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.
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.