A small CLI tool to generate placeholder images

This is a tiny command line application that generates a base64 encoded preview of an image to be used with progressive image loading. I built this mainly for myself but decided to open source it in case other people might find it useful.

I use this to generate placeholders for static images that don't get handled by the backend (otherwise I would just generate the placeholder there).

Either download the latest release binary (currently only build for Mac because I'm bad at Github Actions), or install via brew

brew tap ksassnowski/generate-image-placeholder
brew install generate-image-placeholder

$ preview ./my-image.jpg

/9j/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/ [snip]

Or pipe it directly to your clipboard (OSX):

$ preview ./my-image.jpg | pbcopy

Now you can use it as a placeholder while your real image loads.

<img src="data:image/png;base64,/9j/2wCEAA/xAGiAAABBQEBAQE..." />

How to actually implement progressive image loading is out of scope for this readme. There are multiple ways to go about it, however. See the links below for inspiration.

• Taking A Look At The State Of Progressive Images And User Perception (2018)
• How Medium does progressive image loading (2015)