
## 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 of 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 Visual HTML 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 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


Have you ever wondering if you could quickly take a screenshot of a webpage using just a single request?

RenderForm API allows you to not only create images using templates and API but also take a screenshots using REST API.

There are plenty use cases of that:
- Post it on social media
- Make a list of websites
- Detect branding based on colors
- Test or health-check your webpage
- Read texts from screen


## How to take a screenshot with API?

Generate your API key in RenderForm by signing up to the system. Get the API key from your account section and then you can make a request like below.

```shell
curl
    --location
    --request POST 'https://api.renderform.io/api/v1/screenshots' \
    --header 'X-API-KEY: <API_KEY>' \
    --header 'Content-Type: application/json' \
    --data-raw '{
        "url": "https://renderform.io"
        "width": 1366,
        "height": 768,
    }'
```

RenderForm API will respond after a couple of seconds with link where you can download the screenshot. Example successful response is shown below.

```json
{
  "requestId": "ed39c85ac41f4c54b95e4caaad4ebff8",
  "href": "https://cdn.renderform.io/.../image.png",
  "request": {
    "width": 1366,
    "height": 768,
    "url": "https://renderform.io"
  }
}
```

## Screenshot API parameters

As you seen above we passed `url` of the website, `width` and `height` of the screenshot. These parameters are required but you can add more options:

- `url` (required) - website URL of which RenderForm should take a screenshot
- `height` (required) - screenshot height
- `width` (required) - screenshot width,
- `expires` (optional) - add expiration time in seconds for the image, available values from `1` to `604800`
- `waitTime` (optional) - add wait time in milliseconds before taking a screenshot, available values from `500` to `5000`
- `webhookUrl` (optional) - send response to the given webhookUrl as POST request

## Does it integrate with other tools?

Yes! RenderForm is integrated with Zapier and Make.com (Integromat). Soon we will add more integrations like n8n.io. Please also notice that
every request supports a webhook. Taking a screenshot takes time because it's very resource demanding and complex process for servers.
You can pass a URL in `webhookUrl` field, thanks to that RenderForm API will accept your request and immediately
 return you a response. Once RenderForm finish processing your request a new request will be sent to the given URL in `webhookUrl`.

## Can I set an expiration date?

Yes, you can set expiration date on every screenshot from 1 second up to 7 days. Add a field `expires` and put there
an expiration value in seconds. RenderForm API return you a link in `href` field which will be valid for requested period of time.


Taking screenshots using REST API


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.png)

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!


Send Personalized E-mail from React Application



## Hakei App

Haikei is a web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more!

[haikei.app](https://app.haikei.app/)


![Hakei App - SVG Generator](/blog/svg-generator-hakei.png)


## Blobmaker App

You can't find a design that you like? We got you covered with Blobmaker's neat web-based interface. Generate the type of quality designs you've been dreaming about with just a few clicks.

[blobmaker.app](https://www.blobmaker.app/)

![BlobMaker App - SVG Generator](/blog/blob-maker-svg-generator.png)


## GetWaves App

Get Waves App, a web-based tool to generate unique SVG design assets for your digital creations, like websites, social media posts, blog posts, desktop and mobile wallpapers, posters, and more.

[getwaves.io](https://getwaves.io/)

![Get Waves App - SVG Generator](/blog/get-waves-svg-generator.png)


## Squircley!

Design beautiful, sharp, professional vector rectangle with curved corners.

[squircley.app](https://squircley.app/)

![Squrcleay App - SVG Generator](/blog/squircley-svg-generator.png)

## SVG Noise Pattern Maker

Noise Pattern Maker is a Codepen code, but it generates great SVG patterns which can be used as backgrounds to your digital assets.

[codepen.io/georgedoescode](https://codepen.io/georgedoescode/full/dyNVNjG)

![Noise Pattern Generator on CodePen](/blog/svg-noise-pattern-generator.png)

## MagicPattern

Visualize your data in a new and exciting way! MagicPattern can generate two types of SVG charts. Bar chart and area chart. You can import your data in JSON.

[magicpattern.design](https://www.magicpattern.design/tools/svg-chart-generator)

![Magic Pattern - Svg Generator](/blog/svg-charts-generator.png)

## Pattern Monster


Ever wished you could make beautiful patterns for your website, branding, or clothes without the heavy lifting? Say hello to PatternMonster. With no coding required, it's never been easier to make beautiful, scalable patterns. 

[pattern.monster](https://pattern.monster/)

![Pattern Monster - Svg Generator](/blog/svg-pattern-waves-generator.png)

## WowPatterns

WowPatterns is a unique resource of SVG patterns which are free to use. These patterns will fit best in home decor branding templates. 

[wowpatterns.com](https://www.wowpatterns.com/free-vector-art)

![Wow Patterns - Free to use SVG Patterns](/blog/wow-patterns-free-to-use-svg-patterns.png)

## Hero Patterns

Create beautiful patterns for your design instantly with Hero Patterns. Forget about tedious hours of design - you can now make any pattern you want in seconds. 

[heropatterns.com](https://www.heropatterns.com/)

![Hero Patterns - SVG Patterns Generator](/blog/hero-patterns-svg-patterns-generator.png)


## SVG Color Matrix Mixer

SVG Color Matrix Mixer is more a tool rather than a SVG generator, but it does a great job. You can create own color matrix with SVG Color Matrix Mixer. Upload your image, select your desired color matrix filter, customize each channel, and download your new filtered image!

[fecolormatrix.com](https://fecolormatrix.com/)

![SVG Matrix Mixer - Svg Image Manipulator](/blog/svg-color-matrix-mixer.png)

## Pattern Pad

PatternPad is a beautiful, intuitive and powerful app to create unique, eye-catching patterns. It's the solution for anyone who wants to brand their product or create an original social media post with ease. No matter what you're looking for, PatternPad has the perfect pattern for you.

[patternpad.com](https://patternpad.com/editor.html)

![Pattern Pad](/blog/patternpad.png)


List of SVG Generators - 2021 Update


A social media post is a message that is created and published on one of the social media platforms. 
It may include text, images, videos, links to pages, and other content.

## Share with link

There are a number of ways to share a post and the best way depends on the type of social media and how you want to share it.
The simplest way is just by using a URL with text. 


## Post on Facebook

```html
<a href="https://facebook.com/sharer/sharer.php?u=renderform.io&quote=I love RenderForm">
  Post on Facebook
</a>
```

Example: [Post on Facebook](https://facebook.com/sharer/sharer.php?u=renderform.io&quote=I%20love%RenderForm)

![Share to Facebook Example](/blog/share-to-facebook-example.png)


## Post on Twitter

```html
<a 
  href="https://twitter.com/intent/tweet?text=RenderForm is great!"
  data-size="large">
  Post on Twitter
</a>
```

Example: [Post on Twitter](https://twitter.com/intent/tweet?text=RenderForm%20is%20great!)

![Share to Twitter Example](/blog/share-to-twitter-example.png)

## Post on LinkedIn

```html
<a href="https://linkedin.com/sharing/share-offsite/?url=https://renderform.io">
  Post on Linkedin
</a>
```
Example: [Post on LinkedIn](https://linkedin.com/sharing/share-offsite/?url=https://renderform.io)

![Share to LinkedIn Example](/blog/share-to-linkedin-example.png)

## Post on Reddit

```html
<a href="https://www.reddit.com/submit?url=https://renderform.io&title=Try RenderForm!">
  Post on Reddit
</a>
```

Example: [Post on Reddit](https://www.reddit.com/submit?url=https://renderform.io&title=Try%20RenderForm!)

![Share to Reddit Example](/blog/share-to-reddit-example.png)


## Share with E-mail

```html
<a href="mailto:jakub@renderform.io?subject=RenderForm is great!&body=Hey Jakub!">
  Send with E-mail
</a>
```

Example: [Send with E-mail](mailto:contact@renderform.io?subject=RenderForm%20is%20great&body=Hey%20Jakub!)

![Share with Email Example](/blog/share-with-email-example.png)

## How to open post sharing in a new tab?

To tell web browser to open a sharing post in a new tab you need to use `target='_blank'` in `<a>` tag. See example below:

```html
<a href="https://renderform.io" target="_blank">Open in new tab</a>
```


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 #developer

Fixing common issues with rendering images

Taking screenshots using REST API

Send Personalized E-mail from React Application

List of SVG Generators - 2021 Update

How to share a post with link?