Save space and bandwidth

I love embedding screenshots into repositories. It gives visual context for the codebase without needing to get it up and running, or context-switching away to begin the token acquisition process. Of course, just a hand full of screenshots can really add up. Modern MacBook Pro resolutions could yield screenshots at 3680 × 2382. That’s huge. Also likely unnecessary.

Instead, what if we trim these down maintaining resolution and optimize them a bunch? With a script? Like a robot?

Grab imagemagick:

brew install imagemagick

Grab optipng:

brew install optipng

Brew can take a while, might as well go for a walk now.

One walk later and we’re back.

Usually my screenshots hide out on the desktop. I prefer using Finder to pick screenshots and put them in a nice clean folder.

Here’s the command:

mogrify -path out -resize 75%x75% in/*.png

It will take an in folder full of png files and resize them to 75% of their original width and heights. You can tinker with the percentages depending on your needs. I thought 50% was a bit too blurry for my docs, but might be fine for your docs.

That alone trims out a lot of filesize, but there’s more to optimize with optipng.

Here’s the command:

find input_folder -name "*.png" -exec optipng -o7 {} \;

Using find to run this on multiple files (since optipng doesn’t have built-in multiple input handling), this will optimize your resized files.

** Processing: out2/image-006.png
2760x1787 pixels, 4x8 bits/pixel, RGB+alpha
Input IDAT size = 259520 bytes
Input file size = 259892 bytes

Trying:
  zc = 9  zm = 9  zs = 0  f = 2		IDAT size = 250095
  zc = 9  zm = 8  zs = 0  f = 2		IDAT size = 249198

Selecting parameters:
  zc = 9  zm = 8  zs = 0  f = 2		IDAT size = 249198

Output IDAT size = 249198 bytes (10322 bytes decrease)
Output file size = 249486 bytes (10406 bytes = 4.00% decrease)

optipng really brute forces various png settings in order to get the best filesize. It takes a while because of that. Sometimes savings aren’t huge but sometimes you’re getting back 25% of that size.

Follow me on Mastodon @ryanmr@mastodon.cloud.

Follow me on Twitter @ryanmr.