Email Images That Never Load

A sale nobody could see

The newsletter took a day to design. It was laid out like the printed flyer: a headline, three products with prices, a sale date and a button, all in one image.

In the designer's inbox it looked exactly right. In many customers' inboxes it arrived as an empty box and a notice about blocked pictures.

The subject line got it opened, and then there was nothing to read. A few people downloaded the pictures; most moved on.

The offer was real and the design was good. The email simply depended on the one part that many programs do not show by default.

Who sees the blank version

• Outlook on office computers, which holds back pictures from unknown senders.
• Readers who switched images off, for privacy or to save data.
• Phones on a weak signal, where text arrives long before pictures.
• Screen reader users, who hear only the text and alt text.
• The preview line in the inbox, which shows text only.
• Spam filters, which look for words and find almost none.

The first catches out any business whose customers read email at work. Desktop Outlook is set by default not to download pictures until the reader allows it, and many offices never change that.

Why emails end up as one picture

It is usually a shortcut rather than a decision. The flyer already exists, the email program accepts an image, and the result looks identical to the print version.

Designers also like the control. Fonts, spacing and colours behave in a picture exactly as they were set, while live text in email shifts slightly from one program to the next.

That trade looks sensible in the design file. It stops looking sensible when part of the list sees nothing at all.

Put the message in live text

Live text is ordinary text in the email, the kind you can select and copy. It shows whether or not images load.

The headline, the offer, the dates, the prices and the instruction to act all belong in live text. If the images never arrive, the email should still say everything it was sent to say.

Pictures then do what they are good at: showing the product, the place or the work. They support the message instead of carrying it.

Custom fonts show only in some email programs, so pick a common fallback that still looks right, and check the result in Outlook, which handles fonts its own way.

Alt text that carries the message

Every image in an email can carry alt text, a short description shown or read aloud in its place when the picture does not appear.

If an image contains words, its alt text should say the same words. A banner announcing the summer sale needs alt text announcing the summer sale, with its dates.

Product photographs need the product name and price. Logos need the business name. Purely decorative images can have empty alt text, so screen readers skip them.

Most email programs offer an alt text field beside each image, and it is usually left blank.

A worked example

A family-run appliance store with one showroom sent a monthly email to customers who had signed up in the store or through its website.

Each email was the newspaper flyer, exported as a single tall image, with one link on it to the website's home page.

A customer who worked in an office replied to one, asking whether something was meant to be attached. On her work computer, the email had arrived as a blank page.

The store tested the next email by sending it to staff using Outlook at work, a phone with a weak signal, and a Gmail account with images switched off. All three showed nothing useful.

The template was rebuilt. The headline, the offer and the sale dates became live text, each product became a photograph with its name and price in text below, and the button was built in code.

The flyer still has a page on the website for anyone who wants it, and the email reads properly with pictures on or off.

Buttons and backgrounds

A button made from an image disappears with the images. A button built in code, a coloured box with live text inside it, shows either way and can still be tapped.

Watch for white text placed over a dark photograph. When the photograph is blocked, the text sits white on a white background and vanishes.

Give every image area a background colour close to the photograph's own, so the text stays readable while the picture loads, or if it never does.

The line that shows in the inbox

Most inboxes show a line of preview text after the subject. It comes from the first text in the email.

An email made of one image has no first text, so the preview shows something unhelpful: a prompt to view the email in a browser, or nothing at all.

Start the email with a sentence that adds to the subject line. Many email services also let you set this preview text directly, without showing it in the body.

The plain version

Most email services send two versions of each email together: the designed one, and a plain-text one for programs and people that prefer it.

The plain version is usually generated automatically and rarely read by anyone at the business. Open it before sending. Links should be readable, and nothing important should be missing.

An email built as one image produces an almost empty plain version, which is one more reason spam filters treat image-only emails with suspicion.

The counter-case

Images still matter, and nobody should strip them out.

A store selling something visual, such as furniture, clothing or art, needs its photographs in the email. The point is that the message survives without them, not that they go.

Some businesses find that a short, plain email from the owner, with no design at all, suits their customers better than any newsletter. That is a choice, and a perfectly good one.

Whichever you send, write the message in live text, describe every image, and look at the email with pictures switched off before it goes.

Before the next send

1. Turn images off in a test inbox.
2. Read the email as it arrives.
3. Move every word out of images into text.
4. Write alt text for every remaining image.
5. Build buttons in code, not as pictures.
6. Set the preview line to add to the subject.
7. Open the plain version and read it.

Step three is the change that matters most. Words inside a picture reach only the readers whose programs show pictures, and words in live text reach everyone.

The automatic replies that come back after a summer send are covered in out-of-office replies over the summer.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.