Improving your image(s)

We’ve already talked about making sure your images are the right size for where you’re going to use them i.e. no 24mp images used for small profile photos, in our #FasterFriday – Image Sizes video.

We’ve talked about the importance of choosing the correct format for your images in #FasterFriday – Image Formats blog post and how it can affect page load times.

Now it’s time to look at how you can further optimise your images with some freely available, and some paid tools and improve your website load times even further.

If we look at the KDAWS logo again, exported as PNG and as a JPEG in their original unoptimised form, exported from Adobe Photoshop:

 

JPEG: 50KB

PNG: 45KB

We then optimised the JPEG with JPEGmini and the PNG with pngquant, and as you can see, there’s a big difference in file sizes:

JPEG: 35KB

PNG: 11KB

The PNG file is less than a quarter of the original size, so it’s going to load roughly 4x faster for your users.  The JPEG isn’t quite as impressive, but it’s still a of saving nearly 43%, so it’s going to load nearly twice as quick as before.

Read on to find our 5 favourite tools for optimising your images.

1. QUIC.cloud (WordPress)

QUIC.cloud is a service from LiteSpeed, makers of the LiteSpeed Enterprise Server software amongst other things.  It is designed exclusively for WordPress websites and uses the LiteSpeed Cache (LScache) plugin to integrate with your website.

When you enable Image Optimisation inside the LScache plugin your images will be sent to the QUIC.cloud servers to be optimised and optionally have a WebP version produced as well, they’ll then be returned to your server, speeding up your page load times.  There is also an optional Content Delivery Network feature that can be enabled as well to allow LiteSpeed to host your images and content on their CDN.

The service operates around credits, that you either get for free depending on what software your hosting provider is licensing from LiteSpeed, or you can buy extra credits yourself.  The free quota level starts at 1000 images per month, and rises to 10,000 per month if your provider uses LiteSpeed Enterprise Server (as we do for our virtual hosting).

The plugin also offers many other optimisations for your WordPress website as well, and you can find out more in our article, Using LScache to speed up WordPress.

2. EWWW Image Optimiser (WordPress)

EWWW have a number of image optimisation tools to help you speed your site up, but by far the easiest and most cost effective option is their EWWW Image Optimizer plugin for WordPress which works out at the bargain price of $0.002 per image!

The plugin allows you to optimise the images stored in your media library and doesn’t require a monthly subscription, you just buy credits (that don’t expire) for the number of images you think you’ll need to optimise.

The other great thing about this plugin? It’ll handle WebP conversion for you as well, including sending them instead of a PNG or JPEG where the browser supports them.

We’ve used this plugin for a number of years across a number of sites and as long as you don’t try and compress every image on maximum compression it gives great results.

3. JPEGmini

As a famous TV advert used to say, “It does what it says on the tin”, JPEGmini works on JPEG images and makes them smaller.

It’s a paid for tool that runs on Windows or Mac and can work on single images or folders full of images.  Each image is optimised for file size and visual quality so you shouldn’t be able to tell the difference between the original and optimised images on screen.

Not only can JPEGmini optimise your images, it can also resize them to appropriate sizes as well so you can make sure you’re using the right size images at the best visual quality and smallest file sizes.

If your image processing needs are much grander then they also have options to build it in to your own app or a server side version you can run.

4. pngquant

pngquant is to PNGs what JPEGmini is to JPEGs, except it’s free!  PNG quant performs image analysis and lossy compression on your images, reducing them in size by up to 70% whilst maintaining visual quality.

Unfortunately there’s no single simple way to install, you’ve a number of options depending on if you’re on Mac, Windows or Linux.  Whichever way you chose it’s still easy to use and works wonders on your PNG files.

5. SVGOMG

You guessed it, SVGOMG is designed for optimising SVG image files such as the one at the top of this article, which it took from 6.28KB to 3.94KB – a saving of nearly 37% on the original uncompressed file size and 48% on the compressed (gzipped) size.

It’s simple and free to use and usually makes a pretty good guess at what is needed first time round, the main thing you’ll want to adjust is the “precision” slider whilst paying careful attention to how the live preview looks on screen.  You can download your optimised file and also view the code for it via the Markup tab at the top left.

Other tools

There are many other tools and plugins out there, these are just some of our favourites that we use when working on the KDAWS site and our own personal sites.

If you’re using an awesome tool that you think we should be telling everyone about then let us know and we can do a part 2.