5 Step Guide to Squoosh Image Compression
Loading the right size image into your website is one of the fastest ways to speed up load times for your website. Using an image that is both the right size of pixels and utilizes the right amount of compression, combined with the right file type, ensures your images are clear and load quickly for your users. Bonus, the smaller the file the more likely a search engine has to render your website when crawling and indexing.
Squoosh.app is one of the easiest and at the same time customizable free image compression and resizing tools on the internet.
What is Squoosh.app?
Squoosh is the brainchild of the GoogleChromeLabs team. It is an open-source development project that is working to put some of the top image compressions features in the hands of users, in hopes of speeding up the internet, one image at a time. Squoosh removes the need for high priced imaging programs just to compress an image. Squoosh also allows you to see, in real-time, your image as it is compressed, allowing you the opportunity to adjust settings on the fly until your image is a perfect balance of pixels, to compression, all while showing you your exact file size savings.
“Squoosh is an image compression web app that allows you to dive into the advanced options provided by various image compressors.” – Squoosh README on GitHub
Squoosh works straight from your browser as a web app, and can also be downloaded onto your desktop for easier access.
Compressing an image with Squoosh
Squoosh image compressing can be quick and easy, or highly advanced and targeted depending on your dedication to finding all the right settings. For this guide, we are going to cover how you will likely use Squoosh 80%+ of the time, to resize and do simple image compression.
Step 1 - Go to https://squoosh.app/ in your browser
Step 2 - Load your image
Utilizing either the drag and drop option or the file selector, load the image you are compressing into the browser.
By default, images load into Squoosh at 100% image size and show an output of MozJPG at a compression quality of 75%.
For the image below, we zoomed out to 17% so you can see the entire image. This image started off at 3181x4772 pixels, jpg image, at 4.6MB. You can see the original file size in the bottom left of the screen.
Step 3 - Review your image
Now that you can see your image in the window, it is time to assess what you need to do with it. I recommend taking some time to assess what your current image is and what image size you will need. You could compress all your images to the exact same settings every time. I suggest a better plan.
Determine the largest image size in pixels that you will need to use your image
Go to your website and determine the largest image size you will serve the image to your visitors. if the image is only to be used in half the window, you may only need an image that is 600 or 700 px wide.
What type of file type output is correct for you?
Picking the type of file to use on your site is also important. Picking a file type basically means you are also picking the type of compression that will be used on your files. Logos, illustrations, and photos all have different color requirements. Some images require clear backgrounds, others need a large number of colors, like gradients. Picking the right file compression format can drastically reduce your file size for your intended purpose.
Image Output file types available in Squoosh:
- JPG - Photos, gradients, and images with lots of colors, edge to edge (no clear pixels)
- PNG - Clear background images / Illustrations with limited colors
- WebP - Advanced images (WebP may not work in all browsers)
- AVIF - Newest advance image format (AVIF may not work in all browsers)
Step 4 - The Squoosh Evaluator
The Squoosh Evaluator uses an interactive slider that allows you to see the effects of your image compression settings on the quality of the image you are compressing. The goal of compressing your images is not to get the smallest file size or to just resize the files, it is to balance the height x width of the image to the color and clarity of the image all while working to reduce the images files size. The interactive slider is your guide to ensure the clarity of the image you are compressing.
Within this guide we are going to stick to the majority of ways you will use Squoosh.
Resize Methods
Start by Resizing your image to the right image size in pixel. For now, use Lanczos3 for your image resize method. It is the default and works well in most cases. You can then select the preset image drop down to select an image size percentage. I suggest using the Custom setting in most cases, as you can set the image height and width to exact settings. I suggest selecting premultiply alpha channel, linear RGB and maintain aspect ratio settings as well. Play with these settings as you become more comfortable.
After entering your resize image sizes, You will need to zoom out on your image to get it to be approximately the same size as your final image. This will give you a better approximation of how the image will look in your browser when loaded to your website.
Reduce Palette refers to reducing the total number of colors used in your image to 256 colors or less. Reducing the colors in your palette will likely reduce your image size, but does sacrifice the clarity and crispness of most photos. If your image is an illustration or logo, with no gradients or shadows and with a limited number of colors, activating this option may be a good way to save file size. Test it, and see if your image stays sharp.
Compress Methods
Next, choose the compression type. Most of the time this will either be MozJPG for all JGP compression and OxiPNG for all PNG compression. There are other compression types available as you learn the tool more. For now, master these two types.
JPG: When you choose any JPG option, you will then be able to adjust the quality of the compression on a sliding scale. For JPGs, this is where you will spend most of your time. Move the slider and check for the best setting for your image. Every image is different so take your time here to get it right. If your original image has any transparent pixels, they will be displayed as black pixels in the image. JPG is not suggested for any images with transparency in them.
PNG: When you choose any PNG options, you will be able to select an effort level of compression between 0 and 3. In most cases, I use 2 for most of my images.
WebP: When you choose WebP, you can choose Lossless, which acts like a PNG, or Lossy, which allows you to select your image quality like a JGP. WebP images can also have transparent areas of their image. Although you may be tempted to use WebP images, and they do have some of the smallest file sizes, not all browsers are currently compatible with this image time. This means the images will not show in all browsers. At this time, Safari users on any Pre-MacOS 11 Big Sur systems may not be covered. List of compatible WebP Browsers.
AVIF: When you choose AVIF, you get similar options to WebP image adjustments. You can choose Lossless, which acts like a PNG, or Lossy, which allows you to select your image quality like a JGP. AVIF images can also have transparent areas of their image. AVIF tends to have the best compression but at this time the least amount of browser support. Current browser compatibility.
What file size should I shoot for?
For most of my images, inside of a post, I shoot to get the image below 100kb, as long as I don't lose image clarity. When I am pushing to get the best compression possible, I utilize the Google PageSpeed Insights/Chrome Lighthouse reports to tell me if an image is oversized for desktop and or mobile.
For full-width images, that are front and center, I will make sure to size the width of my images to 1400px to 1920px to 2400px depending on my site specs. This number should match the largest image size you plan to use without being bigger than the original image size. Then I adjust the image as best I can to get the file as small as I can through micro-adjustments. Also, I will only load this image for desktop windows, and make sure to use a more compressed version of the image for tablet and mobile screens.
Step 5 - Download your compressed image
Once you have completed making all your adjustments, download the new file with the download button in the bottom right of the window. This file will be downloaded directly into the default browser file download location. For me, this is the download folder, but for you, it may have been changed to your desktop.
That's it! Now you can upload this image, just like you would have before compressing it for your website.