Text-to-Image Ratio in Email: Advice from Our In-House HTML Experts

Posted by Abi Davies 27 Nov 17

text to image ratio in email The questions we often get asked by ecommerce marketers we work with are:

  1. “Are there too many images in this email?/ "Is this email too heavy?”
  2. “Will this affect deliverability?”

As a rule, the use of image-only emails in ecommerce marketing is not recommended.

(💡 What constitutes an image-only email? Templates that are pretty much entirely image based, with almost no HTML text included.)

That said, using images in email marketing is not the risky-business it once was.

Back in the day, email images were something of a blind spot for spam filters - and would therefore often wreak havoc when it came to deliverability.

Nowadays, we have image-reading algorithms that can recognise - and approve - what’s inside an email, thus bringing an end to the militant auto-spamming we once saw. But that doesn’t mean image-only emails are now best practice.

To help our readers be able to understand the thought process behind deciding the right text-to-image ratio in email, we sat down with our HTML team to hear their thoughts on the topic.

Below are four of the main takeaways from our conversation.

1) Image-only emails? Less attractive than they look

On the surface, image-only emails bestow marketers a certain degree of creative freedom, as they don’t demand the use of grid frameworks. This makes them an alluring option, especially for fashion retailers whose main priority is for the email to “look” fantastic.

However, the reality of image-only templates is far less rosy.

Aside from the fact that some email filters will mark your email as spam if they can’t recognise the images inside it, other reasons to avoid image-only emails include:

  • Sometimes an image will simply fail to load. There are still email clients that don’t automatically render images (such as Outlook), and some recipients opt to keep images switched off at all times. If an image doesn’t load and there’s no live text in the rest of the email, the recipient will have nothing to read when they open it.
  • Screen readers (a piece of software that converts web content from text into either speech synthesis or braille display) struggle to read image-only emails. This means that anyone relying on a screen reader to understand your marketing messages won’t be able to if you send image-only emails.
  • Image-only emails can clip in Gmail (this is because multiple images will increase the file size, and when file sizes exceed 100kb the email will clip).
  • If using a single image inside an email, it’s difficult to see where a recipient has clicked, or which product a recipient has clicked on if you send a list of product recommendations.
  • It’s also worth bearing in mind that, if your recipient wants to search for an email in their email client, they won’t be able to find your email if it’s image only (unless they can remember the exact wording of your subject line etc).
  • Ultimately, using live text (HTML text) in your email will enable your brand to communicate its message, even if the visuals fail to display.

Download ecommerce marketing trends 2018 here

2) Use good quality images and make your emails responsive 

Even when you’re creating emails using HTML text, the likelihood is you’ll need to include some image blocks for products, CTAs and logos.

There’s nothing wrong with doing this, but make sure the images you use are of a high enough quality to display perfectly on any device the email is opened on.

Which brings us to the next point: make sure your email is 100 per cent responsive. 

Whilst an exploration of responsive email creation is a blog post in itself, Litmus sums up the process quite nicely in this blog post, saying: 

“Responsive emails use fluid tables and images to make content flow across different screen sizes. How? By using CSS media queries to change fixed-width tables and images on desktops into fluid ones for smaller screens.”

In others words, the most important things to consider here is CSS media queries.

3) Use alternate text (and use it well) 

Alternative text (alt text) is text used within HTML code to describe an image being displayed.

Its main purpose is to:

  1. Communicate the message of the email, in case the content doesn’t load
  2. Give screen readers further context to your email’s message

All images included in your emails should have alt text, apart from those that do not depict anything of value and do not need to be explained to those who cannot see it.

Some retailers opt to stylise their alt tags, making it, for example, bold or a different colour. This ensures recipients see something more visually appealing should an image be blocked.

That said, if you do opt to stylise your alt tag, make sure the image being described is wide enough for the text you want to display, or it won’t work as it should.

There’s no such thing as the ideal ratio 

Going back to the introduction of this post, there is no real answer to the question of how many images to include inside an email. 

Within the industry, opinions vary between a 80 to 20 of text-to-image ratio to a more even 60 to 40, but ultimately it is down to keeping a good balance between the two, and doing this consistently. 

That said, it's worth bearing in mind that, in order to get away with using more images, you need a good sender reputation. 

Ultimately, if your emails have been designed well, coded correctly and include the right amount of live text and images, more people are likely to interact with, and trust, your emails.

If, on the other hand, your email includes simply one image, no live text and incorrect tagging, likelihood is subscribers are going to eventually zone out as soon as an image doesn’t display properly for one reason or another. 

There are so many good reasons to use text emails instead of image only emails, but, ultimately, it’s up to each retailer to decide what’s best for their customers. 

Topics: Email marketing strategy, text to image ratio in email, Email deliverability, Email marketing templates

Artboard 10 B-1.png

Top Posts