Updated 2020-02-03: Added macOS Automator instructions.
I take screenshots every day to share with others in issues, blog posts, email, and Slack. I like them to be crisp, high resolution, and importantly the image file size should be as small as possible. Keeping the file size small means they are both fast to upload and to download. This is particularly important when I am writing a blog post or documentation.
Below is a quick primer on PNG compression, and instructions for completely automating the process.
When you capture a screenshot on your Mac, the image will be saved in the PNG-32 format, with support for 16 million distinct colors and transparency. This means that the screenshot will perfectly capture every pixel on your screen, but having four 8-bit channels for red, green, blue and alpha (transparency) for every pixel makes the file very large. If you're interested, you can verify this yourself using pngcheck.
In practice, the subjects of my screenshots are buttons and forms, not photographs. While you might want 16 million colors for photos, we don't need them for screenshots, so we can take advantage of the PNG-8 format with its more compact 256 color palette.
Lossy Compression: Color Quantization
The first step is to reduce the color palette of the screenshot. This is a type of lossy compression called color quantization, which will reduce the number of distinct colors in the image. The pngquant command line utility is the perfect tool for this job, and if you've used the popular ImageAlpha tool, you've already used the pngquant library.
# Install pngquant using Homebrew
brew install pngquant
# Quantize 32-bit RGBA PNG to 8-bit (or smaller) RGBA-palette
# pngquant [number of colors] [options] input.png
# --skip-if-larger only save converted file if they're smaller than original
# --strip remove optional metadata
# --ext=.png set output filename to be same as input filename
# --force overwrite existing output files
pngquant 256 --skip-if-larger --strip --ext=.png --force example.png
The screenshots below illustrate different levels of palette size reduction.
| PNG-32 (134KB) | 256 colors (42KB) | 128 colors (39KB) | 64 colors (38KB) |
|---|---|---|---|
 |
 |
 |
 |
| 32 colors (37KB) | 16 colors (29KB) | 8 colors (22KB) | 4 colors (16KB) |
| --- | --- | --- | --- |
 |
 |
 |
 |
I've observed for most screenshots you can comfortably reduce the color palette to as few as 64 colors before the difference in image quality becomes noticeable. If you frequently take screenshots of gradients or more complex images, you may want to stick with 256 colors to avoid noticeable artifacts.
Lossless Compression: DEFLATE
The PNG image file format uses DEFLATE compression internally for an added layer of lossless compression, but most PNG libraries do not implement aggressive lossless compression. This provides another opportunity to reduce the file size further.
In 2013, Google released zopfli, which
claimed to improve compression by 3-8% compared to zlib. The trade off for
this improvement: waiting an extra 1-2 seconds. (There is no decompression
penalty when viewing the compressed image).
# Install zopfli using Homebrew, which includes zopflipng
brew install zopfli
# Optimize PNG compression
# zopflipng [options] input.png output.png
# -y do not ask about overwriting files
zopflipng -y example.png example.png
Relative to the massive savings from color quantization, improving lossless compression provides a much smaller reduction, but in the context of pages with many images these marginal gains do add up to worthwhile savings.
Automation
The trick is to make this happen automatically every time I capture a screenshot using Hazel or Automator. This allows you to run commands based on file events, like every time a new screenshot is added to a directory.
A bonus trick, is to create a dedicated Screenshots directory, so that they don't clutter your desktop. This is also easy:
# Create a Screenshots directory in the current users Home directory
mkdir -p "$HOME/Screenshots"
# Configure macOS to capture screenshots to this location
# If you want to revert this change, and save screenshots to your desktop,
# instead use "$HOME/Desktop"
defaults write com.apple.screencapture location "$HOME/Screenshots"
Using Hazel, add the Screenshots folder where newly captured screenshots will be
created, and create a new rule to compress files when they are added. Combining
the commands above, and using $1 syntax to access the filename argument passed
by Hazel, the final script is:
pngquant 64 --skip-if-larger --strip --ext=.png --force "$1"
zopflipng -y "$1" "$1"
Alternatively, using Automator, create a new Folder Action that receives
notifications from the Screenshots folder. Add a Run Shell Script block, and
make sure to Pass input as arguments. Combining the commands above, and this
time using $@ syntax to handle multiple arguments, and absolute paths for
pngquant and zopflipng, the final script is:
for f in "$@"
do
/usr/local/bin/pngquant 64 --skip-if-larger --strip --ext=.png --force "$f"
/usr/local/bin/zopflipng -y "$f" "$f"
done
Here's a screenshot of my configuration.
| Hazel | Automator |
|---|---|
 |
 |
My final trick, is to add the Screenshots folder to my Dock for easy access. This is achieved by dragging the Screenshots folder from Finder to your Dock.
Summary
The PNG file format is great for screenshots, but the defaults output is too large for sharing on the internet. Instead of using ImageAlpha and ImageOptim to compress your screenshots by hand, you can use Hazel to automate this to regularly yield file size reductions of 80%.
If you know of compression tricks, or alternatives that work on Windows or Linux, let me know below in the comments!
Cover image by Emmy Smith on Unsplash