Oliver Nassar

Mass Image Generator

This is an experimental tool I built to help me generate many (eg. hundreds or thousands) of images at once. The foundation for the process is defining HTML markup (which will be converted into an image), some configuration settings (like the dimensions or content type), and some data (currently limited to CSV formatted data), which can also be used by the HTML markup as template variables.

Each row in the CSV data (excluding the column headers) will correspond to a single image.


Note: Changes to this form are saved in your local storage. Feel free to reload the page at any time: any changes made to the form will be saved.

Who is this tool for?

At the moment, this tool is designed for people who are familiar with HTML, JSON and data structures. The three inputs above get used to render a final HTML document and define export settings.


Why did I build this?

With Iconduck, I needed to generate open graph images for the 150+ icon and illustration sets that I've curated.

Furthermore, I wanted to have 5 different open graph images for the different user agents that might use them (Facebook, Twitter, iMessage, WhatsApp and standard Open Graph). Since they all have preferred dimensions, it made sense to try and automate the resizing.

Because of all this, I thought it would save me time in the medium / long term to have a tool at my disposal that could take in an HTML template, some settings, and a data stream (eg. CSV or JSON), generate the images (using Headless Chrome), compress them (using Sharp), and then zip them all together.


How was it built?

I use AWS to facilitate the backend of this tool. Three different services are used:

Underscore.js is used on the front-end to deal with templating. Two different API Gateway endpoints (and Lambda functions) are used to:

  1. Generate the images
  2. Batch those images into a zip file

Feedback

If you'd like to use the above to create more than 100 images, or have any feedback, you can reach me at: onassar@gmail.com