Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →For most email heroes, display the image at about 600px wide and export a 1200px-wide source. That 2× file stays sharp on Retina screens while scaling down cleanly in a conventional 600px email template. Mailchimp’s newer builder uses a 660px content width, so its matching 2× source is 1320px. Klaviyo documents a broader 600–1000px full-width range. Your actual content column, inner padding and mobile layout determine the final number.
Recommended dimensions at a glance
| Template or use case | Displayed hero width | Recommended source width | Height and weight guidance |
|---|---|---|---|
| Conventional 600px email template | About 600px before inner padding | 1200px for 2× Retina export | Choose a crop that keeps the subject and call to action visible; aim for about 1MB or less |
| Mailchimp legacy template | 600px template width; often less after padding | 600–1200px according to Mailchimp’s current guidance | 72dpi is generally sufficient; keep text readable in the first 300–500px of the message |
| Mailchimp new builder | 660px template width | 660–1320px; 1320px is the 2× choice | Measure the actual image block if columns or padding are present |
| Klaviyo full-width image | 600–1000px | Use 2× the intended display width when file weight allows | Under 2000px tall; Klaviyo recommends aiming for 1MB or smaller |
These are working ranges, not a universal aspect ratio. A hero can be short and wide for a product announcement or taller for an editorial campaign, provided the important content appears early and remains usable on a phone.
Measure the usable content column before exporting
The number in a template’s name is usually the outer container, not the space available to your image. Subtract left and right padding, borders and any column gap.
Calculate the real width
Use this simple formula: usable hero width = outer content width − left padding − right padding − borders. For example, a 600px container with 20px padding on each side leaves roughly 560px for the image. Exporting a 1120px source gives a clean 2× file for that 560px display.
#1 Best Overall
Account for columns and modules
A two-column module may give each image only half the content width, minus the gutter. Do not use the full 600px or 660px value for a column image. Measure the block in the template editor or in the rendered HTML and use that measured width for your 1× and 2× calculations.
Check the mobile rule
Responsive templates commonly stack columns or shrink the image to the viewport. Design the crop so the focal subject survives a narrow screen; do not put a person’s face, product label or essential visual cue against an edge that may be clipped.
Why export at 2×?
A 2× source has twice the pixels in each dimension: a 600px display uses a 1200px source, and a 660px display uses 1320px. The email client scales the bitmap down, giving high-density displays more source detail to work with. It does not make a 600px container wider, and it does not compensate for an incorrect crop.
When 1× is acceptable
A 1× export can be reasonable when the image is already near your weight limit, contains little fine detail, or is being used in a small module. Inspect the rendered result on a high-density phone before standardizing on it.
Do not confuse pixels with DPI metadata
For email, pixel dimensions control the displayed size. Klaviyo and Mailchimp both describe 72dpi as sufficient or best practice; changing a file’s DPI metadata without changing its pixel dimensions will not create extra detail or alter the CSS width.
Choose height from the design, not a fixed ratio
There is no single correct hero height. Set the height that lets the image support the headline and call to action without pushing the message’s purpose too far down.
Use the first viewport as a practical bound
Campaign Monitor describes the preview pane for “above the fold” text as usually 300–500px high. Treat that as a planning limit for the visible portion of the email, not as a required hero height. If a hero occupies most of that area, put the key subject and message near the top of the crop.
Keep full-width images below 2000px tall
Klaviyo recommends keeping full-width images under 2000px in height. That is an upper boundary for unusually tall artwork, not a target. A tall image can increase download time and force readers to scroll before they reach live text or a button.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteDesign a deliberate crop
- Leave breathing room where the template will place live text or buttons.
- Keep faces, products and logos away from edges that may be clipped on mobile.
- Do not bake the only explanation or call to action into the bitmap; repeat essential meaning in live HTML.
- Supply a mobile-specific crop when the desktop composition cannot survive a narrow viewport.
File size, format and resolution
Set a weight target
Aim for about 1MB or less for the hero. Klaviyo’s technical upload maximum is 10MB, but its practical recommendation is approximately 1MB or smaller; Mailchimp also gives a 1MB maximum recommendation. A maximum is not a performance goal, especially for recipients on mobile data.
Pick the format that preserves the artwork
- JPEG: Usually efficient for photographic or gradient-heavy heroes. Reduce quality until artifacts become visible, then step back one setting.
- PNG: Useful for transparency, flat-color graphics or crisp interface-like edges, but it can be much larger for photos.
- GIF: Listed by Mailchimp for email images. Keep animated artwork restrained and ensure the first frame communicates the message if animation is not shown.
- WebP: Klaviyo can convert WebP to PNG for non-animated images. Confirm the resulting file and rendering in your sending platform before relying on that conversion.
Compress after resizing
Export at the required pixel dimensions first, then compress. Repeatedly enlarging a compressed file produces softness and does not restore detail. Check fine text, diagonal edges and gradients at 100% before uploading.
Platform-specific sizing
| Platform guidance | What it means for your hero |
|---|---|
| Mailchimp legacy templates: 600px wide; source guidance 600–1200px | Use a 1200px source when the block displays near 600px and you want 2× sharpness. Subtract module padding first. |
| Mailchimp new builder: 660px wide; source guidance 660–1320px | Use 1320px for a full-width 2× source, or measure a narrower block inside the builder. |
| Klaviyo default template width: 600px; full-width guidance 600–1000px | Start with the measured display width, export at 2× where practical, keep height under 2000px and target about 1MB or less. |
| Campaign Monitor preview pane: usually 300–500px high | Place the hero’s focal point and the first live headline so they remain understandable in that initial view. |
Builder defaults can change, and a particular template may add padding or use a narrower content module. Verify the rendered block rather than assuming the platform’s outer width is available to the bitmap.
A production workflow that avoids blurry or oversized heroes
- Inspect the template. Record the outer content width, inner padding, borders and any column gap.
- Compute the display width. Subtract the non-image space. Save this number in your design handoff.
- Create the desktop composition. Keep the focal point and visual hierarchy inside the area that will remain after mobile cropping.
- Export a 2× source. Multiply the measured display width by two: 560px becomes 1120px, 600px becomes 1200px, and 660px becomes 1320px.
- Set a sensible height. Keep the important content visible in the first 300–500px of the message and avoid a full-width image above 2000px tall.
- Compress and inspect. Target about 1MB or less. Compare JPEG, PNG or the supported workflow for your artwork rather than assuming the largest file is best.
- Add descriptive alt text. Describe the image’s purpose and information. If the image is decorative, use the sending platform’s decorative-image setting where available.
- Keep meaning in live HTML. Put the headline, offer, legal text and button label in real text and links whenever possible.
- Test representative clients. Check desktop and mobile widths, image blocking, dark-mode behavior if relevant, and the fallback when a background image is not rendered.
Normal image block versus background image
A normal image block is generally the simpler choice: it has a direct alt attribute, a predictable fallback and a clear intrinsic size. A background image can place live text over artwork, but support and rendering details vary by email client. Mailchimp recommends custom HTML when Outlook background rendering is required.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
If you use a background
- Provide a solid background color that preserves contrast when the image is absent.
- Keep the essential message in live HTML over the background.
- Test Outlook and any other clients important to your audience, not just your browser preview.
- Set an explicit height or padding strategy so the block does not collapse when the image is blocked.
Responsive and accessibility checks
Mobile readability
At narrow widths, a 1200px or 1320px source will simply scale down; it does not guarantee that small text embedded in the artwork remains legible. Use live HTML for text, and supply a mobile crop when the desktop aspect ratio makes the subject too small.
Image blocking and assistive technology
Descriptive alt text should explain what a sighted reader would miss if the image is blocked. Avoid repeating a nearby live headline word for word. If the hero is purely decorative, make that explicit so screen readers can move to the message.
Dark mode and contrast
Review logos, transparent edges and low-contrast artwork against both light and dark backgrounds where your audience uses dark mode. Do not rely on a subtle background color to carry meaning.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting common sizing problems
The hero looks blurry
Cause: The source is close to 1×, has been enlarged, or was repeatedly recompressed. Fix: Re-export from the original at 2× the measured display width, then compress once and inspect at 100%.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →The image is cropped on phones
Cause: The template applies a fixed-height crop, stacks columns, or uses a different mobile width. Fix: Move the focal point inward, create a mobile-specific crop, or remove the fixed crop and let the image scale proportionally.
The hero pushes the call to action below the first screen
Cause: The artwork is too tall for the message’s opening viewport. Fix: Shorten the crop, move the CTA into live HTML immediately below or over the image, and keep the first headline within the initial 300–500px planning range.
The file exceeds the platform limit
Cause: A 2× PNG or an uncompressed photograph can be large even when its dimensions are correct. Fix: Convert photographs to an appropriately compressed JPEG, reduce unnecessary transparency, and verify that the result remains around 1MB or less.
Outlook shows a blank or misaligned background
Cause: Background-image support differs by client. Fix: Use a normal image block or custom HTML with a tested Outlook fallback, as Mailchimp advises for background rendering.
The design looks right in the builder but not in the inbox
Cause: The builder preview may not represent real client CSS, image blocking or mobile scaling. Fix: Send test messages to the clients and screen widths your subscribers use, then adjust the measured block width and crop rather than changing the source size blindly.
Preview a hosted test before sending
A practical do-it-yourself check is to publish the email or a rendering test at a temporary URL, open it at desktop and mobile viewport widths, and confirm the measured image block, crop, live text, alt text and fallback color. Compare the downloaded file’s pixel dimensions with your 2× calculation and its file size with your 1MB target.
Or skip the browser setup
If you host a rendering test page, ScreenshotNeo can capture that URL with one request. Its clean-shot process accepts the cookie or consent banner like a visitor, then removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be disabled. Bot checks, CAPTCHAs, blank pages, timeouts, failed loads and cache hits are not billed, and the response identifies the page verdict and billing status in X-Page-Verdict and X-Billed headers. An MCP server provides take_screenshot, get_page_info and capture_pdf tools for Claude, Cursor and other MCP clients.
See the ScreenshotNeo API documentation for the full option set, including device presets, custom viewports, retina scale, full-page capture, CSS-selector element capture, dark mode, PDF output, custom CSS and JavaScript, click and wait actions, blocked requests, headers, cookies, user agents, authorization, timezone, geolocation, transparent backgrounds, resizing, cache TTLs, signed links, asynchronous webhooks, bulk capture of up to 100 URLs per call, usage data and the OpenAPI specification.
cURL
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpPython
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}`);The Free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 shots; every feature is available on every plan, and yearly billing provides two months free. Create a free ScreenshotNeo account to test a rendering page before your next send.
FAQ
Frequently Asked Questions
Does a 1200px image make a 600px email wider?
No. The template’s CSS or table width controls display size. A 1200px file is simply a 2× source that is rendered near 600px.
Should I make every hero exactly 600px tall?
No. Height depends on the crop and message hierarchy. Keep the focal content visible early, use the 300–500px preview-pane range as a planning reference, and avoid full-width images over 2000px tall.
Will changing an image from 72dpi to 300dpi improve email sharpness?
Not by itself. Pixel dimensions, compression and the client’s scaling determine visible detail; DPI metadata does not add pixels.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallQuick Recap
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.
