How to Optimize Images for Email Newsletters
Email images that are too large get clipped or blocked. Here are the right sizes, formats, and file sizes for Mailchimp, ConvertKit, and Gmail.
Two months ago I sent a product update newsletter to my 1,200 subscribers. Five images in the email. Looked great in the preview. Then I checked the analytics and saw that only 58% of recipients even saw the CTA button at the bottom. Gmail had clipped the message because the total payload was too heavy.
That one email taught me more about image optimization than a year of reading blog posts. Here’s what I fixed and what the actual numbers look like.
Email size limits that matter
Gmail technically accepts emails up to 20MB. But here’s the catch: if your message exceeds roughly 102KB of HTML content, Gmail clips it and shows a “[Message clipped] View entire message” link. Most people never click that link. Your carefully designed footer, your CTA, your social links, all gone.
Outlook is stricter in a different way. Large images sometimes just don’t load, or they trigger security warnings that scare people off. Mobile apps from Yahoo and AOL have similar issues.
The safe target? Keep your total email under 500KB including all images. For individual images, aim for under 100KB each. If you can get them to 50-70KB, even better.
The right dimensions for each email image slot
Email templates are usually 600px wide. That’s the standard. Going wider means your images get squished or cause horizontal scrolling on mobile. Going narrower is fine, but know the common slots.
| Image type | Dimensions | Typical use |
|---|---|---|
| Hero banner | 600 x 300px | Top of email, announcement or promo |
| Product image | 300 x 300px | Product showcase, grid layout |
| Full-width feature | 600 x any (keep under 400px tall) | Blog post preview, story feature |
| Thumbnail | 150 x 150px | Product grid, icon-style layout |
| Sidebar graphic | 200 x 200px | Secondary content, tips or quotes |
The height values are flexible. Just don’t make people scroll through a towering image to reach your text. I try to keep the height under half the width. A 600x200 banner works better than a 600x800 one.
My optimization process (three steps)
1. Resize to the correct width first
Don’t upload a 4000px wide photo and hope the email platform shrinks it. The subscriber still downloads the full file even if it displays at 600px wide. That wastes bandwidth and triggers clipping.
I take my original image and resize it to 600px wide for full-width slots. For product shots, I resize to 300px on the longest side. This single step can cut file size by 80% before any compression.
2. Compress each image under 100KB
After resizing, I run everything through the image compressor. My typical workflow: upload, set quality to around 70-75%, download. A 600x300 hero banner usually ends up around 40-60KB. Product thumbnails at 150x150 can get down to 8-15KB.
The compressor shows you the before and after side by side. At 70% quality, I honestly cannot see a difference on my phone screen. And my subscribers are reading email on phones, not inspecting pixels on a 4K monitor.
3. Use JPEG instead of PNG
JPEG compression handles photos way better than PNG. A product photo saved as PNG might be 280KB. The same image as JPEG at quality 75? Around 45KB. Same visual result.
The only time I use PNG is when I need a transparent background, like a logo or an icon floating over a colored section. For everything else, JPEG wins.
Real numbers from my test
After that disaster email, I ran a comparison. Same content, same five images, but optimized.
Before optimization:
- Total email size: 1.8MB
- Gmail clipping: yes, on desktop and mobile
- Load time on 4G: 4.2 seconds
- CTA click rate: 3.1%
After optimization:
- Total email size: 210KB
- Gmail clipping: none
- Load time on 4G: 0.8 seconds
- CTA click rate: 7.4%
The click rate more than doubled. Not because the images looked better, but because people could actually see the button. The whole email loaded in under a second on a normal cellular connection.
Things I learned the hard way
Write real alt text. Gmail, Outlook, and Apple Mail block images by default for many users. If your image just says “image001.jpg” as alt text, that’s a wasted slot. Describe what the image shows. “Our new running shoe in navy blue” gets clicks even without the picture loading.
Skip background images. Some email clients don’t support CSS background images at all. Outlook for Windows ignores them completely. If critical content sits on top of a background image, a chunk of your audience sees nothing.
Test dark mode. Dark mode inverts or tints images in weird ways on iOS Mail and Outlook. Transparent PNGs with dark text become invisible. JPEG images with white backgrounds get a weird inverted border. Send yourself a test email and flip your phone to dark mode before scheduling.
Quick checklist before you hit send
- Total email size under 500KB
- Each image under 100KB
- All images resized to 600px max width
- JPEG format for photos, PNG only for transparency
- Alt text on every image
- Tested in dark mode on your phone
For resizing images to the right email dimensions, use the free image resizer. To compress your images down to email-friendly file sizes, try the image compressor tool. Both run in your browser. Nothing gets uploaded to any server.