Email Template Size: Width, Height, Images and Gmail Clipping
Choose email template dimensions that work on phones and desktops. Understand 600px layouts, image sizing and the HTML that causes Gmail clipping.
A 600px-wide email template is a useful starting point for a newsletter or marketing campaign. It should also adapt to a phone's narrower screen. There is no universal height: the message needs enough room for its content, with the main offer easy to find.
The confusing part is that "email size" can mean three different things: the layout's dimensions, an image's dimensions and download weight, or the email's HTML size. A fix for one does not necessarily fix the others. Your email service provider (ESP) handles the send, but you still need to check the message it produces.
Quick answer: best email design size
| Part of the email | Practical starting point | What to verify |
|---|---|---|
| Desktop template | A content area around 600px wide, or your ESP's existing responsive template | Comfortable line lengths and no cropped content in the clients you support |
| Mobile layout | Content that fits the available screen width | No horizontal scrolling; columns stack in a sensible reading order |
| Header or banner | Fit the content area and preserve the artwork's aspect ratio | The offer is still readable without a large image pushing it out of view |
| Image export | Match the displayed size; use a larger source when useful for sharpness | The image stays sharp without an unnecessarily heavy download |
| Email height | Let content determine the length | The main action is easy to find and the footer remains visible |
| HTML size | Leave room below Gmail's roughly 102KB clipping threshold | Measure the final delivered HTML and check the Gmail result |
These are starting points for testing, not a specification every inbox follows. If your ESP supplies a working responsive template, test it before changing its dimensions just to match a number.
Email template width: why 600px is common
A restrained desktop width keeps text readable and leaves room within a mailbox's message pane. Mailchimp's legacy template guidance uses a maximum width of 600px. That explains the familiar recommendation; it does not make 600px a universal rule for every builder or client.
A wider layout may suit a particular design, but check its mobile behavior and its appearance in the email clients your readers use. A browser preview of the HTML alone does not settle those questions.
For mobile, ask your designer to make the content fit the available width rather than forcing a 600px canvas onto a small screen. Watch for fixed-width images, long links and columns that refuse to stack. The iPhone and Android testing guide shows what to review in the received email.
We tested what phones do with a fixed-width email in November 2026. We sent the same email at 600px, 640px and 700px wide to iPhone Mail, Outlook for iOS and Android, and the Gmail apps for iPhone and Android.
- iPhone Mail and both Outlook apps shrank the whole email to fit the screen. Nothing was cut off, but our 16px text became small: on the iPhone, about 10px at 600px wide and under 9px at 700px.
- The Gmail apps (reading IMAP accounts) ignored the fixed width and reflowed the text at full size.
iPhone Mail: 700px email
Gmail for iOS: 700px email
The practical answer is a fluid width: width: 100% with max-width: 600px, so desktop readers get 600px and phones get the full screen at normal text size. More measured results are on the email client support hub.
Email template height: design for the reading task
There is no single ideal width-and-height pair for a whole email. A password reset, an event invitation and a product newsletter need different amounts of space.
Put the reason for the email near the top. Then give the reader enough detail to make the next decision. Avoid a tall decorative header that makes someone scroll before discovering the offer. For longer newsletters, use clear section headings and concise descriptions with links to the full material.
Check the bottom as carefully as the top. A missing footer might be Gmail clipping; content extending off the right edge is more likely a layout problem. Shortening the visible copy will not reliably fix either one until you know which problem you have.
Email image and banner dimensions
Work backwards from the space the image occupies in the email. If a banner displays at 600px wide, a 1200px-wide source can provide extra detail for a high-density screen when the template still displays it at 600px. That is an example, not a requirement to double every image.
Choose the height from the image's aspect ratio and the amount of space it deserves in the message. Avoid important text embedded in an image when it becomes too small to read on a phone. Keep the offer and main action available as text and a usable link as well.
Compress hosted images to improve download speed, then check that the result still looks good at its displayed size. If an image is stretched or blurry, inspect both the source dimensions and the dimensions the template requests. Outlook rendering checks can help when the same image behaves differently across clients.
HTML size and Gmail clipping are a separate problem
Gmail can hide the rest of a message behind a "View entire message" link when the message is too large. Mailchimp documents a 102KB clipping threshold. Leave room below it and inspect the message actually received, since your ESP may add tracking and formatting.
Compressing a remotely hosted image reduces its download weight, but does not remove the surrounding HTML. To reduce HTML size, remove unused blocks, redundant formatting and unnecessary repeated content while keeping the code needed for email-client compatibility.
MailSlurp's Gmail clipping experiment illustrates the difference. A short test newsletter with 117,984 bytes of decoded HTML was clipped in Gmail web. After redundant formatting was removed, a 17,952-byte version displayed its footer. The visible campaign copy stayed the same. The guide includes the test files and captures; it does not claim to establish an exact boundary for every Gmail message.
Ask your designer to distinguish decoded HTML size from the full EML file, which also includes headers, other message parts and encoding. Neither is the same as an image's width in pixels. For attachment and sending limits, use the separate email size limits guide.
Test the final dimensions through your ESP
- Create a MailSlurp device preview and copy its render address.
- Send the finished campaign to that address from the platform you normally use.
- Review the relevant phone and desktop results, including available light and dark modes.
- Inspect narrow text, column order, image sharpness, buttons and the complete footer.
- Make a focused repair and resend the campaign before approving it.
For the provider steps, follow the Mailchimp preview walkthrough or HubSpot preview walkthrough. Use a representative long version if personalization or conditional content changes the message.
A useful handoff to a designer names the exact failure: "The two product columns remain side by side in Gmail Android" gives them more to work with than "make it mobile friendly." Include the affected client and the campaign revision so the next test checks the same thing.
FAQ
What are standard email template dimensions?
Around 600px wide is a common desktop starting point, with a responsive layout for mobile. Height follows the content. Confirm the dimensions in the clients your recipients use before treating the design as finished.
What size should an email header image be?
Fit it to the template's content width and preserve its aspect ratio. A higher-resolution source can improve sharpness, but the displayed size and download weight still need checking. There is no mandatory header height.
Will smaller images stop Gmail clipping?
Compressing hosted images alone does not reduce the email's HTML. Removing an unnecessary image block can reduce markup as well, but the clipping repair should focus on the delivered message's HTML and a fresh Gmail test.
How do I know whether my email is too wide?
Check the delivered email on a phone and in your important desktop clients. Horizontal scrolling, cropped text, shrunken copy or a button disappearing beyond the edge are reasons to inspect fixed-width elements and mobile layout rules.