The only 3 tools you need for perfect image optimization

Want to serve the fastest loading images in the wild wild web? By the end of this episode, you'll be armed with Google-recommended tools and strategies that set you on a fast track to becoming an image optimization expert.

Highlights
00:00 Intro
00:41 The magic wand
01:46 The right image format
03:02 Going the extra mile
04:20 The right perspective
05:55 Mastering SVGs
07:20 The no-brainer tool
08:38 Conclusion

Links
- Squoosh: https://squoosh.app/
- SVGO: https://svgomg.net/
- ImageOptim: https://imageoptim.com/

Steffen: 0:00

We're going to show you the best image optimization tools to dramatically decrease the file size for fast loading websites.

Dominik: 0:10

Can I ask you a question, stefan? Yes, why multiple? Why can't you just only show us one?

Steffen: 0:15

I wish there would be an easy answer, and actually I think one of those tools is somewhat an easy answer. Let's do this. Let's go to Figma and download an image that I want to use as a featured image for a website, so I'm just exporting this here and then I'm more uploading this to one of the coolest online tools that I know, Scrooge app. So we can just take this image, upload it there and it will immediately start optimizing the image and you notice that, whoa, I'm getting an 84% decrease in file size.

Dominik: 0:55

Because we have 304 kilobytes before and 48 kilobytes after.

Steffen: 0:59

Which is pretty amazing, right. And then you've got some more options here, for example to increase the quality. But you also got multiple codecs that you can choose. For example, the one I like to use most and gives me the best results is MossJPAC, and when you look at the actual changed image, it's very hard to notice a difference in quality there. And why should you actually do this in the first place? Optimizing your images, right? Isn't the website taking care of that, like your WordPress website, and so on? Anyways.

Dominik: 1:32

Mm not really right. It depends on how you have set up everything. I mean, there are tools for optimizing WordPress images automatically, but it's always like a good idea to upload an optimized image already.

Steffen: 1:45

But this optimized image should be in the best quality possible and in the best format possible, and actually I think I did kind of a mistake here, because JPEG is not the best format for this type of image, because it's more like a graphic, it's not a photograph or something like that, right? So actually I should rather have taken and exported this as a PNG image, because then the original file size is at 67 kilobytes only, so let's just drag and drop this one and then see the further magic that it can do. The benefit of the PNG here is that this optimization is actually lossless, whereas the JPEG was compressed to some extent.

Dominik: 2:28

Whoa, wait yeah you actually converted it to a JPEG now and this even got a decrease in file size. But if you now choose the right format, you will see even a bigger decrease in size.

Steffen: 2:42

I fixed that. I chose the right format, the right codec here Oxypng and then it's decreased to 29 kilobytes only. And if I increase the slider for the effort then I can get the image to be even smaller. Usually Not, this one Doesn't do something for this one, but you should always try, like increasing the effort slider to the very right.

Steffen: 3:08

I'd say there are so many more options here, like, for example, if you chose to convert it to WebP, then you have a lot of advanced settings. However, you got to be aware that WebP does support lossless optimization and lossy compression and by default it's a lossy compression. So I need to tick this box here lossless and increase the effort there If I want this to be lossless optimized. And then I'm getting kind of the smallest file size here of 20.9 kilobytes. However, this image could actually be an SVG and I also downloaded an SVG version of this one and this is in its original format only 16 kilobytes, so even smaller than all the optimized versions combined. But if I drag and drop this one here, I don't have any options to optimize an SVG. It will only convert this to other formats, but usually this would result in larger file sizes. So with all these options. I think it's great, but you really got to know what you want to do and what you want to achieve in the end result.

Dominik: 4:19

One tip always look at the image in the size that it will be displayed. So let's say you have a 1000 by 1000 image and you know, ok, you want to support the pixel density of three. Then you would like resize it to 3000 by 3000, but zoom out so that you see on your screen the 1000 pixel width and this should be the image that you would judge the quality by right. Because, while lossless is always great, if you want to keep the best quality, using lossy compression doesn't necessarily mean that your images look worse and it can drastically reduce the file size as well.

Steffen: 4:57

And this becomes very obvious when you take something like a photograph which is like a huge source file and then optimize that one and you will see that there is a dramatic file increase, like for this one, from six megabytes to just 1.7 megabytes for AVIF. But let's try also the JPEG compression, even like reduced it by less than half of the size. But if you now watch closely you won't actually notice any difference here. So we probably still got some room to decrease the quality, to further decrease the file size, and it will still be hard to notice a difference, and especially like now, if you zoom out and if this should be just like a small image on a website, you might have a lot of potential here and a lot of room for optimization. And yeah, if you really want to get down to optimize, then kind of the last couple of percents, then this is really the way to go.

Dominik: 5:54

Yeah, but I think I interrupted you because you wanted to show something about.

Steffen: 5:58

SVGs, right, and there's another tool it's called SVGO, which is my favorite tool to optimize SVGs, so I can also, in the same way, drag and drop my SVG here. I will see a preview of the optimized image and I will immediately get an optimized version, which was optimized here from 6.7 kilobytes to 4.9, which is great. I got some more optimization options here, but the most basic optimization that it does is, it kind of like, minimizes the code inside of the SVG. I always like to do this for every SVG, especially as SVGs typically do not get optimized in the browser, right? You don't get multiple automatically resized versions on, but this one SVG is typically what every end user will see. So this is very important that you always optimize SVGs before uploading them to a CMS like WordPress.

Dominik: 6:52

Can you switch to the markup tab on the top? Yes, you can see. It does strip away classes, ids and things like that white space, and also sometimes optimizes paths. Even. However, like as Stefan said, there are a lot of options and they do a lot of things, and if you are eager to understand them all, I would actually suggest that you look at least a little bit into how SVGs actually work.

Steffen: 7:19

Absolutely, but these are, like, some of the most advanced things that you can, or tools that you can use to optimize your images and your SVGs and all kinds of formats. Let's talk about the third tool, and the third tool is more of a no-brainer. It's called imageoptim and it's actually an app for Mac that is free to use, and the great thing about this one is that you simply drag and drop all your images on it and it will automatically put them in the queue and optimize them. There are actually no options to choose from here. It also doesn't transcode your images from one format to another one, but it will just go through all those images and directly optimize them and tell you how much it optimized them and how many kilobytes, or many times megabytes, you actually saved.

Dominik: 8:09

However, there are actually options. So if you go to the settings of the app, you can see here that you can activate certain tools that it uses to optimize, and in the quality tab you can also activate a lossy compression and then you have to specify JPEG, png and GIF quality and in the third tab, and optimization, you can say the effort, basically Like what's effort in the Squoosh app, is this setting in this app? While you don't have many options for these, like automated tools, that's great to optimize a lot of images at once, but if you do something on an image by image basis, then I would still suggest to use the Squoosh app and there check the exact values and try to get the smallest image possible.

Steffen: 8:58

I couldn't agree more with what you said.

Siegfried, deploy!

The only 3 tools you need for perfect image optimization

Listen to this podcast on