Your newsletter looked fine in the editor and fine when you sent yourself a test. Then a subscriber forwarded a screenshot and the hero image was a broken icon, the layout had blown out past the screen, and your headline was sitting on a grey rectangle that said nothing. Email is a different surface from the web, and images break there for reasons that never come up when you publish a webpage.
This is a troubleshooting guide for that exact problem: why email images fail, how to spot which failure you're hitting, and how to fix and prevent each one. If you've already worked out which image belongs on each page of your business website, most of the instinct carries over. The constraints don't.
Why email images break when website images don't
A webpage and an email inbox render images in very different conditions. On the web, you control the page, the browser is modern, and the image loads as part of the layout. In email, none of that is reliable.
The main reasons an image that works on your site breaks in an inbox:
- Images can be turned off by default. Many email clients and corporate setups block remote images until the reader chooses to load them. When that happens, your image simply doesn't appear. If you designed around the picture, the email looks empty or confusing.
- Email layout is fragile. Email clients use old, inconsistent rendering engines, so a wide hero or a clever multi-column block that's perfect on your site can wrap, stretch, or overflow in an inbox.
- The reading column is narrow. Most newsletters render in a single, narrow column, especially on phones. A landscape web hero gets shrunk down until the detail is unreadable.
- File weight is felt more. Images load inside the reader's mail app, often on mobile data, often in a long list of other messages. A heavy image is slower and more noticeable here than the same file on a webpage a visitor chose to open.
The fix that prevents all of these is the same mindset: treat email as its own surface with its own rules. Don't reuse your website hero and hope it survives the trip. Choose or resize an image for the inbox specifically.
Sizing and file weight for inbox load
Two separate things matter here, and people mix them up. Display width is how wide the image shows in the layout. File weight is how many kilobytes the file is. You manage them independently.
Safe widths for a narrow column
Newsletter content-column widths vary by template and sending platform. Inspect your own builder's desktop and mobile previews, then export to the largest width the image actually occupies. As a working rule:
| Image role in the email | Sensible display width | Why |
|---|---|---|
| Full-width header / banner | The column width (commonly ~600px) | Fits edge to edge without overflow |
| Inline content image | Column width or slightly less | Stays inside the reading area |
| Side-by-side with text | Half-column or less | Two columns often collapse on mobile, so keep each piece small |
| Small accent / icon | 50–150px | Recognizable at a glance, light to load |
Export the image at about twice the display width so it stays sharp on high-resolution screens, then let the email constrain it down. An image meant to show at 600px is usually fine exported around 1200px wide. Going much larger than that mostly adds file weight without adding visible sharpness.
Keeping file weight down
Heavy images load slowly inside a mail app and can make the whole email feel sluggish. Aim to keep individual newsletter images modest in file size rather than shipping a full-resolution web export.
- Resize first, compress second. Shrinking a 3000px image down to the size you actually display removes most of the weight before you even compress.
- Use JPG for photographic images and PNG for flat graphics, logos, or anything with sharp edges and few colors.
- Compress to the point where the image still looks clean. If you want the longer version of this, the same principles from website work apply, and our image sizes and aspect ratios cheat sheet gives you target dimensions to aim for.
- Watch the total. Several images that are each fine can add up to a slow, heavy email. Keep an eye on the whole message, not just one picture.
Designing for narrow, single-column layouts
A wide, detailed web hero loses its point when it's squeezed into a phone-width column. The subject gets tiny and the message disappears.
Design for the column you actually have:
- Favor simpler crops. A close, uncluttered subject survives shrinking better than a busy wide scene. If the original is a sweeping landscape, crop in on the part that matters.
- Keep important detail away from the edges. Some clients add padding or trim differently, so don't put the key part of the image right at the border.
- Avoid baking text into the image. If you put your headline inside the picture, it shrinks with the picture and can become unreadable, and it vanishes entirely when images are blocked. Keep headlines as real text in the email and let the image support them.
- Don't rely on side-by-side image-and-text blocks. They frequently stack into a single column on mobile, which changes the reading order. Stacked, full-width blocks behave more predictably.
The same "match the picture to the slot" thinking from which free image types fit which pages applies here, except the slot is narrower and less forgiving than any page on your site.
Images-off fallbacks: the part that actually stops things breaking
This is the most important section, because it's the failure that makes a newsletter look broken to a real reader. When an email client blocks images, your reader sees whatever you put in place of the picture. If you planned for that moment, the email still reads cleanly. If you didn't, they see a broken icon and a blank space.
Two things carry the email when images are off:
Alt text
Alt text is the words shown in place of a blocked image. In email it does double duty: it's read aloud by screen readers for accessibility, and it's the visible text many readers see before they load images at all.
Write alt text that says what the image is and why it's there, not "image" or "header.jpg". For a header showing a product, "Spring collection of ceramic mugs" tells the reader something useful even with images off. If you want help shaping these, how to write alt text for website images walks you through it, and the guidance carries straight over from the web.
Background colors behind images
When an image is blocked, the space it occupied is left behind. If that space has no background color, you may get plain alt text on a stark white block, sometimes with a broken-image marker. Setting a background color on the container means the blocked state still looks intentional. Pick a color from your brand so an images-off email still feels like you.
A quick way to test this: turn off image loading in your own email client, send yourself the newsletter, and read it as if the pictures will never appear. If it still makes sense, you've solved the "doesn't break" problem. If it falls apart, your design is leaning on images that some readers will never see.
A header image still earns its place even when some readers see it as alt text, the same way a blog header image earns its place on a page. The job is to support the message, not to be the only thing carrying it.
Choosing simple compositions that read at small sizes
Inbox images are small and often viewed for a second on a phone. A composition that's busy or subtle on a large screen turns to mush at email size.
What holds up small:
- One clear subject. A single focal point reads instantly. A cluttered scene becomes a smudge.
- Strong, simple contrast. Clear separation between subject and background survives shrinking and compression.
- Few competing details. The more the eye has to sort through, the worse it does at thumbnail scale.
- A consistent look across the email. Pictures that share a style and palette feel like one message instead of a collage.
When you pick an image, judge it at the size it will actually appear. An image chosen to read at a narrow column width is a different image from a web hero cropped down and hoped over, and the difference shows in the inbox rather than in your editor.
On licensing, so there's no doubt before you send to a list: Picdrome images are free to use for personal and commercial website projects, including newsletters and email campaigns, subject to the Picdrome license terms. They are AI-generated, so never present an AI person as a real subscriber or team member. For the full terms, see the Picdrome Image License. This is general information, not legal advice.
Common Questions
Why does my image show on desktop but break on a phone?
Usually width. A picture sized for a wide desktop column overflows or scales oddly in a narrow phone column. Size for the narrow case and the wide case takes care of itself.
Should I just embed images so they can't be blocked?
Embedding (inlining the image data) can avoid the remote-image block in some clients, but it adds weight to every send and isn't universally supported. The more reliable approach is to design so the email still works when images are off, using alt text and a background color, rather than trying to force every image to load.
How heavy is too heavy for a newsletter image?
There's no single hard limit, and it varies by platform. The practical answer: resize to the width you actually display, compress until it still looks clean, and watch the total weight of all images in the email rather than any one file.
In Plain English
Email is its own surface, not your website. Images break in inboxes because clients can block them, layouts are fragile, columns are narrow, and file weight is felt more on mobile. This guide helps anyone sending a newsletter — founders, freelancers, e-commerce sellers — diagnose and prevent those failures. Use it whenever you're building or troubleshooting a send. The core move is to size images for a narrow column (commonly ~600px), keep file weight modest, and make sure the email still reads with images turned off by writing real alt text and setting a brand background color. Test by disabling image loading on yourself before you hit send. Now that your newsletter sends are working, size your next header from the image sizes and aspect ratios cheat sheet before you place it.