Large images are the number one reason why websites are slow. Pages look dull without them, but slow if you add them. What can you do? Optimize web images for speed with Squoosh online tool.
How many times have you heard that visitors leave websites that are slow and take too long to load? Probably quite a lot and while I don’t believe some of the figures passed around, like 50% leave if it takes longer than 3 seconds to load, a speedy website 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 more often than unhappy ones. Speed is not everything and you must have great content of course, but performance is an issue that cannot be ignored.
Web images, especially large images that fill the width of the page, can be very slow to download if they are not optimized correctly. I have seen web pages that were over 10 MB in size and that barely worked on phones. You would not want to browse sites like that on mobile data.
Fortunately, most people are aware of the importance of speed and have done something about it. However, there is still more that can be done.
Resize and compress images with a photo editor
Images must be shrunk in size in order to make them download as fast as possible. This means both the dimensions and the resulting file size. Resize all images so that they are the width of the space on the web page. Usually, pages are no bigger than 1,200 pixels wide and many have sidebars and white space, which reduces that even further.
This website’s template uses a width of 678 pixels for the main content, for example. This means that it is not worth having images larger than that 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 larger downloads than is necessary, but a web browser also has to do extra work resizing the image. A double performance hit.
After resizing an image in a photo editor, export it. Here is the Export Image function in GIMP, which is a useful free photo editor for PC and Mac. When saving as a JPG file there is a quality slider. Lower the quality and the file size shrinks.
To optimize web images, 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 WordPress 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.
GIMP is good for many photo editing tasks, but it does not create the most optimized images. I save .PNG files from GIMP and then optimize the file size using Squoosh online tool.
- 5 image compression utilities for the Apple Mac
- Improve website speed by using more compact WebP images
Compress images with Squoosh
If you want a quick and easy way to optimize web images for your site, go to the Squoosh website. It is an open source tool from Google and it works on Windows PC, Apple Mac and Linux since all it needs is a web browser. It even works 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 images to shrink the file size
Turn on the Resize switch shrink the image if it is too big to fit on the web page. Set the width and the height is set automatically with the Maintain aspect ratio checkbox set. There are several different methods for resizing and when you have the time to spare, you can try each one and see which one is best for you. The default is usually fine.
The button in the bottom right corner is to download the optimized image and save it to the disk on the computer, but don’t click it yet, there is a lot more to do.
I usually resize, crop and do other things to the image in GIMP and save it as a .PNG at the right size. I use Squoosh mainly to optimize the file size.
Choose a file format, WebP is best
The file format of an image has a large effect on the file size and Squoosh lets you choose from several different formats. Most images on web pages are best saved in the WebP image file format. It has the best combination of quality, compatibility and small file size.
Support for WebP images has been included in all web browsers for the last three years or so. If you are still using Internet Explorer from 2010 you will not be able to see WebP images, but honesty, that is the least of your worries and old browsers have all sorts of problems with modern websites. There is no reason not to have a modern web browser, so there is no reason not to use WebP.
There is one exception. The situation may have changed, but last time I tried it, WebP featured images, that is the big one at the top web posts, did not show up in some social media shares. Share a link to a page on social media and it shows the featured image. It is best if it is JPEG. The rest of the images on a web page can be WebP.
Set the image quality
The image quality affects the file size of some image formats, such as JPEG and WebP. Reduce the quality and the file size is reduced, which means smaller downloads and faster web pages. Whether you choose JPEG or WebP, there are sliders that can be adjusted and the aim is to strike a balance between the image quality and the file size.
Drag the sliders left and right, look at the image preview and see the file size in the bottom right corner. It does not take long to find the right balance. At the bottom left of the screenshot above you can see that the original image was 2.64 MB and at the bottom right it shows it will be 50.1 kB when downloaded, which is a 98% reduction in file size.
Most of that comes from resizing but selecting WebP and adjusting the Effort and Quality sliders has an effect too. This image is optimized and the download button in the bottom right can be clicked.
Advanced image options
With some of the file formats, there are advanced image optimization options. You can see some of the WebP advanced features in the screenshot and there are more. There are advanced JPEG settings too.
There is no need for most people to use the advanced settings to optimize web images. If you don’t know what any of the options mean, ignore them and simply use the Squoosh default settings, they are usually fine.
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 photo and lowered the quality to match Squoosh’s file size of 28 k.
The top image is a zoomed in section of the GIMP photo and you can see the JPEG compression at work with the fuzzy outlines.
The bottom image is from Squoosh and there are far fewer 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, especially with WebP, but without losing as much quality as you would if you optimized it yourself. There is no doubt that making more use of Squoosh to optimize web images will lead to a faster website and also better quality images.
The only downside with Squoosh is that you have to optimize web images one at a time and there is no bulk processing option. However, you can still process images quite quickly. Optimize the first image, then drag and drop the next image onto it and the same settings are applied. So you drag, drop, click download, repeat. You can get through half a dozen images in 30 seconds.
