Designing emails that still work when images are blocked
Many readers see your email with images off. How to build messages that stay clear and clickable without them: alt text, real buttons, and a safe layout.
On this page(11 sections)
- Why images do not load
- Rule 1: the important thing is text
- Rule 2: write alt text that carries meaning
- Rule 3: build buttons from text, not pictures
- Rule 4: set a background color behind images
- Rule 5: set width and height
- Rule 6: always send a plain-text part
- Rule 7: do not rely on images for tracking
- Rule 8: test the blocked state
- A short blocked-image checklist
- Key takeaways
You send a polished HTML email: a logo at the top, a hero image, a button drawn as a picture. Then a customer forwards a screenshot of what they actually saw: a grey box, a broken-image icon, and no way to tell what to click.
Images are not guaranteed to load. A reader may have remote images off by default, a corporate filter may strip them, a screen reader may skip them, or the connection may be slow. An email that depends on its pictures fails for all of those people. This post shows how to build messages that still do their job.
Why images do not load
- Blocked by the mail app. Some clients hold back remote images until the reader allows them, especially for senders they do not know.
- Blocked by policy. Company mail systems often strip or rewrite images.
- Read in a text or low-power mode. Preview panes, watches and plain-text views show no pictures.
- Read with a screen reader. The reader hears the alt text, or nothing.
- Failed to fetch. A moved file, an expired link or a slow server leaves an empty box.
Treat images as an enhancement. The message must make sense without them.
Rule 1: the important thing is text
If the email is about a password reset, a receipt, an appointment or a decision, the key facts belong in real text: what happened, what the reader needs to do, and by when.
Test: if you removed every image, could the reader still do what you ask? If a coupon code, an amount or a date lives only inside a picture, move it into text.
Rule 2: write alt text that carries meaning
Alt text is what shows when the image does not. Make it count:
| Image | Weak alt | Better alt |
|---|---|---|
| Logo | "image1" or empty | "Koltrix" (the company name) |
| Hero photo that is decoration | "photo" | Empty alt, so it is skipped |
| Chart | "chart" | "Orders rose from 40 to 65 in March" |
| Button drawn as an image | "click here" | "View your invoice" |
Use empty alt (alt="") for purely decorative pictures so screen readers skip them. Never leave the attribute off: some clients then show the file name. Our accessibility checklist for plain and HTML email goes further.
You can also style the alt text itself with a font color and size so it reads cleanly in a blocked state, though support varies by client.
Rule 3: build buttons from text, not pictures
A button made from an image disappears when images are off, and with it your call to action. Build it from a table cell with a background color and a styled link:
- Give the link a visible background color, padding and bold text.
- Keep the link text clear ("Reset password", not "Click").
- Repeat the plain URL in the text below it, for readers whose client strips styling.
A background color on the cell stays visible even when a background image is blocked, so always set one. The constraints of HTML in transactional email explain why table layouts are still the safe choice.
Rule 4: set a background color behind images
If the hero image is dark with white text on it, a blocked image leaves white text on a white page. Fix it by:
- Setting a background color on the cell that matches the image tone.
- Keeping essential text outside the image, in the HTML.
- Choosing a text color that reads on both the fallback color and the image.
Rule 5: set width and height
Declare the width and height of each image in the HTML. When the image is blocked, the space is held, so the layout does not collapse and the text does not jump when the reader allows images. Keep images at a sensible width for phones and make sure the file size is small enough to load on a weak connection.
Rule 6: always send a plain-text part
A plain-text alternative is the final fallback for clients, filters and readers that do not show HTML at all. It should carry the same facts and the same link. See why the plain-text part still matters.
Rule 7: do not rely on images for tracking
An open-tracking pixel is an image. When images are blocked it never loads, and some clients load it automatically, which makes the count unreliable. Do not use opens as a measure of whether the message worked. Clicks, replies and completed actions say more. Our post on lifecycle email metrics covers what to watch instead.
Rule 8: test the blocked state
Before you ship a template:
- Send a test to an address in at least two mail apps.
- View it with remote images off, and read it top to bottom.
- Check that every link and button is still visible and understandable.
- Check it on a phone, in a narrow window.
- Run it through a screen reader once, listening to what is said for each image.
If your tool has a test-send feature, use it for every template change. A note in the template history on what you checked helps the next person; see email template versioning.
A short blocked-image checklist
- Key facts and the main action are in text.
- Every image has meaningful or deliberately empty alt text.
- Buttons are built from cells and links, not pictures.
- Dark image areas have a fallback background color.
- Width and height are set on every image.
- A plain-text part carries the same message.
- You tested with images off.
Key takeaways
- Assume some readers will never see your images.
- Put every fact and every call to action in real text.
- Write alt text that carries meaning, and leave it empty only for decoration.
- Build buttons from styled links with a background color.
- Test the blocked state before you ship.
Start with Koltrix
Your domain, one inbox, and an API that sends.
A team inbox where AI sorts and drafts (nothing is sent without your click), plus the transactional API and SMTP relay your product sends with. 7 days free, no card.
