Zach’s ugly mug (his face)

Zach Leatherman

Bulk Generating OG Images

August 03, 2020

While working on the 1 Million Developers site for Netlify (which is open source, by the way), I was tasked with generating the images that would appear on tweets shared out from the site.

For a first draft, I was given a bunch of static images of varying sizes and I wanted to generate a bulk set of Open Graph images out of these. While I didn’t end up using this in the final product (we went with videos instead), I thought it was worthwhile to share in case someone else found this useful (and for future me, too).

This shell script uses imagemagick.

  1. Uses a directory of input images. It doesn’t matter what size they are, but the bigger the better.
  2. Resizes each image to the expected OpenGraph image canvas size (with padding).
  3. Adds a background color.
  4. Adds watermark image of your choosing to the bottom right corner.
  5. Writes them all to the output directory.


echo "Uses imagemagick."


mkdir tmp/
mkdir $outputDir

convert "$watermark" -resize x60 -gravity center -background "transparent" "tmp/watermark.png"

for i in $images
# resize image
convert "$i" -resize x530 -background $bgColor -gravity center -extent 1200x630 "tmp/${i##*/}"
# add watermark
composite -gravity SouthEast -geometry +20+20 "tmp/watermark.png" "tmp/${i##*/}" "${outputDir}${i##*/}"

rm -rf tmp/

Sample Input

Sample Output

Zach’s ugly mug (his face)

Zach is a builder for the web with Netlify. He created the Eleventy static site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with NebraskaJS. Read more about Zach »

Netlify’s Merry Band of 1 Million Developers
The Lighthouse Scores Will Continue Until Morale Improves


ShirishDan DenneyTorsten KnabePhil HawksworthAndy BellvictorkaneAWebFactorydemystifying.devJeremy Wagner
Bryce WrayDaniel EhnissMatt O'Leary@thomas@social.tzi.frShirishhenry▘John MeyerhoferTom Hermans🤘Wayne ElginPeter AntoniusJakeCorey MegownFrank AdebiayeBiteworks ArtTanner DolbyBrett JankordStephen Brown-BourneBryan RobinsonMatthias Ott✨JoëlMichael GehrmannDan Denneymason conkrightSebastien CoupeTorsten KnabeRicardo Blanch PMKÿle MacqüarrieEric Bailey0x1312babeAshur Cabrera 😷Andrew Ekdan leathermanLincoln MongilloMike Apariciof-elixBraden East 💡victorkaneit-spirit - Black Lives MatterSébastien Lavoiedemystifying.devJulien BidoretAWebFactoryNiyaz PoyilanDevin ClarkLisa DavisAndy BellMarco HengstenbergMarcus RelacionJacob D. Castro♟Pusha B 🐝Joel G Goodman
1 Bookmark
  1. Barry Frost

    Barry Frost #

1 Reply
  1. Andy Bell

    Andy Bell @hankchizljaw #


    3 Mentions
    1. 51posts #

      OPEn GRaph iMAgeS. THOSe lITTle iMAGeS THAt SHow uP WheN yOuR site Is shAReD on soCiAL MediA. ThE OnEs FoR My SiTE WerE… BaD. my deFauLT waS TO UsE ONe, huge, bORINg BRandED Image foR evErYThiNg—wHICh PROvIdeD nO EXtrA ValuE aND JuSt CluTTErED Up Y’aLLS feeDS (soRry!). I WAnTEd T… Truncated

    2. Dave Harrison

      Dave Harrison @daveharrisonnet #

      I can see this getting a turn!💕

    3. Joel G Goodman

      Joel G Goodman @joelgoodman #

      Very fun.

    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)