The different purposes for which you can use GIFs in emails are:
<source src=”uplers.ogg” type=”video/ogg”>
Bonus tip: Vidyard and Hippo Video are two tools that can help create personalised videos for emails.
Author Bio: Kevin George is Head of Marketing at Email Uplers, one of the fastest-growing custom email design and coding companies. He specialises in crafting professional email templates, PSD to HTML email conversion and free responsive HTML email templates, and providing email automation, campaign management, and data integration & migration services. He loves gadgets, bikes, jazz and eats and breathes email marketing. He enjoys sharing his insights and thoughts on email marketing best practices on his blog
If you have too much information to convey in the emails, you can rely on infographics as they are attractive and easier to consume. According to a report, infographics are 30 times more likely to be read than text-based content.
Why Use Visuals in Emails?
- Adding relevant visuals will convey the message in a better way. For example: If you are promoting camping accessories, it would be good to include suitable visuals that showcase the usage of your products. The images will make your email more impactful and drive conversions.
- Visual email marketing holds the recipient’s attention and prompts them to read the entire email. So, even if the user is skimming through your emails, they will be able to grasp the purpose of the email.
- Attractive visuals will boost the subscriber engagement and take the user experience to the next level. More people will be keen to share your emails, and as a result, it will improve your sender’s reputation and deliverability.
Types of Visuals You Can Add to Your Email Campaigns
As a best practice, you must have an image of 1200px inside a container of 600px so that there are no quality issues in the images used in visual email marketing.
i. Lyft uses a 3D animation to promote the latest scooters.
1 – Images
Hulu has embedded a video in their visual email marketing to promote their thriller series “Castle Rock” and encourage more people to subscribe to their platform.
If images are worth a thousand words, videos are worth 1.8 million words. They can skyrocket your engagement rate and increase the conversion rate, thereby driving faster business growth.
Animations that do not use too many colours are best presented as GIFs.
Their landing page takes the story forward by revealing the offer of a 15% discount.
You can make your emails even more effective by trying out 3D images or illustrations.
<video width=”300″ height=”300″ controls>
It will go something like this:
Check out this beautiful email template to launch their original Fate: Extra Last Encore series.
Using Retina Images in Emails
So, let’s start with the advantages of using visual email marketing.
See how a GIF imparts a more pleasant email experience to the readers.
To sum it up, PNG helps include transparent, loss-less, smaller files. On the other hand, JPG is the most popular for photos or photo-like images on the Internet. However, you must remember that every save will compromise the image quality.
Isn’t it easy to remember something presented as images rather than descriptive text? That’s exactly why visuals are so important in your email marketing strategy.
You can add a thumbnail image of the video in the email. Place the “Play” button in the image itself. You can redirect the user to the YouTube video link or the video’s landing page by clicking the image.
2 – GIFs
ii. Vector-based images
ii. You can tell a fascinating story with the help of GIFs like Moo does.
Images are of three types, namely
Take a look at this email example by Purple. They have included attractive images that will perfectly communicate the look and feel of their mattress and encourage the readers to take action.
- You can use GIFs for creative branding.
- They help draw the subscriber’s attention.
- You can use animated typography to emphasise the message you wish to convey.
- You can use it to demonstrate the usage of your products or services.
- GIFs are a great storytelling tool.
- The travel industry, eCommerce industry, and SaaS businesses can use the power of GIFs to garner more conversions.
- Animations make occasion-based emails even more attractive.
Did you notice the subtle eye movement?
High-resolution animations should be incorporated as APNGs.
Netflix sends out top-notch emails with cinemagraphs to promote their latest shows.
APNGs are just like GIFs with the only difference in the resolution and image quality. APNGs have better image quality and higher resolution. This is because APNGs support 8-bit alpha transparency and 24-bit colours. Unlike GIFs, APNGs do not have any white edges at the border of the animations.
Ultimately, the image will also stretch to 1200px. As it does not have enough visual data, it will not compensate for the missing pixels and get blurred out.
See the difference between the two images in the screenshot below.
3 – Cinemagraphs
All email marketing influencers suggest that you use minimal copy in emails. So, how to convey more in the limited space of emails? Using suitable imagery that complements the copy and builds upon it is the answer. Based on the industry and type of business you belong to, you must add relevant images to make your copy more impactful and entice the user to convert.
Then, Dell tried it out in 2014 and brought 109% revenue.
Videos in emails are best for event email marketing or non-profit organisations that want to present how donations make the world a better place. They are helpful for the telecommunications industry too.
When you want the image to mix with the background colour, PNG is the most suitable format.
Take a look at this image to understand what I mean. Do you see that ugly line at the border of the left animation? APNGs help you do away with it.
Iii. Repairsmith uses an animation to show how their service works.
The widely used method to add images in HTML email is to host the images on a server and then use the <img src> tag. The same applies to GIFs, cinemagraphs, and APNGs too.
4 – Videos
<source src=”uplers.mp4″ type=”video/mp4″>
We shall start with images.
For instance, you can present a step-by-step guide to using your product in an infographic. You can also explain your manufacturing process or introduce your product categories.
- By adding the video thumbnail image
That’s exactly how cinemagraphs work.
Sometimes, it is observed that the logo and text elements get blurred when you access the email on a mobile device. These devices have high-density displays that cause the blurriness of the images.
- By embedding a video in the email
Let me share a few examples to show how GIFs can take your visual email marketing experience to the next level.
Note: Videos are not compatible with all email clients. It is only supported by Apple Mail, Outlook on Mac, iOS Mail, and Samsung Mail. So, you must always provide a proper fallback to avoid any rendering issues.
If you want the video to play directly in the email, you will have to use HTML5 code.
5 – APNGs
i. Real-world photos
For example, The New York Times has added a GIF animation as a video thumbnail to promote an episode of “The Weekly”.
This method allows the user to view the video in the email itself without being redirected to any third-party page. It is a better option as it eliminates any additional step and helps increase the views on the video.
6 – Infographics
If you want to showcase photographs of natural world elements, the jpeg/jpg extension works the best.
A cinemagraph is a beautiful combination of motion and the motionless.
Generally, a high-density display has 441 pixels per inch. This is double when compared to the pixel density of a standard display. Consequently, a container of 600px that contains the image of 600px gets stretched to 1200px.
We shall discuss the six main types of visuals that you can include in your visual email marketing through this article.
Visuals in emails encompass static images, 3D images, illustrations, GIFs, cinemagraphs, APNGs, and videos. Email marketers keep experimenting with different visual elements in their email campaigns to boost their engagement level and get the most out of their efforts.
Just a heads up before you give infographics a try.
Visuals provide a robust scaffold to connect with your subscribers and drive conversions. Irrespective of the industry you belong to, pictures and videos can always help the users understand your product better. Whether designing custom email templates from scratch or using DIY builders, adding visuals is a non-negotiable part of your email strategy. Get inspired through the tips and examples shared here, and you will surely ace your visual email marketing plan.
The ultimate result is similar to GIFs, but the only difference is the cinemagraphs consist of an endless loop, whereas GIFs are short snippets borrowed from a video. Cinemagraphs take the readers back to the moment lost in time. Visual email marketing in the travel or telecommunications industry can surely use this visual element to boost their engagement rate.
Whenever you open an email, the visuals catch your attention first. After all, the human mind is programmed to consume visual information 60,000 times faster than plain text.
Infographics are a collection of graphics, charts, illustrations, and text. They are thoughtfully put collages of words and images.
How to Incorporate Images in HTML email?
That’s the power of using animations in emails.
Make sure that it does not get too long. If your infographic is lengthy, you can include a snippet view in the email and redirect the users to the full infographic once they click on the image.
Harry’s nails their visual email marketing game by illustrating shaving with their German blades.
Take a look at this interesting visual.
Visual Email Marketing Tips to Skyrocket Your Engagement Rate
You can include videos in emails in two ways.
How to Embed Videos in Email?
Animations have been around since 1987 when CompuServe launched it to provide a colour image format for their file downloading areas. If we talk about its advent in email marketing, Lake Champlain Chocolates tried it out in 2007 and improved its conversions by 49%. Here’s an example of the GIF they included in their email.
Using the Correct File Formats for Visuals
Visual Email Marketing Best Practices
- Avoid using stock photos. I prefer creative images or real photographs over free pictures available on the Internet.
- An all-image email will trigger the spam filters. So, it is best to do away with such email designs and maintain the text to image ratio at 80:20.
- Many email clients block the images by default. Therefore, you must keep the visuals free from critical information or CTA.
- Always add relevant Alt-text with the visuals to ensure email accessibility.
- Refrain from using too flashy images and animations flashing between 2 to 55 Hz as it will aggravate the problem of photosensitive epilepsy.
- Check the file size of the visuals. They should not affect the loading speed of the emails.
- Do not compromise on the white space in the emails.
- Provide a suitable fallback for the visuals, especially embedded videos and APNGs, so that the emails do not throw any rendering issues in non-compatible email clients.
- Use visuals judiciously in a way that does not overwhelm the readers.
- Follow visual hierarchy, responsiveness, and Dark Mode compatibility while including images.
If you are not happy with the outcome of GIFs, you must switch to APNGs for a superior image experience.
49% of marketers rated visual email marketing as “very important” for their strategy. Suppose you are looking for someone who can help you design stunning email templates with impressive visuals. You can bank on Email Uplers custom design and coding services and get pixel-perfect emails at your disposal.