Keeping your image files as small as possible — without sacrificing quality — is crucial to delivering a smooth and engaging experience for your website visitors. This article explains how to use Squoosh, a free online tool, to optimize your images for the web.
In this article:
How to Use Squoosh to Reduce the Size of your Image Files
About Squoosh
Squoosh is a free online tool that lets you quickly and easily reduce the size of your image files, while still maintaining the visual quality of those images. It uses a variety of cutting-edge image optimization techniques, but more importantly — it is also very easy to use.
The tool was created as an open-source project run by the GoogleChromeLabs team on GitHub.
Important Considerations
- Thinkific's maximum image size limit is 4MB, but we definitely recommend you get your images much smaller if possible. For large, high-resolution images (such as landing page banners), we recommend 1MB as a reasonable maximum, and images that will appear smaller on the page should have correspondingly smaller file sizes.
- If you haven't seen it yet, check out our article on Best Practices for Your Website Images.
How Squoosh Works
When you first load an image into Squoosh (see instructions, below), you will see the image along with a bunch of different options and controls. It's important to understand what these different things do:
Slider with pink and blue arrows: this slider divides the image into a 'before' and 'after' preview, showing the original image on the left and a preview of the compressed image on the right. This is not always obvious at first, because in most cases the default settings result in nearly identical images. You can drag the slider left and right to change which parts of the image are showing the original, and which parts are the compressed image.
Image optimization settings (right side): the options which appear on the right side of the page control how the image will be compressed. This includes what type of compression to use, how aggressively to compress the file, whether to reduce the total color palette, and several other options. This article won't go into these in-depth, but you should definitely play around with them and see what looks best to you!
Image settings (left side): by default, the left side of the image shows the original file you uploaded. However, if you want to compare two different compression settings, you can copy the settings from the right to the left, using the arrows that appear on the right of the 'Edit' bar. Once those settings are copied to the left, you can then change the settings on the right (as normal), and compare the results to the first compression method you chose.
Download controls: below each settings menu, you can see the size of the resulting file and the percentage reduction from the original image. There is also a large download icon, which lets you download the newly-compressed image file.
There is quite a bit more to it, of course, but we won't go into it here. If you want to get more details about the different compression methods and ways to use the app, here is an in-depth article from Target Internet.
How to Use Squoosh to Reduce the Size of your Image Files
Before you get started, make sure you have organized all the image files you want to work with, and know where you want to save the new, smaller files you'll be turning them into.
- Start by navigating to Squoosh.app in your browser
-
Drag and drop your image into the target area, or copy the image file and then paste it into the browser window. The image will appear at 100% zoom, along with a number of options on the bottom right side of the screen; you can zoom in and out with the mouse wheel, or the controls at the bottom of the screen.
- Optional: Adjust the settings as necessary, using the vertical slider to compare the new image quality (right) with the original image (left).
- Once you have adjusted the settings, click the Download icon on the bottom right of the page to download your newly-compressed image file!
Repeat these steps for as many images as you want to optimize, and there you go — smaller, faster-loading images that still look great on the web!
Related Apps
- Page Speed Booster from the The Thinkific App Store!
Page Speed Booster helps optimize load time speeds for visitors on your Thinkific site. It pre-loads page data from linked pages on your Thinkific site into a browser cache during idle time so that when a user clicks a link that page loads more quickly. This speed increase can be important for page conversion rates and improve SEO with Google. More info can be found on the Page Speed Booster install page in The Thinkific App Store.