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).
Installation
Either download the latest release binary (currently only build for Mac because I'm bad at Github Actions), or install via brew
brew install generate-image-placeholder
Usage
$ 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/svg+xml;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.
Further Reading