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

502a6  how to include alt text in email images How to Add Alt Text to Your Email Images [Quick Tip]Once 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:

502a6  Screen Shot 2013 07 12 at 4.43.25 PM How to Add Alt Text to Your Email Images [Quick Tip]

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?

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.

502a6  alt text post 1 How to Add Alt Text to Your Email Images [Quick Tip]

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

502a6  alt text 2 How to Add Alt Text to Your Email Images [Quick Tip]

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

502a6  alt text 3 How to Add Alt Text to Your Email Images [Quick Tip]

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

502a6  alt text 4 How to Add Alt Text to Your Email Images [Quick Tip]

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.’

502a6  alt text 5 How to Add Alt Text to Your Email Images [Quick Tip]

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.

502a6  alt text 6 How to Add Alt Text to Your Email Images [Quick Tip]

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

502a6  alt text 7 How to Add Alt Text to Your Email Images [Quick Tip]

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

502a6  36f16ff9 cfba 4a28 b20d f522d8851a59 How to Add Alt Text to Your Email Images [Quick Tip]

502a6  27eae1cc 87fd 4dde 8512 68f4f8edb1ff How to Add Alt Text to Your Email Images [Quick Tip]

HubSpot’s Inbound Marketing Blog



Leave a Reply