Home > Experiments > Mass Image Generator

Update: 10 September 2022

The random image endpoint used below (picsum.photos) isn't working the same way as it used to. As a result image processing using the default code below is slower and may result in corrupt images 😢

Mass Image Generator

November 2021

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.

HTML Template

<html>
    <head>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">
        <style>
            * {
            }
            html,
            body {
                height: 100%;
            }
            body {
                text-align: center;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }
            body {
                font-family: 'Open Sans';
                background-color: #000000;
            }
            div.background {
                background-image: url('https://picsum.photos/2048/1440');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                opacity: 0.20;
            }
            div.focal {
                max-width: 70%;
                text-align: center;
                color: rgba(255, 255, 255, 0.5);
                color: #ffffff;
                z-index: 1;
                font-style: italic;
            }
            div.focal div.logo {
                background-image: url('https://i.imgur.com/HQpKxTv.png');
                background-repeat: no-repeat;
                background-size: contain;
                width: 24vh;
                height: 24vh;
                margin: 0 auto;
            }
            div.focal div.title.primary {
                font-size: 10vmin;
            }
            div.focal div.title.secondary {
                font-size: 4vmin;
                opacity: 0.70;
            }
            div.footer {
                position: absolute;
                right: 16px;
                bottom: 16px;
                color: #ffffff;
                font-style: italic;
            }
            div.footer div.copy {
                font-size: 2.5vmin;
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <div class="background"></div>
        <div class="focal">
            <div class="logo"></div>
            <div class="title primary"><%= (record.title) %></div>
            <div class="title secondary"><%= (record.sub) %></div>
        </div>
        <div class="footer">
            <div class="copy"><%= (record.footer) %></div>
        </div>
    </body>
</html>

Config (JSON settings)

Data (CSV)

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:

API Gateway
Lambda
S3

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

Generate the images
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