Email Marketing Images: Cutouts, Compression, and Client Support

Most modern clients (Apple Mail, Gmail web, Gmail mobile, iOS Mail) render PNG transparency correctly. The cutout appears with no background, and the email background colour shows through.

Outlook desktop (Windows) historically renders PNG alpha against a white matte. This is the single most common rendering failure. Users on Outlook 2016 or 2019 see a white box behind every cutout, which breaks any dark-background email design.

Older versions of Samsung Email and some Android clients also flatten transparency to white. The exact behaviour varies by client and version.

The robust approach: composite the cutout over the exact background colour you are using in the email. If the email background is #F8FAFC, save the cutout composited over #F8FAFC. The result looks identical in every client because there is nothing to flatten.

For emails with a hero image on a coloured background, this means saving the hero as a JPG or PNG with the background baked in. No transparency. No client-specific rendering risk.

The exception is a cutout that sits on top of another image (a cutout of a person over a lifestyle photo, for example). In that case you cannot bake the background into the cutout. Instead, flatten the composite into a single image before export — the cutout lives in the composite, not as a separate layer.

Email images should be aggressively compressed. Gmail clips messages over 102KB, which means the actual HTML of the email is capped, and any inline base64 images count against that cap. Keep the total size of the HTML plus inline images under 100KB.

For images referenced by URL (the standard approach), aim for under 200KB per image and under 1MB total per email. JPEG at seventy to seventy-five percent quality is usually the right choice for photographic content. PNG is only worth the size when you specifically need transparency (which, per the section above, you usually do not).

WebP is a trap for email. Support in 2026 is around seventy percent. The remaining thirty percent shows a broken image unless you provide a fallback, which doubles the size of the HTML. Do not use WebP in email.

Retina displays are now the majority of email opens. A 300-pixel-wide image displayed at 300 pixels on a retina display looks blurry because the display is actually rendering it at 600 physical pixels.

Export every image at 2x the CSS display size. A 300-pixel-wide logo should be a 600 by 600 image, sized to 300 by 300 in the HTML. A 600-pixel-wide hero should be 1200 physical pixels.

This is the single biggest quality improvement you can make to an email in 2026. It also increases file size, which is why the compression guidance above matters.

Test in at least five clients before sending: Apple Mail on iOS, Gmail on web, Gmail on Android, Outlook desktop on Windows, and Outlook on web. If your email renders correctly in those five, it will render correctly for the large majority of your list.

For any critical send (a launch announcement, a payment reminder), test in Outlook desktop specifically. The rendering engine there is the most likely to break your layout.

Tools that automate this: Litmus, Email on Acid, and Testi.at. All three have free tiers sufficient for occasional testing.