Categories
Alfred Workflows

Batch Screenshots & Image Optimization

I took the opportunity to sketch out a preliminary workflow that assembles the screenshots into a dedicated directory, then sequentially renames them (with a custom title option) based on their modification time. I got carried away and took it a step further and added image compression just for good measure. In the end, the Batch Screenshots workflow was crafted.

- Updated: June 29th, 2020 -

While I was creating this blog, I realized I needed an automated method to deal with the plethora of screenshots I would be gathering for step-by-step tutorials. I wanted a quick way to organize the screenshots (anything that takes more than 10 screenshots begins to fill up the desktop pretty quickly) and also a way to compress the png files so that they’d be ready for a web page/PDF (I use the native Mac OSX screenshot tool ⌘+⇧+4 (or any variant i.e. ⌘+⇧+3) as it creates a high quality png image on the desktop).

Photo by Giulia May on Unsplash

It’s an Alfred workflow that’s written in pure Bash and utilizes native Unix commands. As an extra, in preparation for image optimization, it also includes the imagemagick libraries which will become useful for further batching workflows.

DOWNLOAD Batch Screenshots (available soon)

Photo by Giulia May on Unsplash

Let’s break down the processes:

Stage 1: Assembly

  1. Take screenshots.
  2. Select screenshots (defaults to your Desktop but can be located anywhere you have them).
  3. Run Batch Screenshots from the Alfred File Action menu and optionally add a title to assemble the images under.

Stage 2 (Optional): Rename

  1. Run Batch Sequence Titles on the directory that houses the screen shots to re-title sequentially based on modification times.

Stage 3 (Optional): Optimize

  1. Run Batch Images to compress pngs to an acceptable quality
  2. Run Batch Create jpgs to take all compressed pngs and convert them to jpg formats.
  3. Run Batch Images again on the jpgs for further compression.

Compression Techniques

You might be wondering why we didn’t just convert the pngs to jpgs in Stage 3 to start with but I’ve found that compressing the png as much as you can while still retaining the visual quality and then converting to jpg and further compressing yields much better results both in quality and file size.

When you’re finished you can view the files and see how much compression took place but because we’ve started with the png format, I found the subtleties in the gradients were still intact with the compressed jpg. The file size of the original png is 2.6MB and the finished jpg file with compression weighs in at a light 164kb. Visually they’re the same.

164kb is still a heavy(ish) image for a web site to download but keep in mind we didn’t resize the image. The image width is still the same as the original screenshot at 1366px. If you’re using WordPress it will create its own thumbnails of the master images (based on theme settings) to serve responsively depending on the viewports specified.

Let me know if you’re interested in learning more about image optimization techniques in the comments. Compression is a very specific kind of art and it’s a lot of fun to design and create workflows to help people out with everyday kinds of things.

Leave a Reply

Your email address will not be published. Required fields are marked *