Size and weight: the limits that actually break emails
The single most damaging image mistake in email is not ugliness — it is weight. Gmail clips any message whose HTML body exceeds 102 KB, hiding everything past the cutoff behind a "[Message clipped] View entire message" link. That link routinely lands right on top of your unsubscribe footer and tracking pixel, so a clipped email hurts both deliverability signals and compliance at the same time.
Image files themselves count against load time and mobile data, not the 102 KB HTML budget — but a bloated hero still causes slow, janky rendering and higher abandonment. Keep individual images comfortably under 1 MB, and aim far lower for anything above the fold.
| Image role | Display width | Export width (2x) | Target file size |
|---|---|---|---|
| Full-width hero | 600px | 1200px | < 200 KB |
| Two-column product | 290px | 580px | < 100 KB |
| Three-column grid | 190px | 380px | < 70 KB |
| Logo / icon | 150px | 300px | < 30 KB |
Export at 2x the display size so images stay sharp on Retina and high-DPI phone screens, then compress. The standard email canvas is 600px wide, so a full-bleed hero should be exported at 1200px and constrained to 100% width in the HTML.
The 102 KB clip limit is the sum of your HTML — inlined CSS, hidden preview text, and long tracking URLs all count. If you are getting clipped, trim redundant markup before you trim content.
File formats: what to use where
Email is stuck a decade behind the web on format support. Next-gen formats that dominate storefronts do not reliably render in inboxes, so your storefront format strategy does not transfer.
Avoid in email
- WebP / AVIF — no support in Outlook desktop and inconsistent elsewhere
- SVG — blocked by most clients for security
- Background images — stripped by Outlook, unreliable everywhere
Safe in email
- JPEG — photographic product shots with a background
- PNG-24 — cutout products needing transparency
- GIF — simple animation, universally supported
The practical rule: JPEG for full-frame lifestyle and on-model shots, where a slight compression artifact is invisible against busy backgrounds, and transparent PNG for isolated products that need to float on your brand color or survive dark mode (more on that next). Reserve GIF for genuine motion — a color-variant cycle or a subtle "new" badge — not as a still-image format, where it produces larger files than JPEG.
Dark mode: why your white-background photos create halos
As many as 80% of users enable dark mode when a client offers it, and it is now the default failure point for product imagery. The problem is mechanical: a product shot on a pure-white studio background sits on a white rectangle. When the surrounding email background flips to near-black, that white rectangle stays white — leaving your product stranded on a glaring slab of light that screams "pasted in."
There are two durable fixes, and both start in production rather than in the email builder:
- Cut out the product on transparency. A clean-edged transparent PNG lets the product sit directly on whatever background the client renders — white in light mode, dark in dark mode — with no rectangle at all.
- Shoot or retouch onto a neutral mid-gray. A mid-tone background (around #E8E8E8 to #EEEEEE) reads as intentional in both modes and hides the seam far better than pure white.
Add a 1–2px padding of transparent space or a soft shadow around cutout products. It prevents the anti-aliased edge from looking harsh against a dark background and keeps the product from appearing to "touch" the email frame.
This is exactly where a clean, catalog-wide cutout workflow pays off twice: the same transparent product images that render flawlessly in dark-mode email also drop straight onto lifestyle backgrounds, ad creative, and marketplace listings. Tools like Retouchable can batch-produce consistent cutouts and mid-gray backgrounds across an entire catalog, so your email team is not hand-masking hero shots the night before a send.
Layout and the golden rule: never sell with images alone
Around 43% of Gmail users and a meaningful slice of Outlook users read with images off by default. If your price, headline, and CTA live inside a flattened image, those readers see a blank space and a broken-image icon. Every campaign should survive with images disabled.
Concrete layout habits that hold up across clients:
- Live text, not baked-in text. Keep headlines, prices, and CTAs as real HTML text over or beside the image, never inside it.
- Descriptive alt text on every image. When images fail, styled alt text ("Sculpt Knit Dress — $128") keeps the message legible and adds accessibility and inbox-preview value.
- Single-column, mobile-first. Two- and three-column product grids should stack on mobile. Buttons need a 44×44px minimum tap target and 16px+ body text.
- One primary CTA. Product images guide the eye; a single dominant button captures the click.
Build CTAs as HTML/CSS buttons, not image buttons. An image-based "Shop Now" disappears entirely when images are blocked — taking your conversion path with it.
A production workflow that keeps campaigns consistent
The difference between a polished campaign and a ransom-note of mismatched crops is a repeatable prep step, not talent. Standardize the image layer once and every future send inherits it.
| Step | Why it matters |
|---|---|
| Standardize crop & framing | Consistent product scale across a grid looks intentional, not chaotic |
| Cut out or mid-gray background | Survives dark mode and reuses across channels |
| Export at 2x, then compress | Sharp on Retina without blowing up load time |
| Name files descriptively | Faster asset reuse and cleaner alt-text generation |
| Test light + dark, images on/off | Catches the four ways a photo can break before subscribers do |
Before any broadcast, run a seed test through the clients your list actually uses — Gmail (app and web), Apple Mail, and Outlook — and view each in both light and dark mode with images toggled on and off. That is four quick checks that catch nearly every image failure mode described above.
Cutout product images built for email double as your source assets for lifestyle scenes, paid social, and marketplace listings. Producing them once, cleanly, is the highest-leverage image decision an e-commerce team makes.