Squoosh
Squoosh is a free app from Google that’s aimed at helping web designers compress their images without sacrificing quality. You drag and drop your image into the app and use a slider to play with the amount of compression, so you can quickly find a good balance between picture quality and file size.
The app works both online and offline, and overall it’s a win-win: web designers save time, and Google gets a faster web that still looks good.
As web pages have advanced over the years, they have also dramatically increased in size. This has gradually contributed to pages loading slower and slower. To help web developers easily optimize their pages, Google Chrome Labs has released a new web tool called Squoosh that can downsize, compress, and reformat images.
Demonstrated briefly at the Chrome Dev Summit, Squoosh’s top priority is speed, and is primarily just a demo of new capabilities that recent improvements to Chrome already bring to the table. For example, by using WebAssembly, Squoosh is able to use image codecs that are not typically available in the browser.
Supporting a variety of web formats like MozJPEG and WebP and traditional ones like PNG, Squoosh allows you to quickly make your images web-ready. The app is able to do 1:1 visual comparisons of the original image and its compressed counterpart, to help you understand the pros and cons of each format.
After you’ve loaded Squoosh for the first time, the app is able to work offline, performing all of its work within the browser itself. The Google Chrome Labs team is also particularly proud of Squoosh’s ability to offer a consistently smooth UI even when the app is working on a taxing resize or conversion.
Compressing a website’s image files is one of the quickest and easiest ways to make that site load faster for users. Join us as we explore a new tool that could make the compression process more effective and accessible than ever: Squoosh.app. Want to know more? Check out our review of the Squoosh App on The Digital Marketing Podcast.
What is Squoosh?
“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
In other words, Squoosh is a greatest hits compilation of image compressor features. It packs various image processing settings into a refreshingly accessible, free-to-use application that runs in your browser window, allowing you to preview the effects of different compression actions in real-time. At the time of writing, you can use Squoosh by loading its webpage (https://squoosh.app) on any of the major web browsers.
Squoosh is an experimental, open-source development project run by the GoogleChromeLabs team on GitHub.
How to use Squoosh to compress your image files?
Compressing image files on Squoosh can be exceptionally quick and easy, or highly thorough and precise. That depends on how much time you are willing to spend playing with its settings. Whichever approach you take, the process is broadly the same – so let’s walk through it.
At the centre of the screen is a slider, which can be dragged left and right. This is for comparison of how the image looks before and after compression. So, if we were to drag it fully to the left, we’d see how the full image will look after compression; and if we were to drag it fully to the right we’d see the original image.
The view shown to the left and right of the slider can be changed in real time by tweaking the compression settings to the bottom-left and bottom-right – we’ll talk about those soon.
We can also replace the original image view on the left with another compression type, which helps a great deal with deciding which settings to use.
Exploring Squoosh’s compression settings
In order to achieve the best possible ratio of image quality to file size, we’d recommend looking into a few of Squoosh’s more advanced settings.
First and foremost, have you chosen the best compression type for the image in question? We consider these three options the most useful.
OptiPNG – converts PNG, BMP GIF, PNM and TIFF to optimised PNG.
MozJPEG – converts JPG, TARGA, BMP and PPM to optimised JPEG.
WebP – converts to optimised WebP, a new image format which uses predictive coding to reduce the amount of code needed to make up an image. ( We have a bit more to say about this image format at the end of this article as it’s a bit of a special case!)
Each compression type and image format has its strengths and weaknesses, which will play out differently from image-to-image. The type of image you have will largely dictate the best format for that image online. Graphical and line art type drawings and illustrations are usually best compressed using the PNG or GIF formats and respond well to reducing the number of colours as unlike photos they often do not need thousands of colours to render the image in an acceptable way. High resolution photographic images are best compressed using the Moz JPEG compression format and compressed using the compression slider.
Other Squoosh settings worth playing with include:
Reduce palette – could your image make do with fewer colours? Often this is an easy win on a graphic or illustration which doesn’t require thousands of colours to display well. Reducing colour pallete on photographic images makes very little difference so try to save this for illustrations which obviously only use few colours.
Resize – make your image and file significantly smaller at a stroke by reducing its physical dimensions. The images dimensions will visibly shrink in size, but with that the digital storage space it takes up in K or MB also shrinks. Try to resize your images to the dimensions you will be using them online. There is no need to have a 3000 pixel wide image if the place for your image on the site only displays 1800 pixels width. Trim to fit. ( Please note: some websites are set up so you upload a high resolution image and it does all the resizing for you so if you aren’t sure how yours works talk to your web developer and find out before you start making changes!)
Quality – the simplest way to cut data. How low can you go? Keep a close eye on areas with fine detail, like eye areas, teeth and fingers as these will typically which will show the tell tale signs of over compression degradation first. We found most photographic images work great at 80% compression but some images can go a lot lower. Play around and find what works.