Large images are the main reason why websites are slow. Pages look dull without them but they ruin the performance if you add them. Google comes to the rescue with a Squoosh web tool.
How many times have you heard that visitors leave websites that are slow? Probably quite a lot and while I don’t believe some of the figures (50% leave if it takes longer than 3 seconds to load), performance is certainly very important and is an issue you should tackle on your website or blog if you have not yet done so.
Every second you can shave off the loading time for web pages will make your site visitors happier and happy visitors tend to come back. You have to have great content of course, but the site also need great speed too.
Web images, especially large images that will the width of the page, can be very slow to download if they are not optimized correctly. I have seen web pages that are over 10 MB in size and that barely work on phones. You would not want to browse sites like that on mobile data.
Shrink and compress with GIMP
Images must be shrunk in size and compressed to save space in order to make them download as fast as possible. Resize all images so that they are the width of the space on the page. Usually web pages are no bigger than 1,000 pixels and many are smaller if they have sidebars.
This website’s template uses a width of 678 pixels for the main content. This means that it is rarely worth having images larger than this because there isn’t the space to show them.
(If an image is larger than the space, the browser will shrink it to fit. Not only does this mean large downloads, the browser has to do extra work resizing the image. A double performance hit.)
After resizing an image, export it. Here is the Export Image function in GIMP. When saving as a JPG file there is a quality slider. Lower the quality and the file size shrinks.
You must find a balance between quality and file size and somewhere around 80 is a good choice. It is possible to go lower with some images and a quality setting of 70 can be sometimes used to produce even smaller images. These will download even faster and speed up web pages even more.
After saving an image, it can then be uploaded to your site. It is better to optimize images before uploading them than to use a plugin to fix bad images on a website. Some of the image optimization plugins can slow down your site or use too many resources for budget web hosting.
Compress image with Squoosh
If you want a quick and easy way to optimize images for your website, go to the Squoosh website. It is a Google tool and it works on Windows PC and Apple Mac. There is even a mobile version that will work on a phone.
This is the home page and it could not be simpler. Just drag a photo from the computer’s disk and drop it on the browser window. It is uploaded to the site and is displayed in the browser and overlaid with various buttons and panels.
Resize the image
Tick the checkbox to resize the image if it is too big. There are then options to set the width and height. It is usually sufficient to set the width and the height is set automatically with the Maintain aspect ratio checkbox set.
The button in the bottom right corner is to download the optimized image and save it to the disk on the computer.
Set the image quality
The image quality can be set in two places and at the top is a Method. Click it to choose from four options, each of which has a small effect on the image quality and file size. The file size is shown at the bottom and you should keep an eye on this.
The Quality slider is the main way to set the image quality and file size. Drag it to lower values to shrink the file size, but remember that this also reduces the quality, so don’t overdo it. The default is 75 and somewhere near this is usually best.
The line down the middle of the image with the double headed arrow can be dragged left and right. It shows the image before (left side) and after (right side) compression. Drag it left and right to see the effect of the settings on the image
JPEG vs PNG
The Compress menu enables you to choose between various PNG and JPEG file formats. Usually photographs are best with JPEG and illustrations and drawings are best with PNG. You may need to try all the options to see which produces the smaller file size.
Advanced image options
There is no need for most people to use the advanced settings. If you don’t know what any of this means, ignore it and let Squoosh choose the best options.
Does Squoosh work?
I used Squoosh to optimise this photo of a train and used the default settings. It resulted in a file size of 28 k.
I used GIMP to export the train as a JPEG and lowered the quality to match Squoosh’s file size of 28 k.
The top image is from GIMP zoomed in and you can see the JPEG compression at work with the fuzzy outlines.
The bottom image is from Squoosh and there are far fewer JPEG compression artefacts. Squoosh has done a better job of compressing this image than I can with GIMP. I matched the file size, but could not match the quality.
Squoosh produces very small images, but without losing as much quality as you would if you optimised it yourself. I will no doubt be making more use of Squoosh for compressing web images.
Squoosh for mobile
There is a version for phones at smaller-pictures.appspot.com – go there in a browser and you will see an option to add an icon to the home screen. Add it and the website runs like an app on the phone.
Unfortunately, there was no image resize option when I tried it. However, this may become available in the future, so keep checking. Without this, I cannot recommend the mobile version, but the website works great on a Mac and PC.