Email Image Best Practices: Size, Alt Text, and Optimization
File sizes that load on mobile data, the images-off default, and the ratio of image to text that trips filters.
On this page
The short version
- Total message weight matters. Gmail clips messages past a size threshold, and a clipped email hides the footer — including the unsubscribe link.
- Set explicit width and height on every image. Without them the layout reflows as images load, and collapses entirely when they are blocked.
- An email that is one large image is the single clearest pattern filters treat as suspicious, and it is unreadable with images off.
Images in email have three separate constraints that get discussed as one: how heavy the message is, how the layout behaves while they load, and what happens when they never load at all. They have different fixes and different consequences.
The third is the one that decides whether the email works, because images are blocked by default in several environments and on first open in others.
The three numbers
~102KB
Where Gmail clips the message
Measured on the HTML, not the images
1KB
Roughly what a tracking pixel costs
Not the thing making you heavy
2×
Retina factor for image assets
Serve at twice the display width
Clipping is a footer problem
Gmail truncates messages whose HTML exceeds roughly a hundred kilobytes, replacing the remainder with a link to view the rest. What gets cut is the bottom of the email — which is where the footer lives, and therefore where the unsubscribe link and the postal address live.
That has two consequences. Readers who wanted to unsubscribe cannot easily, so some of them use the spam button instead. And a compliance element you are required to include is not being shown.
The weight comes from the HTML itself rather than from the images, so the fixes are markup fixes: strip comments and unused CSS, avoid deeply nested table structures where a simpler one works, and be careful with platforms that inject large blocks of tracking markup per link.
Dimensions, always
Every image needs width and height attributes in the markup, not only in CSS. Clients that strip styles still honour attributes, and without them an image occupies zero space until it loads and then shoves everything down — or occupies zero space permanently when blocked, collapsing the layout into an unreadable stack.
For retina displays, export at twice the display width and set the attributes to the display width. The file is larger and the result is sharp on the devices most of your list is holding.
Format by purpose
| Content | Format | Why |
|---|---|---|
| Photograph | JPEG | Continuous tone compresses well |
| Logo or flat graphic | PNG | Sharp edges, and transparency where needed |
| Animation | GIF | Widely supported; first frame must stand alone |
| Anything modern | Avoid WebP and AVIF | Support is inconsistent, failures are silent |
The last row is the one that catches people coming from web work. A format that degrades gracefully in a browser simply does not appear in an email client that lacks it.
The first frame of an animation
Some clients show only the first frame of an animated GIF. If your animation reveals the offer at the end, those readers see the setup and never the punchline.
Build the first frame so it works as a still image carrying the whole message, and treat the animation as enhancement. This is the same principle as the images-off rule applied one level down.
Never build an email as one image
It is tempting because it guarantees the design renders identically everywhere. It also guarantees the email is blank for anyone with images off, invisible to a screen reader, unsearchable, untranslatable, and carries an image-to-text ratio that is among the clearest patterns filters weigh.
Every argument for it is a rendering argument, and rendering is the one thing a well-built table-based email already handles.
Image check
- Rendered HTML measured at send size, comfortably under the clipping threshold
- Every image has width, height and alt text
- Assets exported at twice display width for retina
- No WebP or AVIF
- First frame of any GIF works as a still
- The email is readable and actionable with every image blocked
- Images are hosted somewhere stable, not on a server that may be rebuilt
Frequently asked questions
How heavy can an individual image be?
Keep hero images under a couple of hundred kilobytes and the total load reasonable — the constraint is mobile data and slow connections rather than a client limit. The clipping threshold applies to HTML, not to image weight.
Should images be hosted by the email platform?
Usually yes. Platform CDNs are stable, and images hosted on your own site disappear if that site is rebuilt, moved or compromised — taking every archived email with them.
Do background images work?
Inconsistently, and Outlook needs special markup for them. Always set a background colour underneath so the content stays readable where the image does not appear.