Best Image Size for Email (The Complete Guide That Stops Your Emails Looking Broken)

April 16, 2025 · 11 min read

Email is where good images go to suffer. You spend twenty minutes making a beautiful banner in Canva, paste it into your newsletter, send it to 10,000 people, and then discover that half of them saw a broken image icon and the other half saw your banner scaled down to a blurry postage stamp. Gmail is silently judging you. Outlook is doing whatever Outlook does, which is usually the wrong thing.

The problem is not your design skills. The problem is that email clients are stuck in approximately 2006 in terms of rendering capability, and every single one handles images differently. There are rules you need to follow. They are not complicated, but ignoring them means your emails look broken for a significant percentage of your audience.

Let us go through every rule, every number, every gotcha. By the end of this, your email images will work everywhere.

The Magic Number: 600 Pixels Wide

The single most important rule for email images: keep them 600 pixels wide or less. This has been the standard for years and it is not changing anytime soon.

Why 600? Because most email clients render the email body in a content area that is approximately 600 to 640 pixels wide. Outlook uses 600. Gmail on desktop uses about 640. Mobile clients are narrower but scale down from the 600 pixel original. If you send a 1200 pixel wide image, Outlook will either overflow it (creating a horizontal scrollbar inside the email, which looks terrible) or shrink it in a way that makes text unreadable.

For full width images (banners, hero images), use exactly 600 pixels wide. For images that sit alongside text in a two column layout, use 260 to 280 pixels wide. For a three column layout (product grids), about 180 to 190 pixels each.

Use our resize tool to hit 600 pixels wide exactly. Set the width to 600 and let the height auto calculate to maintain the aspect ratio.

File Size: The Invisible Killer

Here is something most people do not think about: total email weight. Many email clients clip or refuse to load emails that exceed certain size limits. Gmail clips the entire email at around 102KB of HTML. Images are loaded separately (not counted in that limit), but if images are blocked, your email might be nothing but broken image icons.

For individual images, keep each one under 200KB. Ideally under 100KB for a single image. The total image weight of the entire email should stay under 800KB if possible. One MB maximum for image heavy emails like product showcases.

Why so small? Because many email recipients are on mobile data. Because some corporate email gateways strip large attachments. Because loading six 2MB images in a promotional email that someone opens on their phone while waiting at a traffic light is a terrible experience. Fast loading emails get higher engagement. Slow loading emails get closed before they finish rendering.

Our compress tool and reduce to KB tool are perfect for this. Set a target of 100KB and the tool will find the right quality level automatically.

Image Formats for Email: JPEG and PNG Only (Seriously)

The web has moved on to WebP and AVIF. Email has not. The only formats universally supported across all email clients are JPEG and PNG. That is it. No WebP (Outlook does not support it). No AVIF (nothing supports it in email). No SVG (security concerns, most clients block it). Barely GIF (animated GIF support varies and some clients only show the first frame).

Use JPEG for photos and images with many colors. Quality 80 is the sweet spot for file size vs quality in email. Use PNG for images with text, logos, or anything with sharp edges and flat colors. PNG is also the only option if you need transparency, though many email clients do not handle transparent images well against dark mode backgrounds.

If you have a WebP or AVIF image, convert it to JPEG before putting it in an email. Our image converter handles this in one click.

Retina and High DPI Displays in Email

This is a tricky one. iPhones (which represent about 35 to 40% of all email opens) have Retina displays. If you send a 600 pixel wide image and it is displayed in a 600 pixel wide container on a Retina screen, it will look slightly soft. Not terrible, but not crisp.

The fix: send images at 1200 pixels wide but set the width attribute to 600 in the HTML. The email client scales the image down to 600 pixels for display but uses all 1200 pixels on Retina screens. This gives you sharp images on high DPI devices.

The tradeoff is file size. A 1200 pixel wide image is about four times the file size of a 600 pixel wide one. If file size is a concern (and it usually is in email), skip the Retina optimization for non essential images and only do it for the hero banner and key graphics.

For the HTML, it looks like this: <img src="banner.jpg" width="600" style="max-width:100%">. The width attribute tells email clients to display at 600 pixels. The max-width:100% makes it responsive on mobile. The actual image file is 1200 pixels wide.

Dark Mode: The Modern Headache

Dark mode in email clients is a disaster zone. Gmail, Apple Mail, Outlook, and others all implement dark mode differently. Some invert colors. Some add dark backgrounds. Some leave images alone. Some add a white outline around images with transparent backgrounds. It is chaos.

For images with transparent backgrounds (PNGs with alpha), add a subtle solid background or a thin border so they do not float weirdly on dark backgrounds. A logo with a transparent background might look great on white but be completely invisible on a dark mode email.

Test your emails in dark mode. Litmus and Email on Acid both offer dark mode previews across clients. If you do not want to pay for those, at minimum preview in Gmail (web and mobile) and Apple Mail in dark mode before sending.

The safest approach: use images with solid (non transparent) backgrounds. A white background behind your logo works in both light and dark mode. It might not be the most elegant design, but it works everywhere, which is more important in email than looking fancy.

Image Blocking: Your Email Without Images

Some email clients block images by default. Outlook on desktop is notorious for this. Corporate firewalls often strip images. Some users have image loading disabled to save data.

This means you need to design your email so it makes sense even without images. Use HTML text for your main message, not text baked into images. Use a background color for your header area so it does not collapse to nothing when the banner image is blocked. Always include alt text on every image so people see a text description when images are blocked.

The rough guideline from email marketing veterans: if your email makes zero sense without images, redesign it. Images should enhance the message, not BE the message. Promotional offers, CTAs, and key information should be in live HTML text.

Specific Sizes for Every Email Element

Common Email Image Mistakes

Entire email as one big image. Some marketers literally create an entire email as a single image and send that. This is terrible for accessibility (screen readers cannot read it), terrible for deliverability (spam filters flag image only emails), and terrible for image blocking (when images are blocked, the recipient sees nothing).

Not setting width and height attributes. Without explicit dimensions, email clients do not know how big the image should be before it loads. This causes layout shifts and reflows as images load one by one. Set both width and height on every img tag.

Forgetting to test in Outlook. Outlook uses Microsoft Word as its rendering engine, which is roughly as capable as a web browser from 2003. Images that look perfect in Gmail can be completely broken in Outlook. Always, always test in Outlook.

Background images in CSS. Many email clients including Outlook do not support CSS background images at all. If you use a background image for a hero section, a huge percentage of your audience will see a blank area. Use an img tag instead.

Animated GIFs that are too heavy. A 5 second animated GIF can easily be 3MB or more. That is an absurd amount of data for a single email element. If you must use animated GIFs, keep them under 500KB and under 3 seconds. Consider whether a static image with compelling copy would be equally effective.

The Quick Checklist

The Bottom Line

Email image optimization boils down to five words: keep it small and simple. 600 pixels wide. Under 200KB per image. JPEG or PNG. Alt text on everything. Test in Outlook.

It is not glamorous work. Nobody opens an email and thinks “wow, these images really loaded fast.” But they absolutely notice when it does not work. Broken images, slow loading graphics, and wonky layouts make your brand look amateur regardless of how good your actual product is. The bar is low. Do these basics right and you are already ahead of most email senders out there.