10 Best Practices of Using Images In Email

How to use images in email

Imagine there are two articles, one with the descriptive images along with content and the other with lots of content. Which article will encourage you more to read further or make a better impact on you? As a famous saying goes ‘You will forget what you read, but you will never forget what you see’. We tend to remember and feel connected to the stuff that is presented with graphics. So to make the email templates more attractive and engaging, we use images excessively while designing them.

Although images offer a great way of interaction, it comes with problems as well. While making email templates, we need to follow certain practices to avoid getting into a mess :

Alt text

Many of your subscribers may have image blocking feature turned on by default. In this situation, the alternative text serves the purpose of telling the information about the image that is been depicted.

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <tbody> <tr> <td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <img src="http://mailerstock.com/templates/xread/images/banner-image.jpg" alt="Business newsletter" title=""> </td> </tr> </tbody> </table>

Display CSS

Adding this CSS attribute to the image code will allow you to make the image a block level element and in turn, you can set the width and height of the image. Display property fit the image into a respective grid. It will remove extra white spacing around the image.

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <tbody> <tr> <td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <img src="http://mailerstock.com/templates/xread/images/banner-image.jpg" alt="Business newsletter" title="" style="display: block;"> </td> </tr> </tbody> </table>

Inline Width Style

This CSS property is used so as to define a fixed width for the images in the email newsletter. Defining the width of an image makes it confined and restricted to that dimension.

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <tbody> <tr> <td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <img src="http://mailerstock.com/templates/xread/images/banner-image.jpg" width="600" alt="Business newsletter" title="" style="display: block; width: 100%; max-width: 100%;"> </td> </tr> </tbody> </table>

Inline Width Attribute

Along with the style width CSS attribute, we have an HTML width attribute as well. This is used most apparently for the web clients such as Outlook that ignores the width given as a CSS attribute. In case we fail to define this width, the email becomes unstructured.

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <tbody> <tr> <td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <img src="http://mailerstock.com/templates/xread/images/banner-image.jpg" width="600" alt="Business newsletter" title="" style="display: block;"> </td> </tr> </tbody> </table>

Absolute Path

Always provide your images with the absolute path urls because they are very useful in cases when an online email client or email marketing platform does not support relative URLs.

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <tbody> <tr> <td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <img src="http://mailerstock.com/templates/xread/images/banner-image.jpg"> </td> </tr> </tbody> </table>

Title text

It is always advisable to give the title for an image as it defines the purpose of the image that is been portrayed.

<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="width: 100%; max-width: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <tbody> <tr> <td align="center" valign="top" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"> <img src="http://mailerstock.com/templates/xread/images/banner-image.jpg" title=""> </td> </tr> </tbody> </table>

Compress images

More the image size more will be the time it will take to load. As we all know that users want everything at that instant, there might be the case that the client bounces back from reading the email.

Image format jpg, png, gif

The images with different formats should be used according to their size. As .jpg images are smaller in weight, they can be used for backgrounds and banners. In the same way, in logos and icons, the .png format images should be used. In case you need to convey your ideas through movement, use images with the .gif format.

Image Naming

There has to be a proper naming convention for each of the image that you use in the email template. That is because the names that are not relatable to the image may cause a bit of confusion for you as well as for the client.

Note: Never use capital letters and spacing while naming an image.

For example :

Valid – product.jpg, product-1.jpg, product_1.jpg, product1.jpg,etc.

Invalid – Product.jpg, Product 1.jpg, product 1.jpg, product _ .jpg,etc.

Responsive images

With the shifting of the trend from the PC’s and laptops to mobile devices, every design is to be made keeping in mind the number of people seeing it on mobile. Each image that you include in your code should be given the sizes so that they can adjust themselves on all the device-widths.

As a whole, what we see is what we appreciate. So, trying to engage the customers through images is a good idea. What we suggest is that keep the image usage as per the requirement. Adding images just for enhancing the HTML email template design, will only make the template heavy.