How to Add Alt Text to Your Email Images [Quick Tip]

by Ginny Soskey

Date

July 15, 2013 at 2:00 PM

how_to_include_alt_text_in_email_imagesOnce you hit 'send' on an email, its fate is in the hands of the email gods. In other words, things like recipients' email clients, the devices they're using to open it, and their browsers. Your recipients could see an email that's beautifully designed, perfectly aligned, and the optimal size ... or those graphical elements might not even show up at all.

The point is, all that time you spent designing beautiful graphics for your email goes down the drain if images aren't enabled in a certain email client. But you can still get your message across -- and maybe even get more clicks on your calls-to-action (CTAs) -- if you add custom alt text to your emails. 

What is alt text, you ask? When an image isn't able to load in an email, website, or blog post, the "alternative text" (AKA alt text) is displayed. Often, it's simply the file name of the image -- which may or may not be relevant to the person seeing the alt text. Instead of being hit with random file names, you should make sure your recipients will see relevant, clickable text -- especially if you're using images as CTAs.

Let's take a look to see what this would look like in real life in Quartz's email below. I'm a huge fan of the publication's morning roundups, but I don't always have images enabled. Here's what I got in my inbox last week:

qz email screenshot

Because Quartz included alt text, I knew who was sending me the email and who sponsored it -- something Adobe would probably be really happy about. Bottom line: Alt text isn't something you should forget about when designing emails. But how do you go about adding alt text to your emails?

How to Add Alt Text to Your Images in Emails

Note: Other email service provider will have very similar processes, but we're going to use HubSpot's Email tool for tutorial purposes. If you're using a different email tool, keep an eye out for the alt text tag when you're uploading and formatting an image to customize it.

Step 1: In an email, click the 'Insert Image' icon in the rich text editor.

alt_text_post_1

Step 2: Select which folder you'd like to add the image to.

alt_text_2

Step 3: Upload the image you'd like to use (either click and drag, or click 'Upload a File').

alt_text_3

Step 4: Click on the image you just uploaded, then select 'Use Image.'

alt_text_4

Step 5: Click on the image within the text of your email, and an options box will pop up. Within the options box, select 'Edit Image.'

alt_text_5

Step 6: Add the text you'd like to display as alt text, then click 'OK.'

If you need help writing effective alt text, check out this post.

alt_text_6

Step 7: Boom! You're done. This is what it will look like in your email.

alt_text_7

For images that are serving as CTAs, make sure your alt text is actionable, like "Download Now!" -- and hyperlink the image so the alt text is clickable. This way, your alt text will act like a text-based CTA and may still result in clickthroughs.

... And that's it! Now, let's get creative. How could you use alt text to make your emails stand out? Share your ideas with us in the comments.

Image credit: CarbonNYC

Search Inbound Hub

Subscribe to Marketing Articles by Email

Subscribe by RSS

Follow HubSpot

Call Us: 1-888-HUBSPOT