Email Images Blocked by Default: Design for Inboxes

Short answer: A large share of readers see your email with the images switched off, either because the app blocks them until they agree or because they use a text-only view. Design the message so that it makes sense without pictures: put the key words and the main link in real text, give every image a useful alt text, build buttons from code and test the email with images off before you send it.

Why images are often hidden

Remote images in email can be used to track readers, so many mail apps and corporate gateways do not load them until the reader allows it. Some apps load them automatically through a privacy proxy, as discussed in the article on email tracking pixels, but others keep them blocked by default, especially in work accounts. Images may also fail because of a slow connection, a size limit or a blocked domain. And some readers use screen readers or text-only apps, where pictures never appear.

The result is that a message designed as one big picture with a few words on top can arrive as a grey box. The reader cannot see the offer, the button or even who sent it. Many will delete it. Others will mark it as spam. For senders, this is a hidden loss that no report shows clearly.

What goes wrong in image-heavy emails

The whole message is one image. With images off, nothing remains. Filters also treat image-only messages with suspicion, as described in the article on image-only emails.
The call to action is inside a picture. A button drawn in an image cannot be clicked when the image is blocked.
Important details sit in the picture. Dates, prices and codes are lost.
No alt text. The empty box has no description, or the file name appears, which looks careless.
Background images for the main content. Text in white on an image background becomes white on white, which is invisible.
Huge image files. Slow loading and clipping in some apps. See Gmail clipping long messages for size limits that matter.

Design rules that work with images off

Write the message in text first. Draft the subject, the first sentences, the offer and the link as plain text. Then add images as decoration or proof, not as the carrier of the message.
Use live text for headlines and prices. Style it with real fonts and colours, with safe fallbacks. If the picture is missing, the reader still sees the headline.
Make buttons from code. A so-called bulletproof button uses a table cell with a background colour and a text link inside, so that it displays without images. Add padding and a clear colour, and keep the link text specific, such as “View your order”.
Add alt text to every image. For a decorative image, leave the alt empty on purpose. For a meaningful one, describe it briefly, for example “Blue sofa, 20% off until Friday”. Style the alt text with a font size and colour so that it is readable in the empty box.
Set width and height. The layout then keeps its shape when images do not load.
Set a background colour behind images and text. If you must use a background image, give the container a solid colour as a fallback so that text stays legible.
Keep a good balance. A common guide is to include more text than pictures. A short message with one or two images works better than a poster.
Include a plain-text version. Most sending tools let you attach it, and it helps readers and filters.

Preheader and subject still matter

When images are blocked, the first things a reader sees are the sender name, the subject and the preview text. They carry more weight than ever. The guide to subject lines and preheaders explains how to write them so that the message earns an open even when the layout is plain. Put something useful in the preview, not “View this email in your browser”.

Accessibility and good practice

Designing for blocked images is also designing for accessibility. Screen reader users hear the alt text, so it should be accurate and short. Good contrast, a logical reading order and descriptive link text help everybody. Avoid links that say only “click here”. Keep text at a readable size, at least 14 pixels for body copy on mobile, and leave enough space around links for tapping.

Testing before you send

Send a test to accounts in several apps: a webmail service, a desktop app and a mobile app.
Turn images off in each app and read the message. Can you tell what it offers and what to do?
Use the dark mode of the apps and check that text and buttons stay readable.
Check the size of the HTML and the images.
Test the links, including those in the footer, and the unsubscribe link, which must work. See one-click unsubscribe.

Which emails matter most

The more important a message is for the reader, the more it must work without images. Receipts, password resets, shipping updates and security alerts should be mostly text, with a logo as the only image. Marketing messages can use more pictures, but even they should not depend on them. The article on transactional and marketing email shows how these types differ in purpose and in the expectations of readers and filters.

Common mistakes

Sending a flyer saved as an image from a design tool.
Hosting images on a slow or unreliable server, or on a domain that is blocked.
Using a different domain for images from the one in your links, which can look odd to filters.
Forgetting that images need to be served over HTTPS.
Putting the unsubscribe link in an image.

A before and after example

A furniture shop sends a monthly offer as a single large picture: a sofa, the words “Autumn sale up to 30% off” and a drawn button. With images off, readers see an empty frame and the file name. After a redesign, the same message has a text headline in the shop’s colours, two short lines about what is on sale and until when, a button built from code with the words “See the sale”, and the sofa picture below with the alt text “Grey three-seat sofa, now 25% off”. With images blocked, the reader still understands the offer and can click. With images shown, the message looks as rich as before. Over a few sends, the shop notices more clicks and fewer spam complaints, even though the pictures are the same. The gain came entirely from making the email work in the worst case.

Dark mode and other surprises

Blocked images are only one of the conditions that change how your message looks. Dark mode in some apps inverts light backgrounds and text, which can make logos with white backgrounds appear as bright boxes and thin dark text hard to read. Use transparent images where you can, keep strong contrast, and avoid putting small text over a photo. Some apps shrink fonts or reflow tables on small screens. Others strip styles in the head of the message, so key styles should be written inline on each element. The best protection against all of these is to keep the structure simple: one main column, short paragraphs, clear headings and a single main action. A simple design is also easier to maintain and to test than a complex one.

A pre-send checklist

The subject and preview text make sense on their own.
The first screen has real text that states the purpose.
The main button works as code and has specific link text.
Every meaningful image has alt text, and decorative ones have an empty alt.
A plain-text version exists and matches the HTML version.
The message was tested with images off and in dark mode.
The unsubscribe link and your postal details are in text in the footer.

How Site AI Audit helps

Site AI Audit does not review the design of your emails, so it cannot tell you whether a message works without images. It checks the public records that decide whether your mail is trusted and delivered: SPF with its lookup limit, DKIM signatures, your DMARC policy and your MX records. A well-designed message still needs good authentication to reach the inbox. The free check covers up to 50 pages and needs no sign-up. You can run a free check of your website or see the plans for re-checks and alerts.

The bottom line

Treat images as a bonus. Put the message, the offer and the main button in text, describe every picture with alt text and test with images off. An email that works for the reader with no pictures will also work better for filters, screen readers and slow connections.

FAQ

How many people see emails without images?

It varies by audience and app. Some apps block images by default, others load them automatically, and many readers have text-only settings, so you cannot assume that images will be shown.

Is alt text important in email?

Yes. It shows in the empty box when an image is blocked and is read by screen readers. Write short, useful descriptions for meaningful images.

What is a bulletproof button?

A button built from a styled table cell and a text link, with no image. It stays visible and clickable when images are turned off.

Can I use background images?

Yes, with a solid background colour as a fallback and text that does not depend on the image for contrast. Support differs across apps, so test.

Should I stop using images in email?

No. Use them where they help, but make sure that the message works without them.