Email is the most hostile environment for images. Clients block images by default, Outlook ignores CSS background images, Gmail strips external styles, and users on mobile data want fast-loading messages. Getting email images right requires understanding the constraints — not just picking a size and hoping for the best.

Email Width: The 600 px Rule

Design your email at 600 px wide. This is the most universally safe email width:

Gmail, Outlook, and Apple Mail all render reliably at 600 px on desktop
Many email clients have a fixed 600 px rendering width regardless of browser window size
On mobile, your email should stack to a single column at 320–375 px — images should be 100% width of their container, not fixed pixel widths
Avoid: emails wider than 700 px — they will be cut off in many clients and force horizontal scrolling

Image Sizes for Common Email Elements

Hero/header image: 600×200 px or 600×300 px (depending on how tall you want the hero). This is the full-width image at the top of the email — keep the key message in the center in case of cropping on narrow screens
Product images: 600×600 px (1:1 square) or 300×300 px for side-by-side layouts (two images in a 600 px email). Square images are the most versatile for product shots
Thumbnail images: 150×150 px to 200×200 px for article or product grids
Logo: 200×50 px for a horizontal logo, or up to 150×150 px for square logos. Keep the file size tiny (under 20 KB) — it loads on every email
Footer images: social icons at 30×30 px

File Size Targets

Total email size matters for deliverability and load speed:

Individual image: keep each image under 100 KB if possible. A 600×300 hero image at 85% JPEG quality should be 20–50 KB
Total email: aim for under 1 MB total (HTML + images loaded from servers). Gmail clips emails over 102 KB of raw HTML — images are external, so they do not count toward that limit, but slow-loading images hurt engagement
Animated GIFs: keep under 1 MB for email. Many mobile email apps will show only the first frame if the GIF is too large or the connection is slow

Best Image Formats for Email

JPEG: use for photos and images with gradients. Best compression, universal support across all email clients. Use 80–85% quality for a good size-to-quality tradeoff
PNG: use for logos, icons, and graphics that need a transparent background. Larger than JPEG for photographic content, so reserve it for assets that genuinely need transparency
GIF: the only animated format with broad email support. Note that Outlook for Windows 2007–2019 shows only the first frame — design your first frame to make sense as a static image
WebP and AVIF: do not use for email. These modern formats have poor support in email clients — Outlook ignores them entirely. Stick to JPEG, PNG, and GIF

Retina and HiDPI Displays

Most modern phones and many laptops have 2× or 3× pixel density screens. To display images sharply on these:

Use an image that is 2× the display width — for a 600 px wide email image, upload a 1200 px wide image and constrain it to 600 px wide in the HTML with width="600"
This doubles the image file size, so compress aggressively. A 1200 px JPEG at 70% quality for email display still looks sharp and may be the same file size as a 600 px image at 90% quality

Always Write Alt Text

Many email clients block images by default until the user explicitly approves loading them. Gmail on Android shows images immediately, but Outlook for Windows blocks them by default. If your email is image-only with no alt text, recipients who have images blocked see a blank email.

Write descriptive alt text for every image: alt="Summer sale - 40% off all products" not alt="image1.jpg"
For decorative images that add no information, use an empty alt tag: alt=""
Never use images to display key text like subject lines, CTAs, or prices — screen readers and text-only email clients cannot read text in images

Image-to-Text Ratio and Spam Filters

Spam filters penalize emails that are entirely images with little text — a common pattern in spam campaigns. Follow the 60/40 rule:

Aim for at least 60% text and no more than 40% image area in your email
Never send a single-image email (an image with no surrounding text) — it will likely trigger spam filters and bypass accessibility entirely
Include visible text for key information: price, offer, CTA — even if it overlaps visually with the image content

Step-by-Step: Prepare Email Marketing Images

Hero image: design at 1200×600 px, then export as JPEG at 80–85% quality. Use image compression to get under 100 KB
Product images: resize to 600×600 px for square layout or 300×300 px for grid layouts. JPEG at 80% quality
Logo: export as PNG with transparency. Resize to 200×50 px or the appropriate dimensions. Keep under 20 KB
Animated GIF: use the GIF Compressor to get under 1 MB. Ensure the first frame communicates the full message for Outlook users
Test: send a test email to Outlook, Gmail, and Apple Mail before sending to your list. Images that look fine in a browser may render differently in email clients

Email Marketing Image Quick Reference

Email width: 600 px (never wider than 700 px)
Hero image: 600×200–300 px, under 100 KB, JPEG
Product image: 600×600 px or 300×300 px, JPEG
Logo: 200×50 px horizontal, PNG, under 20 KB
Animated GIF: under 1 MB; first frame = static fallback
Formats to use: JPEG, PNG, GIF only — no WebP, no AVIF