According to web.dev, images often take an important part of the bytes downloaded for a web page / application. Using non optimized images can significantly affect the loading times, and as a consequence, the user performance. Sometimes it’s just matter of seconds for the end user to decide to try something else.

Therefore, optimizing images before exposing them online, became of crucial importance. One of the most common optimizations are sizing and compression. In this post, I would like to go over Squoosh.app: An online tool created by the Google Chrome team to help get the best out of image optimization for your images.

A quick walk through

Through its UI, Squoosh offers the possiblilty to find out the best formula that will make the image size shrink without affecting the visual quality. For this purpose, Squoosh allows you to compare your original image with the transformed one. The vertical adjustable line allows the comparison of every part of the original (left side) with the optimized one (right side). Squoosh also shows you in real time the savings that you made after the transformation (You need to make sure that spinner has finished turning).

Squoosh compare

From a toolbox perspective, Squoosh offers the possiblity to compress, resize, and reduce the image colors palette.

  1. Resizing: the resizing toolbox menu allows resizing the image, Options include choosing the resizing algorithm and aspect ratio
  2. Reducing the image colors palette: this toolbox menu uses image color pallette reduction technique in an attempt to save some bytes
  3. Compression: the compression menu offers a wide range of compression and format conversion tools that can help you achieve optimal compression.

Libraries and tools used

Squoosh leverages the power of Webassembly to port many of the already established image manipulation tools to the browser. Most of the libraries are C/C++ or rust (yes rust also has webassembly support) based. Librairies include:

  • MozJpeg. Written in C. A tool by Mozilla that attempts to improve jpeg compression
  • OxiPng. Written in Rust. PNG optimizer inspired from optipng
  • libwebp. Written in C. Webp encoding/decoding library
  • libimagequant. Written in C. famous Linux palette reducing tool

and many others, checkout the codecs folder for the full list.

Testing on the current imager200 logo(in png format): using OxiPng yielded about 50% cut down on size without affecting the visual quality.

imager200 logo.

Squoosh comes with a CLI tool as well.

Are there any features of Squoosh that you would like imager200 to integrate ? Let us know in the comments section below.