Image Optimisation Process ⚙️

Tags that this post has been filed under.

Overview: Optimising images is good for page speed, user experience, SEO, and the environment. Here is a little process to reduce an image size.

A Process To Optimise Images

Images are one of the greatest contributors to the weight of a website, i.e. in terms of file size. Using online tools you can easily optimise your images, improve site speed, SEO, and User Experience.

Step 1: Go to PicResize;

Step 2: Upload the raw image and click on “Continue to Edit Picture”;

Step 3: Crop the image if you need to;

Step 4: Scroll down to the section on Resizing the Image, this is basically the width and height you’d like the image to be. The larger the image, the bigger the file size. To give an idea about this, a laptop monitor is commonly 1366px x 768px. If the image you are planning to use is, for example a smaller image in a blog post, then you can reduce the image size quite a bit. If the image is to appear large on the site, then consider a larger size. Resize the image and download the file to your PC;

Step 5: Go to TinyPNG site, upload your newly re-sized image, some magic will happen and the file size will be even smaller!

Step 6: Download the TinyPNG file to your PC, rename it according to your file naming convention, and file it in the appropriate folder.

Another useful site is Pixelied Image Converter. This is good for converting to WEBP format which significantly reduces image file sizes. One caveat to this is to check on caniuse, pretty much at the time of writing this (March, 2023) all browsers support the format, except IE, of course, amounting to 96.76% of all users.