Tag: images in email

Guide to a Better HTML Email Design – Part 11

10.Use Image Alt Tags


HTML “alt” tags display a text description of an image either when the image does not display or when a cursor rolls over a displayed image. Using alt tags in your HTML emails is important for three reasons:

Recipients using dial-up or other slow connections might not see images for several seconds. Displaying alt tag text can convey what is to come.

Many email clients (Outlook and Outlook Express) and email services (AOL, Yahoo and Gmail) disable images by default or display a warning message or command to download the images.

Gmail uses what it calls “snippets,” which display the first few text words it sees in an email, following the subject line. Gmail will also display the text from alt tags, so it is important to use this to your advantage – as an addendum to your subject line, for example.

A sample alt tag looks like this:
<img name=”index_r2_c2″ src=”http://mailer.aghreni.net/imgproxy/img/809298233/index_r2_c2.jpg” width=”163″ height=”85″ border=”0″ alt=”Aghreni logo” border=0>


Tips on using alt tags
For logos, headers, section titles and other uses of images, describe the logo and image, but consider adding a brief teaser that explains that section of the email. If your email is a newsletter, an example of an alt tag that serves as both a teaser and a text version of the image might be: “Optimization — Strategies for improving email marketing performance”.

E-commerce Email:
Include short but complete descriptions of product photos or offers such as “50% off”.

Charts and Graphs:
Include enough text to explain the value and contents of the chart or graph, such as “Chart: Open Rates from A/B Split Test”.

Gmail Snippets/Preview Text:
Use an appropriate image in your header to display key teaser info. For ec-ommerce emails, the information might expand on special offers mentioned in the subject line, reinforce Free Shipping or promote additional products. For newsletters, consider mentioning additional articles beyond what is in the subject line, or expand on the existing topic.

While this sounds like a lot of work, at most it probably adds 5 to 10 minutes to your email production. Most importantly though, marketers who don’t use alt tags appropriately risk lower open and click-through rates because recipients might decide not to display images or act further.

Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.


Guide to a Better HTML Email Design – Part 10

9. Images in Emails


You can use as many images in an email message as you wish – the right number depends on the purpose, type and focus of the email. For instance, e-commerce emails often have more images than promotional emails.

Consider using graphic images and buttons to draw a reader’s attention. These images can convey concepts in combination with your copy. Make sure your call-to-action is not only supported by an image but also by text. This way, if the images are turned off, the call-to-action is still clear.

Images for emails should be hosted on a Website and not embedded within the email to ensure proper rendering and to minimize the email’s file size.

Important note:

Define the size and parameters (horizontal and vertical height in pixels) of each graphic in the <IMG SRC> tags.

For example:
<img src=”http://www.companyabc.com/image.gif” width=”75” height=”60” alt=”Titleof Image”>


Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.


Guide to a Better HTML Email Design – Part 8

7. Buttons, Charts & Other Supporting Images


Buttons, charts, and other supporting images should use the colors of your design elements to pull the reader’s eye to the images.

Make sure the text color used on your images stands out and is readable. Most importantly, make sure the recipient understands the action. See the examples below:


Shop Now button

Buy Now button

Free Shipping button


Read earlier blogs on “Guide to a Better HTML Email Design” on Kenscio Blog.



Copyright © 2019 Kenscio Blog. All rights reserved.
iDream theme by Templates Next | Powered by WordPress