Email is not the web

Anyone coming from web-image optimization is in for a surprise on their first newsletter campaign. Outlook 2024 renders with the Word engine, Apple Mail has aggressive Mail Privacy Protection since iOS 15, Gmail blocks images by default. A pipeline that shines in the browser often looks glaringly different in an email client.

The client landscape 2026

  • Apple Mail (45% market share in 2026): CSS-tolerant, handles dark mode automatically, Mail Privacy Protection loads images via an Apple proxy.
  • Gmail (30%): modern CSS support, blocks images from external senders until user action. Caching via a Google proxy.
  • Outlook Desktop (12%): renders with the Word engine, knows no modern CSS. WebP is supported since Outlook 365 build 2024, AVIF is not.
  • Yahoo, AOL, others (13%): roughly HTML-tolerant, often weak CSS support.

The format problem

Recommended strategy for 2026:

  • Default format: JPG. Universally understood, good compression.
  • PNG only for logos and UI elements. Alpha transparency is supported in most clients — but Outlook has trouble with semi-transparent PNGs (often shows a gray background).
  • GIF for animation. Animated WebP works in Apple Mail and Gmail, not in Outlook. Animated GIF runs everywhere but is big.
  • WebP, AVIF: only as a fallback strategy. With <picture> it works in Apple Mail and Gmail; in Outlook the <img> fallback is served.
  • SVG: usually not. Outlook and some Yahoo clients don't display SVG. Inline SVG works in Apple Mail and Gmail.
300 × 250 — Rectangle
Cookie-Banner ausstehend

Dark mode in emails

Apple Mail automatically inverts background colors in dark themes — but images with a baked-in white background (logos!) stay white. That gives a brand logo that looks like a sticker on a black background.

Three solutions:

  • Logo with a transparent background. PNG with alpha — works if the logo itself is dark-mode-capable (i.e. not pure black).
  • Dark-mode variant via @media queries. Outlook ignores it, Apple Mail and Gmail Mobile respect it:
<style>
  @media (prefers-color-scheme: dark) {
    .logo-light { display: none !important; }
    .logo-dark  { display: inline !important; }
  }
</style>

<img src="logo-light.png" class="logo-light" alt="Brand">
<img src="logo-dark.png" class="logo-dark" alt="Brand"
     style="display:none">

More on dark-mode strategies in general in our dedicated dark-mode post.

Image blocking by default

Gmail and Outlook block images from untrusted senders until the "show images" action. Consequence: the most important information must not be in the image. Otherwise recipients see an empty email.

Practical rules:

  • Headline always as HTML text. Image headers are an anti-pattern.
  • Call-to-action always as an HTML button, not an image button.
  • Maintain alt text. With blocked images the alt text is shown — usually at image size, often as the only visible content.

Bandwidth — the underrated trap

An average marketing email should stay under 100 KB. Three reasons:

  • Gmail clipping. Over 102 KB Gmail cuts content and shows "Message clipped" — the CTA button at the end vanishes.
  • Mobile data. 30% of emails are read on mobile — 1 MB newsletters cost recipients real money in roaming situations.
  • Spam score. Spam filters weight large emails slightly more negatively.

In practice: scale images to 600 px width (standard newsletter width), JPG at quality 75–80, aim for 50–100 KB per image.

300 × 250 — Rectangle
Cookie-Banner ausstehend

Spam filters and image-to-text ratio

Classic anti-spam advice: the image-to-text ratio should be balanced. A pure image email (typically "one graphic with the complete content") is often flagged as spam, because spammers used to do this to bypass text filters. Recommended minimum text share in 2026: 40%.

Hosting for email images

Images are referenced in HTML mails via <img src="https://...">. Where to host?

  • At the mailing provider (Mailchimp, Brevo, Klaviyo). Simple, but lock-in.
  • Your own CDN. More control, your own statistics, no lock-in. Tip: a separate hostname (mail-img.your-domain.com) so tracking pixels are clearly separated.
  • Image CDN with dynamic delivery. Cloudinary, Imgix can serve different image sizes per client. Worth it for large senders.

Apple Mail Privacy Protection

Since iOS 15 (2021), Apple Mail preloads images via an anonymous Apple proxy — without the user opening the email. Consequence: open-rate tracking no longer works for Apple Mail users. Ignore that and you see 40–60% Apple Mail open rates that mean nothing anymore.

Pragmatic alternative in 2026: link-click tracking as the primary metric, open rate as a secondary estimate with an Apple correction.

300 × 250 — Rectangle
Cookie-Banner ausstehend

Animation: GIF vs. CSS

Animation in emails is in demand — but complex:

  • Animated GIF: universal, but big. A 3-second loop is quickly 500 KB. One frame is rendered as static in Outlook.
  • CSS animations: work in Apple Mail and Gmail Web, not in Outlook Desktop and Yahoo. A fallback is needed.
  • HTML5 video (autoplay): works in Apple Mail (with a click to start) and some other clients. Outlook ignores it completely.

Recommendation: GIF with a subtle animation as the default; the first frame must show all important content (for Outlook).

Checklist before sending

  1. All images with meaningful alt text?
  2. Total email under 100 KB?
  3. Headline and CTA as HTML text, not an image?
  4. Logo dark-mode-capable?
  5. Images scaled to 600 px (or retina 1200 px)?
  6. Tested in Litmus or Email on Acid across at least 10 client variants?
  7. Tested with blocked images (does the email still make sense)?

Sources

Email on Acid · Litmus · Gmail Help — Images · Apple — Mail Privacy Protection · Microsoft — Outlook Rendering · Can I Email · HubSpot — Email Marketing Statistics.