Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

For a 600-pixel-wide email template, display a hero image at about 600 pixels wide and export a 1200-pixel-wide source for sharper results on high-density screens. If you use Mailchimp’s 660-pixel-wide new builder, export at up to 1320 pixels wide for 2× display. Then check the actual image column: padding and multi-column layouts can make it narrower than the template.

There is no one correct hero-image height. Choose a crop that shows the important subject and keeps the message’s headline and call to action easy to reach. Keep the file light—around 1 MB or less is a useful target—and test the image in the email clients and screen sizes your audience uses.

What width should an email hero image be?

Set the image’s display width to the usable width of its email column. A 600-pixel template is a common starting point, but not every builder uses that width: Klaviyo’s default template width is 600 pixels, while Mailchimp says its new builder is 660 pixels wide and its legacy templates are 600 pixels wide.

Those are template widths, not a guarantee that the image area is equally wide. If a 600-pixel content area has 20 pixels of padding on both sides, the image has about 560 pixels of usable width. In a multi-column layout, size the hero to its own column rather than the full template.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Common builder widths and source-image ranges

Template or guidance Template width Suggested source width
Klaviyo default template 600 px 600–1000 px for full-width images; use 2× sizing when extra crispness is needed. Klaviyo guidance (2026)
Mailchimp legacy templates 600 px 600–1200 px. Mailchimp guidance
Mailchimp new builder 660 px 660–1320 px. Mailchimp guidance

These ranges are platform guidance, not a requirement to upload the largest possible file. Match the source to the image’s rendered width and the sharpness you need, then check its file size.

Should you export at 2× for Retina?

Usually, if the image needs to look crisp on high-density screens and the larger file remains reasonably light. For a 600-pixel display width, a 1200-pixel-wide source provides twice as many pixels across. For a 660-pixel display width, 1320 pixels is the equivalent 2× source.

The display width and source width are different things: the email should still render the image at the width of its column. A 1200-pixel source is not too wide for a 600-pixel display if it is scaled to fit and its file weight is acceptable. It can look softer on high-density displays if you provide only a 600-pixel source, but a bigger source is not automatically better if it makes the email slow to load.

Klaviyo recommends 2× sizing when extra crispness is needed. A 2× export is an option, not an absolute rule: weigh detail against download size, especially for data-constrained readers.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

How tall should an email hero image be?

Choose height based on the crop and message, not a universal pixel formula. The hero should make its subject clear without pushing essential copy or the call to action unnecessarily far down the email. Campaign Monitor says the preview pane for above-the-fold text is usually 300–500 pixels high; that is a practical reminder about what may appear early, not a required hero height or guaranteed viewport.

Klaviyo advises keeping full-width images under 2000 pixels tall. That is an upper bound in its guidance, not a recommended target for every campaign. A very tall image can take up the first screen on a phone and delay the message. Preview the crop at narrow widths, and keep key headlines, offer details, and calls to action in live HTML where possible rather than making them part of the image.

How to choose dimensions and export the image

  1. Measure the real column. Check the template’s content width, then subtract side padding. For example, 600 pixels minus 20 pixels on each side leaves approximately 560 pixels for an edge-to-edge image within that padded area.
  2. Set the display width. Use the measured column width, not a platform’s general maximum. For a 600-pixel template with that padding, design the visible image to fit the roughly 560-pixel content area.
  3. Choose source resolution. Export at the display width for a standard source, or at 2× if you need extra crispness and can keep the file weight practical. A 600-pixel display calls for 1200 pixels at 2×; a 660-pixel display calls for 1320.
  4. Crop for the message. Keep the focal subject visible at desktop and mobile widths. Check that important details are not clipped when the image scales down.
  5. Compress and inspect. Aim for about 1 MB or less. Review fine detail and text edges after compression; a smaller file that makes important content hard to read is not a good trade.
  6. Add descriptive alt text. Describe the image’s relevant content or purpose so it can still be understood when images are blocked or for readers using assistive technology.
  7. Test in the intended email layout. Check the rendered width, crop, and fallback in the clients and device sizes that matter to your audience.

Which image format should you use?

Use a format supported by the email platform and appropriate to the image. Klaviyo lists JPEG, PNG, and GIF, and says it converts non-animated WebP images to PNG. Mailchimp lists JPG, GIF, and PNG. Because platform support and client rendering can differ, verify how your chosen image appears after sending a test rather than assuming every format behaves identically everywhere.

For a photographic hero, compare a compressed JPEG with the source if fine detail matters. For graphics with sharp edges or transparency, PNG may preserve those details better but can produce a larger file. GIF is relevant when the image is animated; Klaviyo’s WebP-to-PNG conversion applies to non-animated images, so do not assume an animated WebP will be preserved by that workflow.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Normal image blocks versus background images

A standard image block and an image used as a background do not have identical compatibility. Background-image rendering varies by email client. Mailchimp recommends custom HTML when Outlook background rendering is required. If a background image carries information essential to the message, provide that information in live text as well; do not rely on the background appearing for every recipient.

Test background-image behavior separately from a normal image block. Confirm the fallback color or content, the text contrast, and the result in Outlook if Outlook support is part of your requirements.

Accessibility and mobile checks

  • Write useful alt text. Say what the image communicates, not merely “hero image.” If the image is decorative and adds no information, follow your email platform’s guidance for marking it decorative.
  • Do not bake essential copy into the bitmap. Text in an image can become unreadable when scaled down and will not be available as selectable text. Put the headline, offer terms, and call to action in HTML where practical.
  • Check narrow screens. Verify that the subject remains visible and the image scales to the available width without forcing horizontal scrolling.
  • Check image-blocked behavior. Make sure the alt text and surrounding live text still communicate the message when images do not load.

Common problems and fixes

The hero looks blurry

Check that the source is not smaller than the rendered width, particularly if recipients use high-density displays. If it is, try a 2× export while monitoring file size. Also inspect the original crop and compression settings; adding pixels will not restore detail missing from the source.

The image is too large or loads slowly

Confirm that you exported to the actual column dimensions rather than the full template width, and compress the image. Klaviyo recommends aiming for 1 MB or less even though its technical upload maximum is 10 MB. An upload limit is not a good target for message performance.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

The image is clipped on mobile

Check whether the image is being cropped to a fixed container or simply scaled down, and preview the actual email on a narrow screen. Move essential subject matter away from the edges, or create a mobile-aware crop if your email workflow supports one.

The hero pushes the call to action too far down

Shorten the image crop or reduce its rendered height so the email’s first screen includes enough context to invite a reader to continue. Campaign Monitor’s 300–500-pixel preview-pane figure is a general observation about above-the-fold text, not a fixed layout specification.

The background disappears in Outlook

Do not assume background images render consistently across clients. Mailchimp recommends custom HTML for Outlook background rendering; test that implementation and provide a readable fallback.

The image is not understandable when blocked

Add descriptive alt text and move essential words or instructions into live HTML. Then send a test with images disabled or blocked to verify the message still makes sense.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Using ScreenshotNeo for a web-based image preview

ScreenshotNeo is a website screenshot API and MCP server, not an email-client rendering tester. If you have a public web page showing a hosted email preview, it can capture that page for visual review; it does not establish how the email itself renders across inboxes. See ScreenshotNeo and the API documentation.

For a preview page, one GET request can return an image or PDF. The following cURL example saves a WebP screenshot of a public page:

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

ScreenshotNeo accepts cookie or consent banners and removes known consent platforms, newsletter popups, and chat widgets before capture; those steps can be turned off. Its response identifies page verdict and billing status, and bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. An MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Sign up for ScreenshotNeo’s free plan.

Frequently Asked Questions

Is a 1200-pixel image too wide for a 600-pixel email?

No. It can be a 2× source for a 600-pixel display, provided the email scales it to the column and the file size remains practical.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Is 72 dpi important for an email hero image?

Klaviyo and Mailchimp both describe 72 dpi as generally sufficient. For screen appearance, the pixel dimensions and the rendered column width are the more useful sizing checks.

Should the hero include the headline and call to action as part of the image?

Prefer live HTML for essential text and actions. It can remain readable and available when images are blocked, and it is easier to adapt to narrow screens.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.