Email Product Image Sizes 2026: Klaviyo and Mailchimp Specs, Retina Widths and Dark Mode Fixes

You have sorted your marketplace images. Amazon gets its 2000px white-background hero, Shopee gets its square, Shopify gets a 2048px zoomable file. Then you open Klaviyo, drag the same 3MB photo into a campaign, hit send, and it arrives as a fuzzy grey box on half your subscribers' phones.

Email is the one channel where sellers routinely reuse product images without adapting them, and it is the channel least forgiving of that. The canvas is roughly a quarter the width of a product page, images are frequently blocked before they render, and dark mode can invert your carefully lit white background into something that looks broken. Here is what actually works in 2026.

Why email images are a different problem

Four constraints make email unlike every other surface you prepare images for:

• The canvas is tiny. Most email templates render at 600px wide. Outlook, Gmail and Apple Mail have all standardised around that figure, and it has not moved in over a decade.
• Images do not always load. Outlook desktop clients and corporate mail filters commonly block images until the recipient opts in. Litmus analysis found image blocking affected a substantial share of Gmail opens back when Gmail blocked images by default, and while most consumer clients now display images automatically, images-off remains normal in workplace inboxes.
• Dark mode rewrites your design. Apple Mail inverts aggressively, Gmail inverts some palettes partially, and Outlook desktop barely changes anything. The same email can render three different ways.
• Gmail clips long messages. Once the message HTML passes roughly 102KB, Gmail truncates it and shows a "Message clipped" link, hiding everything below that point, including your unsubscribe link.

One clarification on that last point, because it is widely misreported: the 102KB limit applies to the HTML of the message, not to your image files. Images are hosted externally and downloaded separately, so a 400KB photo does not push you toward clipping. Base64-embedded images do, which is one good reason not to embed them.

The two numbers that matter: 600 and 1200

Design your email at 600px wide. Export every full-width image at 1200px wide. Then constrain it to 600px in the template.

This is the 2x retina rule, and it is the single biggest quality win available. Nearly every phone your customers read email on has a high-density display, which means a 600px image is being stretched across roughly 1200 physical pixels. Supplying the file at double the display width and letting the client scale it down gives you a sharp result for a modest file size cost.

The same doubling applies to smaller slots. A two-column product grid displaying at 280px should be exported at 560px. A three-column grid displaying at 180px should be exported at 360px. Never upload at exactly the display width, and never dump in a 2048px product-page file and let the email platform shrink it for you.

Platform specifications compared

Mailchimp also publishes minimum widths per column layout in its legacy builder: 564px for full-width blocks, 264px for two columns, 164px for three columns and 132px for four. Treat those as minimums to double, not as targets.

Two format notes. Klaviyo accepts WebP uploads but converts them to PNG, which can produce a far larger file than you expected, so convert to JPEG yourself before uploading rather than relying on that conversion. And everything should be RGB at 72dpi, never CMYK. If you have been handed print-ready supplier assets, they are almost certainly CMYK and will render with shifted, muddy colour.

Setting a realistic file size budget

Platform maximums are not targets. A 1MB image is technically allowed in Mailchimp and will still make your email feel slow on mobile data. Work to a per-image budget instead:

• Hero or banner image: 100-150KB
• Product grid images: 40-80KB each
• Logo: under 20KB
• Whole email: aim to stay under about 1MB of total image weight

For product photography, JPEG at quality 70-80 hits that budget comfortably at 1200px wide. Reserve PNG for logos, images containing fine text, and anything needing transparency, because PNG will be several times larger for a photograph. Preparing an eight-product campaign means exporting eight images at a specific width and quality, which is exactly the kind of repetitive resizing PixelPrep handles in one batch rather than one file at a time.

Dark mode and white-background product photos

This is where marketplace-compliant images cause trouble. A product shot on pure white sits invisibly on a white email background in light mode, which is exactly what you want. In dark mode, that same image becomes a glaring white rectangle floating in a dark email, because clients invert your background colour but cannot invert the pixels inside a JPEG.

Three practical fixes, in order of effort:

Use transparent PNGs for logos and icons

A transparent PNG adapts to whatever background sits behind it, so your logo never shows a white box on a dark background. The exception is a dark logo, which will vanish against a dark background. If your mark is dark, supply a light version and swap it with a dark mode media query, or sit it on a brand-colour block that stays constant in both modes.

Give white-background products a soft container

Rather than fighting the white rectangle, own it. Place product images inside a card with a very light grey background such as #F7F7F7 and a subtle border. It then reads as a deliberate design element in both modes rather than as an accident.

Avoid pure black and pure white extremes

A palette that meets a 4.5:1 contrast ratio in light mode can drop to around 3.2:1 after automatic inversion. Softer tones such as #111111 text on #F9F9F9 survive inversion better than #000000 on #FFFFFF. Always send yourself a test and open it in dark mode on a phone before the real send.

Designing for the images-off view

Assume a meaningful slice of your list sees your email before any image loads. Two habits protect you:

Write real alt text on every image. Not "product-shot-final-v3.jpg" but "Navy linen shirt, 30 per cent off this week". For many recipients that sentence is the entire email until they choose to load images. It also helps screen reader users, and gives spam filters legitimate text to evaluate.

Never send an image-only email. Emails that are one large graphic with little or no live text are routinely flagged by spam filters and are completely blank when images are off. A common working guideline is to keep text at roughly 60 per cent of your content and images at no more than 40 per cent. Your headline, price and call-to-action button should all be live HTML text, not baked into a JPEG.

Cropping product photos for email

Your square marketplace hero is not automatically the right crop for a campaign. In a 600px-wide email, a full-width square image consumes 600px of vertical space before a subscriber has read a single word, pushing your offer below the fold on a phone. Two adjustments help:

• Use a wider crop for hero images. A 3:2 or 2:1 crop of a lifestyle shot works far better at the top of an email than a 1:1 product cut-out.
• Keep squares for grid tiles. Two- and three-column product grids are where 1:1 belongs, and where consistent cropping across all products matters most, because misaligned crops are painfully visible side by side.

Remember that most email templates stack columns vertically on mobile, so a three-column grid becomes three full-width images. Check that your 360px-wide grid exports still hold up when a phone stretches them across the screen.

A repeatable export workflow

Set this up once and every campaign afterwards gets faster:

1. Pick your final product photos from your existing catalogue at full resolution.
2. Crop to the aspect ratio the slot needs: wide for heroes, square for grids.
3. Resize to double the display width: 1200px for full-width, 560px for two-column, 360px for three-column.
4. Export as JPEG at quality 70-80, targeting under 150KB for heroes and under 80KB for grid tiles.
5. Upload, constrain to the display width in the builder, and add alt text to each one.
6. Send a test and open it on a phone in both light and dark mode before scheduling.

Pre-send checklist

• Every full-width image is 1200px wide, displayed at 600px
• No single image exceeds 200KB, and total image weight is around 1MB or less
• All images are RGB JPEG or PNG, never CMYK
• Logos are transparent PNGs, with a light variant available for dark mode
• White-background product shots sit in a light grey card rather than floating loose
• Every image carries descriptive alt text
• Headline, price and call-to-action are live text, not part of an image
• The email has been opened on a phone in dark mode, and in a client with images off

The underlying discipline is the same one that keeps your marketplace listings compliant: decide the target dimensions and file size once, then apply them consistently to every image you send. Email simply has a smaller canvas and stricter consequences for ignoring it.