The Scoop on Using Images in HTML Emails

The Scoop on Using Images in HTML Emails

image sizeimage resizeblogmarketing automationemail marketingimagesbest practicesmessage editing

One of the easiest ways to spice up an email marketing campaign is to add visual appeal. We understand that the message of your email is the most important aspect but adding in-context graphics can't hurt.

That being said, don't fall into a bad habit of overshadowing the point with too many images. Finding the right balance of style and substance is the key to future success.

Despite some email clients (like Microsoft Outlook) placing restrictions on image rendering when viewing HTML email, including images in your content definitely helps to enhance the overall effectiveness of your message. (You can avoid the image blocking by asking your users to add your from address to their safe list)

But before you start adding graphics and photos, it is important to note that design considerations for a web page are somewhat different from those of an HTML email.

We don't want you spending hours on some fancy artwork and then not being able to use it in your email.

Here are some tips to help ensure the best results when adding images to your HTML messages:

Check Dimensions and Image File Size

To ensure deliverability of your HTML email, try and stick to light image files that don't exceed 25kb in size. This allows the message to load faster when your recipient is viewing the message. Dimensions are also important to keep at a minimum. While it is recommended to keep the width or your HTML email to a maximum of 650 pixels to fit the standard email preview window, you should avoid using images that are more than 470 pixels wide and 150 pixels high.

Resizing Your Image Files

When creating your graphics, you want to use images that have the same dimensions as you would like them to appear in your HTML email layout. If you need to resize a large image to fit a certain area in your HTML layout, make sure that you adjust both image width and height, proportional to the original image size. If you don't the image could appear stretched and not as sharp as the original. Fortunately a lot of HTML editors will automatically do that for you so that your image will not look distorted.

Avoid Using Background Images

Background images are stripped by many email clients when defined in the attributes of HTML elements like body and table tags. Try to develop the design for your HTML email to use background colors instead.

Use Absolute URLs to Link to Your Images

One common misconception when creating HTML email is to think that your message will always have a copy of the embedded image file, no matter where it shows up. The way it actually works is the HTML code can only point to where the image file is stored. You are not physically sending the image as an attachment like you would with an email to your friend. That is why it is important to make sure that all images you wish to use in your HTML email are hosted on a web server. This way, your email campaign recipients are able to point to the hosted images and pull them into the proper locations in your email layout when viewing your message.

There are numerous sites out there that will host images for free but it can be much easier to have everything stored in one location. With the SimplyCast Email Marketing service, we host all of your images for you, which keeps them in the same place as all of your created email campaigns.

Use 'Alt' Text with Your Images

Alt text is what a reader will see when they move the cursor over an image. While some email clients have images turned off by default, writing something in the ‘Alt' attribute of the tag ensures that your recipients will at least read the message if they are not able to view the image. A lot of HTML editors offer easy-to-use tools to edit such attributes.

Only Use CSS if You Have To

Try to limit the use of CSS attributes to position your image, especially absolute positioning. Instead, try to use table tags to control the position of images in your email message layout.

Finally, Test, Test, and Test

This goes for almost every aspect of your email marketing campaign. Compare how your images look in a test email. Open up the email in different applications, on different sized computer monitors and even on cell phones. The way people receive their email is changing every day and by keeping up with advances in technology, you could gain an edge. Like we said off the top, finding the right balance of style and substance is key when using images in your HTML emails. By following these simple tips you will be on your way to many more effective email marketing campaigns in no time.

Blog Share Section

Previous and Next Blogs

Related Blogs


Let us answer them!
CTA Image for Questions