Excellent Utilities: Imagine – image optimization

This series highlights best-of-breed utilities. We cover a wide range of utilities including tools that boost your productivity, help you manage your workflow, and lots more besides.

There are two main types of compression: lossless and lossy. Lossy compression is a data encoding method which reduces a file by discarding certain information. When the file is uncompressed, not all of the original information will be recovered. Lossy compression is typically used to compress video, audio and images, as well as internet telephony. The fact that information is lost during compression will often be unnoticeable to most users. Lossy compression techniques are used in all DVDs, Blu-ray discs, and most multimedia available on the internet.

Images take up massive amounts of internet bandwidth because they often have large file sizes. They are the most popular resource type on the web. According to the HTTP Archive, 60% of the data transferred to fetch a web page is images composed of JPEGs, PNGs and GIFs. 45% of the images seen on sites crawled by HTTP Archive are JPEGs.

Imagine is software to compress PNG, JPEG and WebP images. This graphical utility sports a modern interface. It’s free and open source software written in TypeScript.

Installation

We tested Imagine mostly under Arch and Ubuntu. For Arch, there’s a package in the Arch User Repository.

The project provides a snap and an AppImage, the latter is a format for distributing portable software on Linux without needing superuser permissions to install the application. All that’s required is to download the AppImage, and make the file executable.

For Ubuntu, we used the project’s snap as the developer’s AppImage failed to start complaining that the GPU process wasn’t usable.

With a fresh installation of Ubuntu 22.10 we first need to install npm (a package manager for JavaScript).

$ sudo apt install npm

Next, clone the project’s repository, install and run.

$ git clone https://github.com/meowtec/Imagine.git
$ cd Imagine
$ npm install
$ npm run dev

Imagine is a cross-platform tool with binaries provided for Windows and macOS.

In Operation

Here’s an image of Imagine in action.

The image above shows 4 JPEGs that we dragged into Imagine’s window. For each image, there’s an adjustable Quality slider and the option to output the file to JPG/PNG/WebP format. As you can see with a Quality setting of 80% files are reduced in size by around 80%.

As you adjust the slider, the window updates with the size of the image. There’s the option to overwrite the existing file, or save the file with a new name. We can also export images to a different directory.

Summary

Imagine offers a very easy way to compress images. The software offers batch optimization and it’s cross-platform too.

While we give Imagine our recommendation it’s definitely work-in-progress. Some genuinely useful functionality is missing. For example, we’d like to see the ability to set target file size for a batch of files. And the software is massively bloated taking a whopping 746MB of RAM (according to ps_mem) courtesy of using Electron, one of the most bloated frameworks on the planet.

If you are publishing images on the web, we strongly recommend that you use Imagine (or a similar tool) to compress images. Smaller images mean that they consume less bandwidth and are faster to load for visitors. While many sites use CDNs to ensure images are downloaded from a nearby site, bloated images still take longer to download, and are particularly unwelcome for anyone who pays for internet access per MB (not only mobile phone users).

Website: github.com/meowtec/Imagine
Support:
Developer: Berton Zhu
License: MIT License

Imagine is a GUI frontend to a few popular command-line utilities. It relies on pngquant, a command-line utility and a library for lossy compression of PNG images. The frontend also uses MozJPEG which improves JPEG compression efficiency achieving higher visual quality and smaller file sizes at the same time. The tool also supports WebP, a modern image format that provides lossless and lossy compression for images on the web.

Imagine is written in TypeScript. Learn TypeScript with our recommended free books and free tutorials.

Complete list of articles in this series: