Written by Himanshu Dwivedi

Modern websites demand speed. As web developers we have to work not only on javascript but provide the best user experience as well.

In order to achieve that we have to deal with one of our most common nemesis -  IMAGES. Nearly 70% of all the internet comprises images. They take most of our network bandwidth and take the most time to load by the browser. To save that precious bandwidth, we need to provide the smallest size images which look the best. For that we need to compress those images.

If you are using a cdn, they will do that job for us. But if you are someone like me who is using local image assets, you are either using some image compression website like tinypng, compressjpg, etc.

Now these existing solutions are good, but when we have to do 10–20 image compressions on a daily basis, the process of compressing, downloading, moving and renaming files becomes a headache. The same goes for converting images to webp.

To make the process seamless we have created image optimization services which can perform these processes in just a click.

You will find this service helpful if any of the following use cases are applicable to you

• if you want to host assets locally instead of cdn.
• if you want to compress assets before uploading to the cdn.
• if you want to convert images to other formats like webp
• if you are using any existing/paid service like tinypng, compressjpg to do the job for you
• if you are not a developer and want a GUI for image compression/conversion

Prerequisites

This service requires the use of the Automator app which is in-built in MacOS since MacOS X v10.4. In addition to that FFmpeg program needs to be downloaded preferably via Homebrew. So please make sure that FFmpeg and Automator apps are installed and working properly.

Ease of Use

We decided to use Automator to create a quick action workflow. Automator is an app inbuilt in MacOS since MacOS Mojave. It provides actions which can interact with a variety of apps and parts of macOS. Using these actions we can create workflows which helps us to automate tasks on our mac.

We created a quick action workflow which allows us to add our own actions in the right click menu of finder, desktop and also in touch bar. We created actions “compress” and “convert” when we select any files or folders. The service will filter out the images from the selection and perform the respective actions on them.

After finishing the action, it will create new optimized image(s) for every image in the same path as their original version. This way devs won’t need to worry about moving and renaming their optimized files.

The Best Compression

We decided to use ffmpeg as our compression and conversion program. FFmpeg is a free and open-source software project consisting of a suite of libraries and programs for handling video, audio, and other multimedia files and streams. It supports jpg, png, webp, bmp, tiff and gif image types.

As an offline service it is much faster than tinypng. It compressed a sample folder of 15 HQ jpg images in mere 2.5s which took tinypng API 31s. And it did that without any drop in quality. Simply amazing!!!

Best Features

• Completely free
• Compress or convert images in one click
• Optimize bulk of images in files and folders simultaneously
• Offline optimization. Extremely faster than online tools.
• No limit on file size and numbers.
• Never modify original files.

Demo

Setup

If you want these services on your computer, please follow the following steps.

Download ffmpeg via Homebrew.

brew install ffmpeg

If you don’t have homebrew on your mac (you should), go to brew and follow the installation process.

Download “workflows.zip” from here and extract the .workflow files into your ~/Library/Services folder.

And that's it. Now you can compress images seamlessly.

Conclusion

Our Automator services seamlessly integrated with ffmpeg provides the best way to optimize local images with minimal dev effort. It uses ffmpeg to optimize images with its tons of libraries and resources to provide the best optimization. Our service provides better and faster image optimization compared to the services we use today.

We are developing a video optimization service as well. Also we are planning to create a cli service as well for devs who are more comfortable with command line and need more customization. So, stay tuned for the next blog!

Cover illustration by Ritesh Waingankar