
**Image generation** is the process of creating visuals using automated tools, often based on a predefined template. Instead of designing graphics manually every time, image generation lets you reuse layouts and update only the dynamic parts like text, colors, or images.

Design software like Photoshop or Canva is great for one-off projects. But when it comes to creating hundreds of consistent, branded images, **automation** becomes essential. Tools like **RenderForm** make it easy to design once and generate unlimited variations using data from APIs or no-code platforms like Zapier, Make, or Google Sheets.

> RenderForm is built for speed, control, and consistency. Unlike AI art tools that rely on prompt engineering and randomness, it generates exact results based on your template. It's ideal for marketing, personalization, or bulk content creation.

## 1. Build a template with the editor

Start with the [RenderForm Template Editor](/docs/general/template-editor/). It works like a simple design tool: drag in text, image placeholders, or shapes, and arrange them however you like.

![Online Editor for Image Generation](/blog/simple-online-design-editor.jpeg)

### Set image fit

For image placeholders, choose how the image should behave inside the container. Click on any image and use the panel on the right to adjust the "Image Fit" option:

- `Cover` fills the entire space, cropping the edges if needed.
- `Contain` keeps the full image visible, even if it doesn't fill the entire space. Best for logos or product photos.

![Image fit options](/blog/image-fit-options.jpeg)

### Resize text areas

Text auto-scales to fit its container, but large or dynamic content might need extra space. Set the **width** and **height** manually to avoid clipping and keep everything legible.

Additionally, you can adjust the **dynamic font size limits** to ensure text remains readable across different lengths. This is especially useful for names, titles, or descriptions that vary in size.

![Text font size settings](/blog/text-font-size-settings.jpeg)

### Align text precisely

In the side panel, scroll to the Alignment section to define how text should wrap or stretch. This is useful for things like dynamic names, titles, or product descriptions that vary in length.

![Text alignment](/blog/text-component-alignment.jpeg)

## 2. Connect data to generate images

Once the layout is ready, it's time to connect it with data. You can use [RenderForm's REST API](/image-generation-api/) directly, or connect to platforms like:

- [Zapier](https://zapier.com/mcp/renderform) - Trigger image generation from forms, CRMs, or other tools
- [Make (Integromat)](https://www.make.com/en/integrations/bannerly) - Link multiple services and schedule image creation
- [Google Sheets](/blog/posts/how-to-create-many-images-from-spreadsheet) - Use spreadsheet rows as input for bulk image creation
- [Airtable](https://airtable.com/marketplace/blkKg8IYzQuTV6ZH3/render-form) - Generate images from Airtable records
- [Custom scripts](/docs/api/get-started) - Send image generation requests using your own backend

![Layout plus Data equals your image](/blog/image-generation-api.jpg)

The key is simple: update specific components in your template using a property format like this:

```
yourComponentId.property=value
```

Example:

```
headline.text=Summer Sale Ends Tonight!
```

This tells RenderForm exactly what to change inside the template. You can change text, image sources, colors, and more. See the full list of properties in the [template properties guide](/docs/general/template-properties/).

![Example of generated image from Image Generation API](/blog/example-of-generated-image-from-image-generation-api.jpg)

RenderForm processes the data and generates your final image instantly, ready to be used anywhere.

## Common use cases

Image generation isn't just about saving time, it unlocks new ways to deliver content with precision and consistency. Here are a few practical examples:

- **E-commerce**: Generate product images with live pricing, stock levels, or promo tags
- **Marketing**: Create personalized banners for ads, email, or landing pages
- **Social Media**: Automate quote cards, announcements, or seasonal visuals
- **Hiring**: Share branded job posts or team intro graphics for new hires
- **Events**: Generate speaker cards, schedules, or reminder graphics from spreadsheets or databases

Every visual stays on-brand, with no manual editing required.

## Why use RenderForm?

RenderForm helps teams produce image content faster without sacrificing quality or control. Design a layout once, then use automation to create thousands of variations with zero manual work.

Key benefits:

- ✅ Predictable, design-safe results
- ⚙️ API and no-code integration options
- 🎨 Full control over layout and visual style
- 📊 Perfect for personalized or data-driven visuals
- ⏱ Real-time generation—no delays

With RenderForm, visual automation becomes part of your workflow. No need to guess what the final image will look like; just send your data, and get exactly what you designed.



What is Image Generation?


Benefits of personalizing email content are that they are more likely to be opened by recipients, recipients are
more likely to read them in full, and they are often shared with other people - because they show up as more personal emails.
Personalized e-mails are not new, but it is time to take those personalized e-mails to the next level.
One of the newest technologies that can be used for this purpose is image generation. In this article
I will show you how to send an e-mail with personalized image to your customer once he makes some action
in your application or website. I will use [Make.com (Integromat)](https://make.com) to take advantage from no-code automations.


## Create Integromat webhook

I started from creating a scenario in Integromat and adding a webhook module. The module generates an unique
webhook URL where I can send my requests from server or from frontend application. The CORS won't be a problem here because
Integromat accepts requests from frontend applications.

![Integromat webhook configuration](/blog/integromat-webhook-configuration.png)


## Send request on click

Let's go to the code part! I started from creating a simple `<a href=""/>` tag in my React application.
It looks pretty standard I added `href` attribute with link to some article and custom `onClick` method.

[comment]: <> (![Send request from ReactJS application to Integromat with axios]&#40;/blog/send-personalized-email-image-on-click.png&#41;)

```tsx
<a href="https://renderform.io/blog/posts/multi-language-image-variants"
   target="_blank"
   onClick={onLearnMoreClick}
   className="btn btn-link d-flex align-items-baseline">
    <span>Learn how to quickly generate multi-language images</span>
    <i className="far fa-arrow-right ms-2"/>
</a>
```

The `onLearnMoreClick` method will be invoked once somebody clicks the link. The `onLearnMoreClick` will send a
POST request to endpoint generated by Make.com (Integromat). I used [axios](https://github.com/axios/axios) but you can use
any other library to do this. If you don't want to use any library check [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).

```tsx
const onLearnMoreClick = () => {
axios("https://hook.integromat.com/your-webook-url",
  {
    method: "POST",
    data: {
      firstName: account.firstName,
      email: account.email
    }
  });
}
```




We are passing two values which we will need in next steps:
- `firstName` - user first name,
- `email` - user e-mail to send him personalized e-mail.

## Edit image template

I used existing template from RenderForm template library. However, if you want, you can create
your own template using template editor in RenderForm.
We will edit the top component with 'Hey Jakub!'
text, and we use Integromat to replace the text for every webhook request.

![Example template for coupon code and image generation](/blog/personalized-image-template.png)

## Configure Integromat scenario

Below you see a whole Integromat scenario where I connected everything together. The scenario is self-explanatory, we have 4 modules:
- Webhooks module - receive requests from application
- RenderForm - generate image based on data from request
- HTTP - download the image from RenderForm
- Email - send e-mail to a customer

![Integromat scenario with image generation and SMTP](/blog/integromat-personalized-image-flow.png)

![Add text to image using RenderForm module](/blog/add-changes-bannerly.png)

HTTP module is only for downloading image from received URL from RenderForm module.
![Download generated image with text using HTTP Integromat module](/blog/http-module-download-image.png)

Thanks to the HTTP module we can add the image itself instead just the URL.
![Send attachment using Integromat email module](/blog/e-mail-module-add-attachment.png)



## Test

Click **'Run once'** button in created Integromat scenario and then click link to open the article from which we created
in the first section. Now the request from our frontend application should be sent Integromat Webhook module, after that
data will be passed to RenderForm module where a new image will be generated. RenderForm will take your template
and replace title on the image and return a link with ready to download image. Next, HTTP module will download
the image generated by RenderForm module and add it as an attachment in the last step. In E-mail module we composed a simple
e-mail message which we sent to the user who clicked the link!


![example email with personalized image](/blog/example-email-with-personalized-image.jpeg)

Presented Integromat scenario is just a simple example what you can do with batch image generation. Possibilities are
unlimited! Your flows can be much more complex, you could generate an image for every occasion with RenderForm, for example
you could add user avatar to make it more engaging. Image that your customer gets a personalized image with his name and
profile image! Have fun with RenderForm!


Posts tagged #generation

What is Image Generation?

Send Personalized E-mail from React Application