Email Hero Image Sizes: Recommended Dimensions

For most email templates, display the hero at about 600 px wide and export the source at 1200 px wide for Retina screens. If your builder uses a 660 px content column, use a source around 1320 px wide. The correct height depends on the crop and the first viewport; there is no universal hero height.

Keep the final file near 1 MB or less, use 72 dpi, add descriptive alt text, and test the image as both a normal image block and a background image if your design uses one.

Recommended email hero dimensions at a glance

Use case	Display width	Recommended source width	Height guidance
Common 600 px template	About 600 px	1200 px for 2× Retina export	Choose a crop that keeps the subject and CTA visible early
Mailchimp new builder	660 px	1320 px for 2× Retina export	Keep the important content near the center and top
Mailchimp legacy template	600 px	600–1200 px	Use the actual content column after padding
Klaviyo full-width image	600–1000 px	Use 2× when extra crispness is needed	Under 2000 px tall

These are starting points. Measure the real content column in your template before exporting.

How to calculate the correct width

1. Measure the content column

Start with the width of the email container, then subtract left and right padding. A 600 px outer template with 20 px of padding on each side has roughly 560 px of usable image width.

usable_width = template_width - left_padding - right_padding
source_width_2x = usable_width * 2

For example:

template width: 600 px
left padding: 20 px
right padding: 20 px
usable display width: 560 px
2× source width: 1120 px

If the image touches the full 600 px content area, a 1200 px source is appropriate. If it sits inside a narrower column, export to that measured width instead.

2. Account for multi-column layouts

In a two-column email, each hero may be only half the content width. Do not export every image at the full template width. Measure the column, including its internal padding, and export at roughly twice that width when file weight allows.

3. Use 2× source pixels for Retina displays

A 1200 px image displayed at 600 px gives high-density screens enough pixels to render a sharper result. The same principle gives a 1320 px source for a 660 px display. The email client still renders the image at the CSS width, so set an explicit display width and let the source provide extra detail.

<img src="hero-1200.jpg"
     width="600"
     style="display:block;width:100%;max-width:600px;height:auto;"
     alt="A runner crossing the finish line">

How tall should an email hero image be?

There is no fixed hero height that works for every campaign. Select a height from the composition, subject placement, and amount of live HTML around the image.

Keep the subject, headline, and call to action visible near the top of the message.
Use the first viewport as a practical constraint. Campaign Monitor describes the preview pane for above-the-fold text as usually 300–500 px high.
Klaviyo recommends keeping full-width images under 2000 px tall.
Shorter crops usually load faster and leave room for live headline and button text.
On mobile, a very wide desktop crop can make the subject too small. Create a mobile-specific crop when the design needs it.

As a design workflow, place the important visual subject inside a safe central area, then check the crop at desktop and narrow mobile widths. Keep essential meaning in live HTML rather than only inside the bitmap.

Platform guidance: Mailchimp and Klaviyo

Platform guidance	What it means for your hero
Mailchimp legacy templates are 600 px wide	Use a 600 px display width when the image fills the content area; 1200 px is a practical 2× source.
Mailchimp new builder templates are 660 px wide	Use a 660 px display width; prepare about 1320 px for a 2× source.
Klaviyo templates default to 600 px	Use 600 px as the baseline, then adjust for padding and columns.
Klaviyo full-width recommendation is 600–1000 px wide and under 2000 px tall	Stay within that range when the image is intended to span the full content area.

Builder settings can change. Confirm the actual content column in the template you are sending rather than relying only on the outer canvas width.

File format, resolution, and compression

Resolution: 72 dpi is sufficient for email. Pixel dimensions control the rendered size.
File size: Aim for about 1 MB or less. Large heroes delay image loading, especially on mobile connections.
JPEG: Use for photographs and gradients. Compress until text edges and fine details still look clean.
PNG: Use when you need transparency, flat graphics, or very sharp edges.
GIF: Use for simple animation, while remembering that some clients show only the first frame.
WebP: Some platforms accept or convert WebP, but client support and platform handling vary. Verify the output in your sending platform.

Klaviyo supports JPEG, PNG, GIF, and conversion of non-animated images to PNG. Mailchimp lists JPG, GIF, and PNG. Keep a fallback in mind when your image is central to the message.

Example ImageMagick compression commands

These commands are optional local production steps. Inspect the result at the intended display width after compression.

# JPEG photograph, resized to a 1200 px Retina source
magick input.jpg -resize 1200x -strip -interlace Plane -quality 82 hero-1200.jpg

# PNG graphic, resized and stripped of metadata
magick input.png -resize 1200x -strip -define png:compression-level=9 hero-1200.png

Build the hero so it survives email clients

Normal image block

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center">
      <img src="https://example.com/hero-1200.jpg"
           width="600"
           alt="A runner crossing the finish line"
           style="display:block;width:100%;max-width:600px;height:auto;border:0;">
    </td>
  </tr>
</table>

Background image

Background images have less consistent support, especially in Outlook. If the background is essential, provide a solid-color fallback and test the Outlook-specific markup required by your email system. Mailchimp recommends custom HTML when Outlook background rendering is required.

Keep meaning out of the bitmap

Put headlines, prices, legal copy, and calls to action in live HTML whenever possible. If images are blocked, subscribers should still understand the offer and have a usable link.

Mobile and responsive rules

Set the image to width:100%; max-width:[display width]px; height:auto;.
Check the crop at narrow widths. A 600 px desktop composition can become unreadable when scaled to a 320–390 px phone.
Leave a safe area around faces, products, and other important subjects so cropping does not remove them.
Use a separate mobile image only when CSS cropping cannot preserve the subject and hierarchy.
Keep the first screen useful if images are blocked: include live text and a visible link nearby.

Accessibility checklist

Write concise, descriptive alt text that conveys the image’s purpose.
Use empty alt text (alt="") for decorative images so screen readers skip them.
Do not place the only version of a headline, offer, or legal requirement inside the image.
Check contrast when text overlays an image; a live HTML button below the image is often more reliable.
Preview the message with images disabled.

A practical production checklist

Measure the actual hero column, including padding.
Choose the display width: commonly 600 px, or 660 px in Mailchimp’s new builder.
Export at 2× the display width when the file remains reasonably small.
Choose a crop whose subject and CTA remain visible in the first viewport.
Compress toward 1 MB or less and inspect fine details.
Set width, max-width, height, and alt text in the email markup.
Test normal image blocks and background images separately.
Preview desktop, mobile, images-blocked, and Outlook scenarios.

Troubleshooting common hero-image problems

Symptom	Likely cause	Fix
The image looks soft on modern phones	The source is only 1× the display width	Export at roughly 2×, such as 1200 px for a 600 px display.
The hero is cropped unexpectedly	Padding, a column width, or a background-image crop changed the usable area	Measure the rendered column and reposition the subject inside a safe area.
The email loads slowly	The image is too large or has unnecessary metadata	Compress toward 1 MB, strip metadata, and use JPEG for photographs.
Text disappears when images are blocked	Important copy is baked into the bitmap	Move the copy and CTA into live HTML and add descriptive alt text.
The hero works in one client but not Outlook	Background-image support differs between clients	Use a normal image block or provide Outlook-specific custom HTML and a fallback color.
The image is too narrow in a padded template	The export used the outer template width	Subtract left and right padding before calculating display and source widths.
The mobile subject is too small	A wide desktop crop was simply scaled down	Create a tighter mobile crop or move the subject and text into separate responsive blocks.

Performance, reliability, and cost considerations

Image dimensions affect download time, but delivery also depends on the recipient’s connection, image-host reliability, and whether the client blocks remote images. A 2× source improves sharpness at the cost of more bytes, so use it where the visual benefit justifies the file size. A smaller, well-compressed image is usually better than an oversized export that the client must download and then shrink.

Use a stable HTTPS image host, descriptive filenames, and long-lived cache headers when your sending system permits them. Recheck the final rendered width after template edits; padding changes can invalidate an otherwise correct export.

Or skip the browser setup

If you need screenshots of an email preview, landing page, or design reference while checking hero dimensions, ScreenshotNeo returns a PNG, JPEG, WebP, or PDF from one GET request. It accepts cookie banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and each response identifies the page verdict and billing status.

See the ScreenshotNeo API documentation for all capture options.

cURL

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

Python

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

Node.js

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo also supports full-page capture with lazy images loaded, CSS-element capture, custom CSS and JavaScript, device presets, retina scale, PDF paper and margin settings, waits, blocking rules, headers, cookies, geolocation, caching, signed links, asynchronous jobs, bulk capture, and an MCP server with take_screenshot, get_page_info, and capture_pdf for AI agents.

Start with 1,000 free screenshots per month with no card. Paid plans start at $5 for 3,000 screenshots.

FAQ

Is 1200 px too wide for a 600 px email?

No. A 1200 px source displayed at 600 px is the standard 2× approach for sharper Retina rendering. The email still occupies about 600 px in the layout.

Should every hero be exactly 600 px wide?

No. Width follows the usable content column. Padding and multi-column layouts can make the correct display width smaller, while some builders use a 660 px column.

What is the best hero height?

There is no universal value. Choose a crop that keeps the subject and action visible in the first 300–500 px of the message and stays below practical platform limits such as Klaviyo’s 2000 px full-width guidance.

Do I need 300 dpi for email?

No. 72 dpi is generally sufficient. Pixel dimensions and compression matter more than the metadata DPI value.

Should I use a background image or an image block?

Use a normal image block for the broadest reliability. Use a background image only when the design needs it and you have tested the relevant clients, including Outlook.