Images in Email: Alt Text, File Size and Image-Only Traps

Customer opens your newsletter. Sees nothing. Nine times out of ten that’s because their email client hasn’t loaded the images yet, and an email built as one big picture has nothing else to fall back on. Plenty of apps hold back images in email until the reader says yes. So if your designer ships the whole newsletter as a single graphic, those readers get a blank message. Below I’ll walk through how image blocking works, how to write alt text, how to keep files light, how to size images for phones and retina screens, and how to test before you send.

Why do some customers see a blank email?

Some mail apps and corporate setups hide images by default or block remote images from loading. Result? An image-only email looks empty. That’s normal behaviour, not a bug in your email. Privacy settings, security policies, client defaults - all of these play a part. The reader might get an empty frame, a broken-image icon, or your alt text (if you bothered to write any). And every client shows this stuff differently, at different moments. A preview in one app tells you nothing about the rest.

The image-only email trap: why one big graphic is risky

Put the offer, the prices and the button inside a picture, and when that picture fails, none of it reaches the customer. Simple as that. Spam filters and mail clients each judge content their own way, and an email with no live text gives them almost nothing to go on. Text baked into an image can’t be selected, searched, translated or read aloud by a screen reader either. And on a phone? People end up pinching and zooming to read tiny type squeezed into a wide graphic. Nobody enjoys that.

Flip it around. Keep headlines, prices and calls to action as live HTML text, and let the images back up the message instead of carrying it. The email still makes sense with pictures hidden. When they do load, it just looks better.

How to write email image alt text that still sells

Alt text is the short description a client shows when an image doesn’t load (screen readers read it aloud, too). Think of it as backup copy for whatever the image is saying. A few rules I stick to:

• Describe what the image says or does, like the offer, not the file name like “banner1.jpg”.
• Keep it short. A phrase, not a paragraph.
• Leave alt empty for purely decorative stuff like spacers and dividers.
• For linked images, describe where the link goes.

Product photo with “shoe” as alt? Weak. “Men’s brown leather hiking boot” actually tells the reader what they’re missing. Same with a sale banner: “sale banner” says nothing, but “Autumn sale: 20% off all jackets until Sunday” still sells even with the picture hidden (swap in your real offer, obviously). I’d also run accessibility checks before sending so gaps like these get caught early rather than in someone’s inbox.

Email image file size: keeping images light

Smaller files load faster on mobile data and keep the whole email lighter, which some clients and filters handle better. Is there one official size limit? No. Each client and filter sets its own thresholds, so the goal is files as light as possible without looking rough:

1. Export images at the size they’ll actually be displayed.
2. Pick the right format: JPG for photos, PNG for flat graphics and transparency, GIF only for simple animation.
3. Compress every file with an image tool before uploading.
4. Don’t stack a pile of heavy images in one email.

Compression happens before upload, in the designer’s own software or whatever tool the shop owner uses. So make it part of the handover. Just ask for it.

Width for mobile and retina images in email

Set images to scale down to the screen width, and export them at roughly twice their display size so they stay crisp on high-density screens. Retina and similar displays cram more pixels into the same space, which is why an image exported at normal size can look soft or blurry there. The catch? Weight. A double-size image is sharper but heavier, and that drags you straight back to compression.

Set the width in the HTML or in your builder so the image never spills past the edge of a phone screen. And keep important text out of images that shrink, because small type goes unreadable fast. Our guide to designing mobile-responsive emails goes deeper on layout.

Test with images off before you hit send

Before every campaign, preview the email with images turned off and on a few different devices. That’s how some of your customers will actually see it, so you might as well see it first. Quick checklist:

• Does the message make sense with no images at all?
• Is the call to action a live button or text link?
• Does alt text show up where the images should be?
• Can you read the text on a phone without zooming?

Also get into the habit of keeping a plain text version for clients and readers who prefer it. In MailCraft you can upload images inline in the drag and drop builder and check the preview across devices before sending. And MailCraft builds the plain text fallback for you automatically, so that’s one less thing to remember.

Bottom line: images in email work best as extras on top of a message that already makes sense as text. When you brief your designer, ask for three things. Live text for headlines, prices and buttons. Useful alt text on every meaningful image. Light files exported at the right size. Do that, and no customer stares at a blank screen, whatever their settings.

FAQ