Reduce image assets size on MacOS

Every now and then I need to work on a front end project that has large amount of image assets. In this article I’ll give you my go to list with MacOS apps I use to reduce the file size and speed up loading times.

ImageOptim

Download link: https://imageoptim.com/mac

With brew:

brew install --cask imageoptim

ImageOptim is perfect for quickly preparing images for a website.

ImageOptim removes EXIF meta­data, which makes it a perfect tool for stripping GPS coordinates and other personal information from photos you’ve taken before uploading them for public access.

In my experience ImageOptim excels with jpeg images. It can also help you with reducing the size of occasional SVG images.

ImageOptim is lossless by default, but there’s an option to make it lossy. Keep in mind that this might modify the way images look, but at the same time can drastically reduce the overall file size.

OptImage

Download link: https://optimage.app

With brew:

brew install --cask optimage

OptImage is great if you are working with assets in various formats. The free version comes with a daily limit of 24 images per day, which is enough for occasional optimization.

The cost to remove the limit is $15 once. If this is more than what you are ready to pay consider using it for large and critical assets and process everything else with ImageOptim.

TinyImage

Download link: https://github.com/kyleduo/TinyPNG4Mac

With brew:

brew install --cask tinypng4mac

“Tiny Image” (formerly TinyPNG4Mac) is a 3rd-party client for TinyPNG. Transformation are lossy, but in my experience the resulting images are indistinguishable from the original.

For PNG images there’s additional file size reduction achieved by “quantization”. PNG files will be converted to 24-bit or even 8-bit indexed color images.

Like the other apps mentioned, unnecessary metadata is stripped.

Keep in mind that the image you compress are sent to TinyPNG servers. Do not use the service for images you don’t intend to be public (e.g., confidential documents, personal photos).

TexturePacker

Download link: https://www.codeandweb.com/texturepacker

With brew:

brew install --cask texturepacker

Paid: there’s a lifetime and 1 year license available

This is a tool I use quite often. It won’t necessarily make you images smaller, but it allows you to easily create sprite sheets that include multiple image and generate CSS from them. Having 1 image instead of multiple small images help with loading time.

The generated single sprite sheet image can then be passed through optimization using one of the apps above.

Which one to choose?

The simple answer is all of them. Match and mix based on what provides you the best results, whether compression has to be lossless or not and the image format.

I’ve seen improved results when running 2 or 3 of them on the same image.