Who hasn’t put their site through Google’s PageSpeed Insights and thought “how on earth am I going to get those images any smaller”? I know I have. Well, even though you won’t necessarily be able to satisfy Google, you can at least get your images as lean as possible and score points with both it, and your users but making a few little image optimization tweaks.
Get Your Images in Shape before Uploading
Before you get started with image compression, take a step back and make sure your images get off to a good start. Here are three things you can do to help:
- Resize them
- Name them properly
- Use the right file format for the job
Right Sizing your Images
If you’re going to use an image that only needs to be 640 x 480 pixels, resize it before you upload it. You’ll not only save on bandwidth but, if storage space is an issue, you’ll buy yourself some breathing room.
Name Your Images Appropriately
It might sound unnecessary but naming your images appropriately helps with Search Engine Optimisation (SEO). For Google and Co. to be able to make sense of what’s on your page, you should name your images according to the subject matter they relate to. For example, using an image of a recipe ingredient in a blog post about a specific recipe and leaving the file name as DSC0274.jpg means that search engines have little or no idea of what the image is. This might change in future as Artificial Intelligence improves but for now they just don’t know what to make of it. Simply rename name it according to what you want search engines to identify the image as.
Choose your Filetype
Most image editing packages will allow you to save or export your images in a variety of forms. The two most widely used formats online are jpeg and png. As a rule of thumb, if it’s a photo, save it as a jpeg, and if it’s a graphic like a logo, save it as a png. The difference in file size is often significant.
Tools for Optimizing your Images
There are a couple of routes you can take when it comes to getting your image files as small as possible without noticeably degrading their quality. There are a number of companies that offer online image optimization, and among the best are Kraken, JPEGmini, Compressor, and my personal favourite, TinyPNG.
Kraken supports JPEG, PNG, GIF (including animated GIFs) and SVG images, JPEGmini only supports JPEG, Compressor.io supports JPEG, PNG, GIF, and SVG, and TinyPNG supports PNG and JPEG.
To test their compression abilities, let’s take a photo and run it through all three and compare the results. For this test, I’ve used an image from pixabay.com which has a reasonable degree of complexity.
- Kraken 37%
- JPEGMini 45%
- Compressor.io 49%
- TinyPNG 67%
As you can see from the results, by no small margin, the best compression comes from TinyPNG and to my eye the image quality is very acceptable at 188 KB. That’s 386 KB less than the original 574 KB.
Of the four tools, at the time of writing, only two have WordPress plugins. Kraken have a number of plans which all start out as a free account with a 50 MB testing quota. TinyPNG on the other hand offer 500 free compressions per month after which they charge per image. You need to remember that between WordPress and your theme, for every image you upload, a number of additional files are generated from the one you original uploaded.
So there you have it, a quick rundown of four good image optimization tools. The one that wins hands down for me is TinyPNG which gives a generous monthly quota and does an excellent job at compression your images. So in your endeavours to speed up your page load times, I’d definitely recommend installing TinyPNG and lose some weight on those flabby images!