ImageMagick placeholder images
Published Apr 6, 2021
Recently, I’ve been building a website where I know the sizes of images but I don’t have the images themselves. This makes it difficult to create layouts because I’m still learning how new techniques (like CSS grids) affect content sizing. So I need placeholder images.
At first, I used a real raster image editor:
- Open up GIMP.
- Set the correct size canvas.
- Paint-bucket fill a vibrant color.
- Add vertically- and horizontally-centered text describing what this image should be replaced with.
- Export to PNG (somehow I can remember that it’s
Ctrl+Shift+Ebut not where it is in the menus 😅).
Then I got really tired of all of that. While waiting for the site to build again, I asked if ImageMagick could do all of that for me. (Actually, it was more of a “how” than an “if” because it can do pretty any image manipulation I’ve ever asked of it.) And thanks to this forum post, we know that it can!
Here’s an annotated version of the snippet that’s now in my ZSH “aliases”:
And a usage example with the generated images:
$ img-placeholder 233x144 233x144.png $ img-placeholder 144x233 portrait.png portrait.png $ ls 233x144.png portrait.png