
## Introduction
Without any doubt images are a crucial part of any visual content and template that can be created in RenderForm.
They can be used to enhance the visual appeal of the content, provide context, and make the content more engaging. However, there are some common issues that can arise when working with image automation and rendering.
In this article, we will discuss some of the most common issues with rendering images in RenderForm and how to solve them.

## Image tester tool

Before we start discussing the common issues with rendering images in RenderForm, we would like to introduce you to the [**Image tester tool**](/tools/image-cors-tester-tool/) that can help you to test the image URL before using it in the template.

![Image tester tool](/blog/image-cors-tester-image.jpg)

Put the image URL in the input field and click on the **"Test Image"** button to see if the image is publicly accessible and can be displayed in RenderForm.

## Image not showing up

One of the most common issues with rendering your templates in RenderForm is that the image does not show up at all.
This can happen for a variety of reasons, the most obvious being that the image URL is incorrect. The easiest solution is to open the image that has been sent to the RenderForm,
to see if the image is displayed correctly. You can review the image URL on "**[My Render Results](/console/my-requests/)**" page and click on "**Details**" to see
what image URL was used during the rendering process.

![Review the image URL](/blog/rendering-images/review-render-result-details.jpeg)

If the image URL is correct, there may be other reasons why the image is not showing up. Below are some common issues that can cause the image to not show up in RenderForm and how to solve them.

### Incorrect image format

**Canvas Editor**: RenderForm supports two the most common image formats such as JPEG, PNG, and PNG with transparency. If the image is in a different format, display the image in the output content is not guaranteed.

**HTML Editor and Canvas Editor (Beta)**: In those editors, you can use any image format that is supported by the browser, such as JPEG, PNG, GIF, SVG, or WebP. However, the image format may not be supported by the browser or the image hosting provider, which can cause the image to not show up in the content.

### Image is not publicly accessible

RenderForm requires that the image is publicly accessible in order to display it, that means that the image must be hosted on a server that allows public access to the image **without any authentication or having to log in**.
For example if you are trying to render an image from a private Google Drive folder, it will not be displayed in RenderForm.

To check if the image is publicly accessible, try to open the image in a private tab in your browser, if the image opens in a new tab, and you can see it, then the image is publicly accessible.

### Image is not allowed to be hot-linked

Some image hosting providers may allow public access to the images, but they may not allow hot-linking, which means that the image cannot be displayed on a different website than the one it is hosted on.
For example, you cannot use images uploaded to Airtable and display them on your website as they do not allow hot-linking and the images won't show up **even if they are publicly accessible**.

Unfortunately, there is no easy way to check if the image is allowed to be hot-linked, the best way is to check the image hosting provider's terms of service or contact the provider to ask if hot-linking is allowed.

### Access to the image is blocked or expired

Some image hosting providers may permanently or temporarily block access to the images after some time or require authentication to access the image, which can cause the image to not show up in RenderForm.
Even if the image is publicly accessible at time of checking it, the provider may block access to the image after some time or require authentication to access the image to prevent leaking public data.
Sometimes provider may block access due to high traffic, detected automated activity (RenderForm is an automated activity), restrict access to the image for specific clients (for RenderForm but not for you) or other reasons.

Unfortunately, there is no easy way to check if the image access is blocked or expired as different providers have different policies and ways of handling this.
The best way is to check the image hosting provider's terms of service or contact the provider to ask if they block access for automated activities or after some time.

### Image hosting issue

Sometimes the image may not show up due to an issue with the image hosting provider, such as the server being down, the image being deleted, or the image being moved to a different location.
RenderForm does not re-try to fetch the image if it fails to load, so if the image is not available at the time of rendering, it will not be displayed in the content, and it will
require re-rendering the content to try to fetch the image again.

### Image took too long to load

If the image took too long to load, it may be due to the image being too large or the image hosting provider being slow to serve the image.
RenderForm wait for a few seconds for the image to load, if the image is not loaded in time, it will not be displayed in the content.

Make sure that the image is not too large and that the image hosting provider is fast enough to load the image in a reasonable amount of time. If the image is too large, try to resize the image or compress it to reduce the file size.

### Image weight is too big

Another common issue with rendering images in RenderForm is that the image is too big, which can cause the image to not show up or take a long time to download and fail to load eventually.
Large images can slow down the loading time or exceed the maximum total size allowed for the template in RenderForm that is set due to security and performance reasons.

There is no strict limit on the image weight, but it is **recommended to keep the image weight below 1MB** to ensure that the image loads quickly and does not slow down the loading time of the content.

### Image dimensions are too large

However, the image weight is not the only factor that affects the loading time, the image dimensions also play an important role. **Too large images that exceed 5000 pixels in width or height may not be displayed correctly due to performance reasons.**
Good practice is to not use images larger than the template size, for example if the template is 800px wide, the image should not be larger than 800px wide. There is no benefit in using larger images than the template size as they will be scaled down to fit the component size,
that may affect the image quality.

![Check image component dimensions](/blog/rendering-images/image-dimensions.jpeg)

Both the image weight and dimensions can be reduced by resizing the image or compressing it to reduce the file size. There are many online tools that can help you resize or compress the image, such as **TinyPNG**, **ImageOptim**, or **Squoosh**.


### Auto-scaling images

If you know that your images will be too large, you can enable **"Auto-scale external images"** in the template settings. This option will automatically scale down the image to fit the template size.
The option is available in the inspector section on the right side of the template editor.

![Auto-scale external images feature](/blog/rendering-images/auto-scale-external-images.jpeg)

Images are scaled down only if they are too large. **Every scaling operation decreases credit by an additional 1 credit.**

## How to choose the right image hosting provider

When choosing an image hosting provider, make sure that the provider allows public access to the images and that it allows hot-linking,
the best solution is to use a dedicated image hosting provider like [Imgur](https://imgur.com), [ImgBB](https://imgbb.com), or any other that allows public access to the images and hot-linking or use a CDN like [Cloudinary](https://cloudinary.com) or [AWS S3](https://aws.amazon.com/s3/).

**Solutions like Dropbox or Airtable are not recommended for hosting images for rendering content as they may block access to the images or require authentication after some time.**

## Image quality issues

Showing images in RenderForm is not only about displaying the image, but also about the quality of the image.
We want to make sure that the image is displayed in the best quality possible, we do not make any processing (compression, resizing) without your explicit consent, to the image to keep the quality as high as possible.
However, there are some common issues that can affect the image quality in RenderForm, below are some common issues and how to solve them.

### Image effect is not applied or is not working as expected

When you apply a color effect to an image in RenderForm with "Effect" option, the effect may not be applied or may not work as expected due to the image format or image size.

![Image effects](/blog/rendering-images/image-effects.jpeg)

Usually, the most common issue is that the image is too large, and the effect cannot be applied to the image due to performance reasons.
The image weight should be below 1MB to ensure that the effect is applied to the image and that the image loads quickly.

### Image is pixelated or blurred

To make sure that your image your won't be pixelated or blurred, make sure that the image is not too small, or too big and the quality is not too low.
The rule of thumb is to use images with a resolution that matches the image component size in the template, for example if the image component is 800px wide, the image should be **at least 800px wide** to ensure that the image is not pixelated or blurred.

![Enhance effect to use a better image scaller](/blog/rendering-images/enhance-effect.jpeg)

For images that dimensions are much higher than a template dimensions, you may see an unwanted a blur effect.
You can try to apply the "**Enhance**" effect to the image; it should make the image crisp again.

## Conclusion

In this article, we discussed some of the most common issues with rendering images in RenderForm and how to solve them.
The best way to avoid these issues is to make sure that we use reliable image hosting providers that allow public access to the images and hot-linking to avoid problems with image access.
Finally, we described how to ensure the image quality by making sure that the images used for rendering matches the desired dimensions, weight, and quality to avoid pixelation or blurring.


Fixing common issues with rendering images


In this blog post I will present you how to quickly generate many images for an online session, video course or a conference.
I will use [RenderForm](/) to create a template, load data from a spreadsheet and generate images.

## Create a template

I used a predefined template from 'Templates' tab and adjusted it to my needs. RenderForm offers a great number of templates in many categories.
You can also create your own templates from scratch with an easy-to-use template editor.

In this blog post I will modify texts in two places and change the image (you can see component names on the left side panel).
 - `author_photo` - author image on the right side,
 - `author_name` - author name under the image,
 - `title` - session title.

![template in canvas editor for marketing automation](/blog/template-in-canvas-editor.png)


## Create a spreadsheet

I created a spreadsheet in Numbers, which is a default spreadsheet app for macOS, but you can use Excel or any other spreadsheet program.

In the first row, I put component names with properties I wanted to change, and separated them with a dot.

Property is a variable of component that you want to modify, for example, text, source url, background color or opacity.
Check our docs for more details about [components and their properties](/docs/general/template-properties/). Here is my sample spreadsheet:

- `author_photo.src` - change an image source of `author_photo` component,
- `author_name.text` - change `text` of `author_name` component,
- `title.text` - change `text` of `title` component.

> Optionally, you can add `_fileName` property to change the name of the generated image. Please note that the file name must be unique, and it shouldn't end with a file extension, as it will be added automatically. If you do not add this property, the image will be auto-generated.

![data in spreadsheet](/blog/data-in-spreadsheet.png)

## Generate images

Now, head to the 'Extensions' tab in RenderForm and open 'Spreadsheet' extension. Import created spreadsheet using 'Import from file' button,
and select the template you want to use on left side.

![RenderForm extensions](/blog/bannerly-extensions.png)

If all properties are loaded properly in your file (they must correspond to your selected template), you are ready to start a generation.
To start generating images click 'Generate' button on top of the list, and do not close the window until the generation process is completed.


![list with generated images in spreadsheet extension](/blog/list-with-generated-images.png)

Once the generation is done, you will be able to download the images using 'Download' button.

![generated images from template for marketing automation](/blog/generated-images.png)

With 'Spreadsheet' extension you are able to quickly generate multiple images with one template and customized content.
With image generation and simple image editor, you can create images, post covers or marketing brochures, that match your company, website or app unique style!

<Vimeo/>

How to create many images from a spreadsheet?


Do you have trouble sending birthday wishes to your team members on time? Sometimes, we forget or put it off because it doesn't seem important compared to other work tasks. However, acknowledging birthdays within your team is vital. It helps build a sense of camaraderie, shows appreciation, and creates a positive work environment. In this blog post, we will solve this problem by creating automated and customized birthday wishes. Keep reading for the details!

## Why automate sending birthday cards

Automating the process of sending birthday wishes is a great solution for various reasons:

- You never forget to send wishes, even during busy times.
- Enables scalability, allowing you to send personalized wishes to many recipients simultaneously.
- Saves time and effort by eliminating manual intervention.
- Maintains consistency in your birthday greetings.
- Allows for scheduling and customization in advance, creating a seamless and heartfelt experience for recipients.

Automating birthday wishes makes the process easier and more enjoyable for you. By saving time and effort, automation allows you to spend more quality time with the birthday person. It simplifies the process and lets you focus on the personal aspects of celebrating their special day.

## Birthday wishes automation

The automation we are going to build works great especially for workspaces and teams. The automation combines the power of three platforms:

- [Google Calendar](https://calendar.google.com/): Utilizing Google Calendar, we will **create a dedicated calendar** to keep track of team members' birthdays.
- [RenderForm](http://renderform.io): With RenderForm, we can easily **generate personalized birthday cards**, ensuring a unique touch for each individual.
- [Zapier](http://zapier.com): By harnessing the capabilities of Zapier, we can seamlessly **connect these apps** and effortlessly send birthday messages and corresponding images to the designated Slack channel.

The end result is simple yet impactful. The birthday person will receive a personalized card filled with warm wishes directly on the selected Slack channel. With this automation in place, celebrating team members' birthdays becomes a breeze, fostering a positive and engaging work environment.

## Create and setup Google Calendar


To begin, let's create a new calendar in Google Calendar specifically dedicated to birthdays. Follow the steps outlined in [Google Support's help base here](https://support.google.com/calendar/answer/37095) to create the calendar effectively.

After creating the calendar, we need to populate it with the actual birthdays of our team members. Here's how you can do it:
1. Add event to your calendar (set event time to hour that aligns with when you want the birthday message to be delivered.)
2. Add the birthday person's name as the **event title**.
3. Set the event to **repeat yearly** to ensure it recurs automatically.
4. In the **description**, include a short personalized birthday message that will be added to the birthday card.
5. Ensure that you select the **Birthdays calendar** you created.
6. Set the event as **Free** to avoid affecting your real work calendar availability.

![Creating birthdays calendar in Google](/blog/birthday-cards/birthday-google-calendar.png)

This step may require some initial effort, but remember that it is a one-time task. You may already have some birthdays in your calendar, which can save you time. Once you have completed adding the necessary birthdays, you're ready to proceed to the next step!

> Once the calendar is ready and filled with birthday dates, you can choose to **hide the calendar** to prevent it from impacting your regular work calendar. This way, you can maintain a clean and organized view while still benefiting from the automation.

## Create birthday card template

Now, let's dive into the exciting part of creating a personalized birthday card using RenderForm. This card template will serve as the foundation for the automated birthday wishes, allowing you to customize selected image elements for each recipient.

![Creating birthdays calendar in Google](/blog/birthday-cards/happy-birthday-slack.png)

To begin, log in to your RenderForm account or [sign up for free](/register) if you don't have an account yet. Navigate to **My templates** and start creating your unique birthday card template. With the RenderForm Template Editor, you have the flexibility to incorporate various elements such as **backgrounds, images, emojis, custom shapes, and more**.

For my birthday card template, I've included specific elements that I want to personalize when the card is sent to different individuals:
- birthday person's name (`name`)
- custom text with wishes (`wishes`)

On the left side of the editor, you'll find all the **template elements (components)**. In addition to the mentioned elements, there's an image, background rectangles with colors, emojis, background circles, and other decorative elements.

![Components of the birthdays card template](/blog/birthday-cards/birthday-template-components.png)


> **Tip 1:** Rename the [template components](/docs/general/template-properties/) to easily identify them later during image automation.\
> **Tip 2:** Lock elements that you don't want to change during image generation. You can do this by clicking on the lock button in the element properties panel.

Once you've crafted your template to perfection, remember to save it. Now, you're ready for the final step: creating the automation.

## Create the automation

In this final step, we'll create and configure the automation using Zapier, which will seamlessly connect all our apps and facilitate the automated birthday message delivery to the selected Slack channel.

To get started, log in to Zapier and create a **new Zap** by following the instructions below.

### Setting up the Trigger from Google Calendar

The trigger event will be an event from our birthday calendar, which will initiate the desired action when a birthday is detected.

#### App & event

Choose **Google Calendar** from available apps and select **Event Start** as the trigger event.

![Setting up Google Calendar as trigger in Zapier automation](/blog/birthday-cards/birthday-automation-zapier-trigger.png)

#### Account

Connect Zapier with your Google account to grant it secure access to your calendar. Rest assured, your calendars will not be shared anywhere.

![Connecting Google Calendar to Zapier](/blog/birthday-cards/birthday-automation-connecting-calendar.png)

#### Trigger

Now, it's time to specify the trigger event. Start by selecting the **Birthdays calendar** where you've added all the birthdays in your Google Calendar. Next, set up the **Time Before** and unit (I recommend setting it to 30 minutes, which means that Zapier will check for triggers 30 minutes before the birthday event and initiate the automation accordingly). Click **Continue** when you're done.

![Setting up calendar trigger in Zapier](/blog/birthday-cards/birthday-automation-zapier-trigger-setup.png)

#### Test

The final step in this part is to test the trigger connection. Simply click on **Test trigger** and wait for the results.

![Testing the trigger in Zapier](/blog/birthday-cards/birthday-automation-zapier-trigger-test.png)

Once the test is completed successfully, click on **Continue** to proceed to the second part of the automation: connecting with the RenderForm birthday card template.

### Action: Link RenderForm template

In the action phase, we'll connect the birthday card template created in RenderForm with the event details from Google Calendar. This will involve using the event title as the birthday person's name and the event description as the personalized wishes.

#### App & event

Search for RenderForm in the list of apps and select **Create Image** as the event.

![Setting up RenderForm as action in Zapier automation](/blog/birthday-cards/birthday-automation-renderform.png)

#### Account

Connect Zapier with your RenderForm account to gain access to your templates and enable image automation.

![Connecting RenderForm to Zapier](/blog/birthday-cards/birthday-automation-renderform-connect.png)

#### Action

In this step, we need to specify how we replace the components in our birthday card template. As a reminder, we'll be replacing the `name.text` and `wishes.text` components from our template. The birthday person's name can be found in the Google Calendar event as the **event title (Summary)**, and the wishes can be obtained from the **event Description**.

![Setting up RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-action.png)

#### Test

Next, Zapier will conduct a test to ensure the connection is working correctly. Click on **Continue** and then select **Test action**.

![Testing RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-test.png)

Once the test is completed, you can **check the test image in the test result**. Open the image link in a new tab in your browser and verify if everything appears as expected.

![Test result with generated test image](/blog/birthday-cards/birthday-automation-renderform-result.png)

Now, instead of publishing our Zap, we need to add one more action: connecting our Slack channel, where the birthday cards will be sent automatically.

### Connect Slack channel

The last step in creating the automation for sending birthday cards is to deliver the actual message and image on Slack. This step follows a similar process, as outlined below.

Begin by adding a new action to our Zap and proceed with the configuration.

#### App & event

Search for Slack in the list of apps and select **Send Channel Message** as the event.

![Setting up Slack as action in Zapier automation](/blog/birthday-cards/birthday-automation-slack.png)

#### Account

Connect Zapier with your Slack account to access Slack channels and enable automated messages.

![Connecting Slack to Zapier](/blog/birthday-cards/birthday-automation-slack-connect.png)

#### Action

In this step we create the message that is sent to Slack. For that we need to:

- select the Slack channel where you want to send the birthday card
- create a message with text and incorporate the RenderForm action result, which is the auto-generated birthday card image

In the message, you can add additional text (optional) and choose the RenderForm action result, which is the automatically generated birthday card image.

![Setting up Slack action in Zapier](/blog/birthday-cards/birthday-automation-renderform-action.png)

> You can also personalize the message content! Utilize the birthday person's name from the event title to give it a personal touch!

#### Test

To ensure everything is functioning properly, run one final test.

![Testing RenderForm action in Zapier](/blog/birthday-cards/birthday-automation-renderform-test.png)

#### Publish Zap

Finally, after conducting the test, click the **Publish** button. With that, our birthday card automation is ready to go!

## Birthday card automation test

Before the automated sending of real birthday cards, it's important to perform a test to ensure that everything is set up correctly. Here's how you can do that:

**1. Create a birthday event in your "Birthdays" calendar**, scheduled for now plus 40 minutes. For example, if it's currently 9:00 AM, set the event to start at 9:40 AM. This allows Zapier enough time to run the trigger.

**2. Wait for the trigger to activate** in Zapier. The trigger will check the calendar for any upcoming birthdays.

**3. Check the result** on your designated Slack channel. You should see the automated birthday card message with the personalized wishes and image.

By performing this test, you can ensure that the automation is functioning correctly and that the birthday cards are being sent as intended.

![Test result for birthday card automation in Slack](/blog/birthday-cards/birthday-card-automation-test.png)

Now, sit back, relax, and enjoy the seamless automation of sending personalized birthday wishes to your team members on Slack. Celebrate their special days with a touch of automation and make them feel valued and appreciated!


Automate sending birthday cards to&nbsp;your team members


Creating leaderboard or ranking images can be a repetitive and time-consuming job. You need to find or create a template, add the data, and then export the image. And then repeat on different occasions. Or even worse, create such an image manually every time. If you create many leaderboard images, it can be a tedious task. 

In this tutorial, we will show you how to automate the process of creating leaderboard and ranking images using RenderForm template editor and a simple spreadsheet. With that information, you will be able to create a new leaderboard image in just a few seconds!

## Create leaderboard image template

First, we need to **create a template** for our leaderboard or ranking image. For that, log in to RenderForm and create a template of your choice.

The canvas editor will give you all the options that you can use in your leaderboard image template. Add background, player names, photos, and their score or even star rating!

![Leaderboard template created in RenderForm](/blog/leaderboard-template.png)

When creating a template, name the elements of your image so that you can easily identify them later. For example, you can name the player's name as `player_name` and the player's score as `player_score` instead of `text_1`, `text_2`, etc.  

Save your template and that's all, you won't have to create the same image manually never again. Now, you are ready for automatic image generation!

## Generate new leaderboard image from a template

When your template is ready, now you can easily generate an image with different data. It will take just a few seconds!

Go to **Image Preview**, which shows the image and all elements that can be edited. It is a sort of form which you can use to quickly generate new images from your template.
Next, edit the template elements in the form. Simply replace the default text, e.g., `player_1_text` with the real player name, `Jon Snow`. Proceed with the rest of the elements and add the data for all the players.

![Leaderboard image preview](/blog/leaderboard-image-preview.png)

Once you added all the data, click **Render Now** at the bottom of the list. The image will be generated instantly, and you can see how the new data looks like in your template.

![Leaderboard rendered image from preview](/blog/leaderboard-image-preview-rendered.png)

And that's all, you can now **download the image or share it with your team**. To do that:
- right-click on the rendered image and use the *Save image* option
- use **Copy as browser link** option under the Render now button. This option will generate a link for your image and let you use it online!

## Generate multiple images with spreadsheet

If you need to create **multiple leaderboard or ranking images with different data at once**, then you can use the Spreadsheet automation. It allows you to generate multiple images at once with a few simple steps. 

### Create a spreadsheet with data

Our leaderboard template is ready, so now, we just need to create a spreadsheet with the data we want to display in it.

In the header row of your Spreadsheet, add the **names of the columns** that match the IDs of the elements in the template and their property type. You can copy all the names from the template preview.

For example, in my template I will use `player_1_text.text` where `player_1_text` is the ID of the text element and `.text` is the property of the element that we want to change.

![Spreadsheet with data](/blog/leaderboard-spreadsheet.png)

For a better overview, you can add a column with the image name (`_name`). This will be the **name of the image file** that will be generated.

In the next rows, add the data you want to display in the leaderboard images, so the players' names, photos, and scores. You can add as many rows as you want, each row will be a separate leaderboard image.

> Check out our [video tutorial about image automation using spreadsheet](https://www.youtube.com/watch?v=5jy9xteruno).

### Automate the image generation

Now, go to **Plugins** in RenderForm and choose **Spreadsheet** automation. There, choose the template you created to use it as a base for the leaderboard images.

![Spreadsheet automation plugin](/blog/plugins-spreadsheet.png)

Then, click on **Import** and pick the XLSX file with the data. Once it is loaded, you will see the preview of the images that will be generated with the data from your spreadsheet. In this step, you can check and confirm if everything is correct.

![Preview of auto-generated images](/blog/leaderboard-imported-spreadheet.png)

Finally, click on **Render** and wait for the images to be generated. Once they are ready, you can download them as a zip file with **Download** button.

![Ready to use ranking images with player details and scores](/blog/leaderboard-images.png)

## Conclusion

In this tutorial, we showed you how to automate the process of creating leaderboard or ranking images. With just a few clicks you can generate a new image from your template or multiple images with different data using a simple spreadsheet. Automate your workflow with image generation and save time for more important tasks!

Zapier

Make.com

Integrately

WordPress Plugin

Mailchimp

Airtable Extension

Google Sheets

Excel/CSV file

HTML Embed

REST API

RenderForm CLI

Webhooks

HTML to Image

Posts with #tutorial

Fixing common issues with rendering images

How to create many images from a spreadsheet?

Automate sending birthday cards to your team members

Leaderboard and ranking image automation with RenderForm