Image Optimization? - You Only Need These Three Tools (video, 9 minutes)
In today's blog post, Siegfried, deploy! presents the best image optimization tools that significantly reduce file sizes for faster loading websites. In a conversation between Siegfried and Stefan, the question arises as to why it is important to use multiple optimization tools. They explain that while automation options exist, it is always a good idea to ensure that images are optimized before uploading them. In the video, Stefan demonstrates how to use the Squoosh app to achieve an astounding file size reduction of up to 84%, going from 304KB down to just 48KB.
Siegfried also discusses the various image formats, such as JPEG and PNG, highlighting that not every format is best suited for every graphic. By experimenting with the settings, he discovers that lossless optimization for PNG allows for even smaller file sizes, with the right codec like OxyPNG achieving a size of 29KB. This shows the importance of adjusting settings for specific images to obtain the best quality while keeping file size low.
In addition to Squoosh, the application SVGO is mentioned, which optimizes SVG files by minimizing their internal code, reducing file sizes down to 4.9KB. Siegfried emphasizes that every SVG file deserves optimization before being uploaded to a content management system, especially since SVGs are not automatically optimized by browsers.
The third tool discussed is ImageOptim, a Mac application that automatically optimizes images when dropped into the app. Although options are limited, it is an excellent tool for batch image processing. Ultimately, Siegfried notes that using tools like Squoosh for single image editing gives more control over the final results. Understanding the various available options is crucial to fully harness the potential of image optimization.
Finally, it is noteworthy to point out the video statistics: at the time of writing this article, the material has gathered 3394 views and 107 likes. This demonstrates that the topic of image optimization is indeed important, and the six-minute video showcased practical tools and techniques that anyone can apply to enhance their website's performance.
Toggle timeline summary
-
Introduction to the best image optimization tools for faster website loading.
-
Discussion about the necessity of multiple optimization tools.
-
Exporting an image from Figma for website use.
-
Uploading the image to Squoosh app for optimization.
-
Observation of an 84% decrease in file size after optimization.
-
Options available to increase quality and different codecs.
-
Questioning if websites handle image optimization automatically.
-
Importance of uploading optimized images for quality.
-
Identifying mistakes with the image format used for optimization.
-
Advantages of using PNG for lossless optimization.
-
Choosing the right codec for further file size reduction.
-
Explaining lossless and lossy compression with WebP format.
-
Comparison of SVG file size with optimized versions.
-
Introduction to SVGO for SVG optimization.
-
Importance of optimizing SVGs before uploading to CMS.
-
Introduction to ImageOptim for batch image optimization.
-
Description of ImageOptim's drag-and-drop functionality.
-
Explaining quality settings and effort options in ImageOptim.
-
Recommendation to use Squoosh app for detailed image optimization.
Transcription
We're going to show you the best image optimization tools to dramatically decrease the file size for fast loading websites. Can I ask you a question, Stefan? Yes. Why multiple? Why can't you just only show us one? 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 uploading this to one of the coolest online tools that I know, Squoosh 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. Because we have 304 kilobytes before and 48 kilobytes after. 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 mosjpg. 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? 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 a good idea to upload an optimized image already. 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. Whoa, wait. 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. 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, 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 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. One tip, always look at the image in the size that it will be displayed. So let's say you have a 1,000 by 1,000 image. And you know, OK, you want to support pixel density of three. Then you would resize it to 3,000 by 3,000. But zoom out so that you see on your screen the 1,000 pixel width. And this should be the image that you 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. 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. Yeah, 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 optimizing kind of the last couple of percents, then this is really the way to go. Yeah. But I think I interrupted you because you wanted to show something about 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 your SVGs before uploading them to a CMS like WordPress. Can you switch to the markup tab on the top? Yes. Yeah. You can see it does strip away classes, IDs, and things like that, white space, and also sometimes optimizes paths even. However, as Steffen 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. 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. Yeah. 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. 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. I couldn't agree more with what you said.