Page 1 of 1

From how to send GIF animations in HTML emails to how to create simple gifs, an email newsletter specialist will explain

Posted: Tue Dec 03, 2024 5:28 am
by shuklamojumder093
You can easily insert GIF animations into HTML emails
. In this article,

Steps to insert GIF animation into HTML email
Things to note when inserting GIF animations into HTML emails
How to Make a GIF Animation in Just 3 Minutes
We will introduce you to the following.

We hope this will be helpful for anyone who wants to use GIF animations in HTML emails.

Kairos3 Marketing is an MA tool that provides strong support for marketing and sales activities.
Contents of this article

Steps to insert GIF animation into HTML email
Things to note when inserting GIF animations into HTML emails
Don't forget to compress your GIF animations
Make your emails understandable even without animated GIFs
Steps to easily create GIF animation from still images
Step 1: Prepare materials
Step 2: Setting the movement of GIF animation on the web
Step 3: Upload your images
Reference: Text-focused GIF animations that can be created using PowerPoint
Steps to easily create GIF animation from video
Step 1: Prepare materials
Step 2: Upload your video
Steps to insert GIF animation into HTML email
In this article, we will introduce the steps to insert vp purchasing officer email lists GIF animations into HTML emails using Kairos3 Marketing , the marketing automation used by the MarketFree editorial department , as an example.

Image

The UI and operation methods may be slightly different from the email distribution tools and marketing automation tools you use, but we hope you will find it useful.

Below is the HTML editor screen for Kairos3 Marketing.


Place your pointer where you want to insert the GIF animation in your email and click "Insert/Edit Image."

Select the GIF animation file you want to insert.


You can resize GIF animations from "Image Management".

You have now added the GIF animation to your HTML email.


GIF animations are treated the same as images, so you can embed links to them.

In the actual email, the GIF animation will appear as follows: Clicking on the GIF animation will take you to the specified link.


Things to note when inserting GIF animations into HTML emails
In this chapter, we will tell you what to keep in mind when inserting GIF animations into HTML emails.

Don't forget to compress your GIF animations
Try to keep the data size of your GIF animation under 200KB.

If your GIF animation is too large, your email may not fit in your recipient's inbox or may not load properly.

Reducing GIF animations is easy if you use the BANNERKOUBOU GIF animation size (capacity) reduction tool introduced earlier . You can reduce files up to 20MB in size.


Click the "Select Image" button and upload the GIF animation you want to reduce. Select the desired reduction ratio from "Width and height reduction ratio".

Check with a test email
Once you've completed the email, send a test email to your own email address. Check that the GIF animation works and that there are no design flaws . Check the test email on both a PC and a smartphone to find any design flaws.
Make your emails understandable even without animated GIFs
Depending on the email client, GIF animations may be displayed as still images or may not be displayed at all.

There are two ways to ensure your emails still make sense to your readers, even if your GIF animations don't display as intended:

One is to create GIF animations that can be understood even when they are not moving, so that they can be displayed as still images without any problems.

For example, let's say you're creating a GIF animation that blinks the words "Deadline: May 7th."

If you want to make text blink, you have two options: either change the text color or blink with a space between the characters.


Don't use the latter "blinking letters with spaces between them" technique, because it might not work properly and you might end up with just the second image that says "Deadline Month Date".

Another option is to add alternative text to your GIF animations.

Alternative text is the text information that accompanies an image.

Alternative text is also called the alt attribute. If you set alternative text, the set text will be displayed when the image cannot be displayed. Kairos3 Marketing, the marketing automation used by the MarketFresh editorial team , also allows you to enter alternative text in two steps.


When you insert an image into an HTML email, select "Image Description" under "Image Management" that appears and enter alternative text.

You have now entered your alternative text.

Send HTML emails as "multipart emails"
Depending on the recipient's email client, HTML emails may not be displayed or may be rejected. Use "multipart emails" that display either HTML or text format depending on the recipient's environment.
Most email delivery systems allow for multipart email delivery.
For details, see " What is multipart email? An easy-to-understand explanation from an email newsletter specialist ."


Steps to easily create GIF animation from still images
In this chapter, we will show you how to create GIF animations from still images.

In this article, we will use " BANNERKOUBOU ", a web service that allows you to easily create GIF animations.

Step 1: Prepare materials
To create a GIF animation from still images, you will need two or more different images. The GIF animation we will create this time is the following images.


This GIF animation is created from two illustrations.

Step 2: Setting the movement of GIF animation on the web
We would like to introduce a web service that allows you to create GIF animations from still images.

BANNERKOUBOU is a web service that allows you to create GIF animations from still images. The maximum number of images that can be uploaded is 100.

All the steps are written out so you can easily create GIF animations.

You can also reduce the size of GIF animations right on the site , so you don't need to use a separate tool.

We will introduce the detailed steps to create a GIF animation with BANNERKOUBOU .

First, prepare the image you want to animate.