Image Optimization for Email Newsletters: Mailchimp, ConvertKit, and Beyond

Email is the weirdest surface on the modern web. Different clients render HTML differently, image formats that work on the web get stripped, Gmail caches your images on Google’s servers, and half your audience views everything at 320 px wide on a phone. Image optimization for email has its own rules, and they’re noticeably different from the rules for web pages.

I worked on a weekly newsletter for six years. The learnings below are from dealing with actual rendering bugs across Gmail, Outlook (desktop and web), Apple Mail, Yahoo, and a long tail of less-common clients.

The constraints that make email different

Three things to keep in mind up front:

Images load slowly and often not at all. Most email clients block remote images by default. Your newsletter’s first impression is often text-only with image placeholders. Design for the “images off” state.
Image formats are limited. Safe across all clients: PNG and JPEG. WebP is supported in most modern clients but still unreliable. AVIF is not a safe default yet.
File size matters for reputation, not just speed. Spam filters weigh total email size. Emails over 100 KB often trigger Gmail’s “clipped” message; those over 200 KB start hurting deliverability.

That last point surprises people. You can’t just throw high-resolution images into an email the way you would a blog post. Aggressive optimization is expected.

The size targets that actually work

For a typical newsletter with 3–8 images:

Individual image file size: aim for 50–100 KB each. 150 KB is the absolute ceiling for anything except a hero.
Total email weight (HTML + images): under 100 KB is ideal, under 200 KB is acceptable, over 250 KB starts to risk deliverability penalties.
Hero image: 600 px wide at most. Retina displays get served 1200 px, but nothing wider.
Body images: 500–600 px wide.
Inline icons / bullets: 48 px or smaller.

These are rendered dimensions. The src you specify in the HTML might be double that for retina (1200 px for a 600 px display), but the file size targets stay the same. That means you have to compress aggressively.

The format decision is simpler than web

For email, the format rules are narrower:

Photographs → JPEG quality 75. Retina versions at quality 65.
Logos, icons, illustrations → PNG-8 (indexed color) when the image has few colors, PNG-24 otherwise.
Anything with transparency → PNG.
Don’t use WebP unless your audience is entirely modern Gmail/Apple Mail. Outlook Desktop (which still has meaningful share in corporate inboxes) renders WebP as a broken image.
Don’t use AVIF. Not yet.
Don’t use SVG inline. Most email clients strip it. Convert to PNG for email use.

If you ever need a single image that renders for everyone, default to JPEG with a clean quality setting. The file is larger than WebP would be, but it works everywhere.

Responsive email images: the reality

Email HTML is stuck in the early 2000s in many ways. The <picture> element doesn’t work reliably in Outlook. Neither does srcset. What does work:

Width attributes with CSS max-width

<img src="https://cdn.example.com/images/hero.jpg"
     width="600"
     style="width: 100%; max-width: 600px; height: auto; display: block;"
     alt="Hero illustration for the March newsletter">

The width attribute tells older clients the intended size. The CSS scales the image down on narrower screens. display: block removes phantom spacing below the image in some clients.

Retina via 2× source + CSS scaling

Upload a 1200 px image and display it at 600 px via width/style. This is the standard retina approach for email. The cost is file size — a 1200 px JPEG is roughly 3× the bytes of a 600 px one — so compress more aggressively.

Platform-specific hacks (Gmail, Outlook)

Some ESPs expose Gmail-only CSS or MSO conditional comments for fine-tuned control. Use sparingly. The maintenance burden grows faster than the value.

Hosting: use your ESP’s CDN, not your own

Every major ESP (Mailchimp, ConvertKit, Substack, Beehiiv, Klaviyo, HubSpot) hosts your images on their own CDN. Use that. Don’t link to images on your own website.

Reasons:

ESPs’ CDNs are configured for email-specific optimization.
Links to your own CDN sometimes look suspicious to spam filters.
Gmail proxies all images through Google’s CDN anyway, caching them server-side.
Your site’s load has nothing to do with your newsletter’s delivery.

If you’re writing your own email via the API (Postmark, SendGrid, SES), host images on a CDN built for static assets (Cloudflare R2 + Cloudflare CDN, Bunny CDN). Avoid linking to URLs on the same domain as your app.

The images-off state

Because most clients block images until the user clicks “display images,” your email needs to look OK without them. Two practices:

Alt text that conveys meaning

Treat alt text as the content that appears when images don’t load. A button image showing “Shop the sale” with alt="Shop the sale" still reads as “Shop the sale” when blocked.

Background colors for every image

Set a bgcolor or CSS background-color that matches the image’s average color. When the image doesn’t load, the space stays filled instead of showing a broken-image icon.

<img src="..." alt="Shop the sale"
     width="600"
     style="width: 100%; max-width: 600px; background-color: #e8f5f9; display: block;"
     bgcolor="#e8f5f9">

Do not use text in images

The classic trap. A beautiful illustrated headline as a PNG turns into a blank gray box for half your readers. Use HTML text for headlines. Use images for what only images can do.

Practical compression workflow

For a weekly newsletter with 6 images:

Start with master images at 1200 px wide (for retina display at 600 px).
Open our JPG compressor.
Drop in the 6 masters.
Quality 75 for photographs, quality 85 for anything with text in the image.
Download the compressed versions.
Upload to your ESP’s media library.
Reference them in your email HTML at width="600".

Total email weight stays under 200 KB, deliverability stays clean, and the retina users get a sharp render.

A note on dark mode

Many email clients now invert backgrounds in dark mode, sometimes in ways that make logos unreadable. Two mitigations:

For logos with colored backgrounds, include white or light padding around the graphic so inversion still works.
For detail-critical images, use a PNG with transparency and test both modes.

Apple Mail, Gmail (mobile), and Outlook all handle dark mode differently. Test before sending.

Mailchimp / ConvertKit / Beehiiv specifics

Mailchimp

Hosts images on its own CDN (gallery.mailchimp.com).
Its image editor strips EXIF.
Its automatic mobile-image resizing is usually reasonable; you can still upload pre-sized masters for more control.
Max attached image: 1 GB (practically anything).

ConvertKit

Hosts on embed.filekitcdn.com.
No automatic resizing — you’re responsible for serving the right dimensions.
Image block has a “full width” option that scales to the container. Use it.

Beehiiv

Hosts on media.beehiiv.com with auto-retina variants.
Defaults to WebP with JPEG fallback for modern clients. This is one of the better defaults in the space.

Substack

Hosts on substackcdn.com.
Aggressive caching; new image edits sometimes don’t refresh in subscriber inboxes for hours.
Default rendering is usually fine but visibly compresses retina images.

Common mistakes

Embedding a 3 MB hero photo at full resolution and hoping Gmail’s clipping won’t kick in.
Using text images instead of HTML text, then wondering why open rates are fine but click rates are bad (spoiler: half your audience sees no headline).
Linking images from the same domain as your site, triggering deliverability flags.
Testing only in one client. At a minimum, test your template in Gmail (web and mobile), Outlook (desktop), and Apple Mail.
Forgetting width attributes, which breaks layout in Outlook Desktop.

The bottom line

Email image optimization is a narrower game than web. The targets:

600 px wide rendered, 1200 px source for retina.
JPEG at quality 75, PNG for logos and transparency.
50–100 KB per image.
Under 200 KB total email weight.
Hosted on your ESP’s CDN.
Always a meaningful alt and a fallback background color.

For compression, our JPG compressor and PNG compressor handle email-tier compression cleanly in the browser. Drop files in, set quality, download, upload to your ESP. No round-trip to another server.