Each email client has different capabilities for displaying emails, and fans view emails on numerous devices with different dimensions.
Standard email template size, width, and height limits help ensure your emails display as intended on most email clients and screen sizes.
Ideal email width
The standard email width for optimal display across devices is 600 pixels. Widths up to 800 pixels may still display well for most customers, but you may still experience some challenges with Outlook or Yahoo.
Best email height
While there’s a limit to the width that an email app can display, the height of an email is completely up to users. Ideally though, the less a reader has to scroll - the better.
The best practice is to make your email height between 1500 pixels and 2000 pixels tall. We recommend no more than 3000 pixels in height.
This height provides you with ample space to share valuable and compelling content without becoming so long that customers don’t scroll all the way through. Even if you’re within the 1500-2000 pixel range, make sure your content isn’t too one-dimensional - not too much text or too many images. The best practice is the 60-40 rule: spend about 60% of the space on text and 40% on images.
“Above the fold”
Another best practice when it comes to height is to consider the “above the fold” rule. This refers to the space in your email that displays before customers begin to scroll. This is typically the first 250-400 pixels of height and the #1 most important space within an email as it influences how the reader interacts with the rest of your content. Make a strong impression and give viewers a reason to scroll for more.
Email size
Along with the width and height, pay attention to the file size of your email too. Emails that are too large will take longer to load (or may not fully load at all on some devices or internet connections) and making your customers wait isn’t the top-notch user experience you want. The standard recommendation is to keep your emails under 102 KB.
How to reduce email’s file size
Have a beautifully constructed email that’s just too big? Here are a few tricks to reduce the file size:
Use fewer images
Compress the images
Use web-friendly fonts instead of custom fonts
Use mostly JPEGs for your images - use GIFs sparingly when they’re beneficial and keep PNGs to a minimum because PNGs take up more space
Minimize complex HTML and CSS code
These can allow you to reduce your file size while still keeping your email template roughly the same.
Best sizes for email components
Here is an additional set of guidelines to help you proportion the different components of your emails.
Banner size
Your email banner is the space above the fold of your email where you introduce the main idea of the email. It could be announcing a sale or displaying a new product you’re launching - either way, the intent of the email should be clear.
The ideal email banner size is 600-680 pixels wide. The height can vary, but you want it all to fit above the fold, so 200-400 pixels is advised.
Header size
Your header is the block at the top of your email that contains your logo and sometimes even a menu bar. This is a great place to highlight your brand, and the menu bar can serve as a convenient way for customers to explore more information about your brand/
Your header should span the full width of your email, so 600-680 pixels wide. You don’t want it to be too tall, though. A height of 50-70 pixels is excellent if you don’t have a menu bar, and if you do have a menu bar, you can go up to about 150 pixels tall.
Button size
Within your email, buttons are opportunities for customers to convert from just reading to taking action. You can include buttons to shop your current sale, contact your business, or get to a particular page on your site like a page about a service you’re promoting.
Buttons can come in many different sizes and styles, but they need to be large enough for customers to be able to reliably and accurately click them. The suggested minimum size is 44 pixels x 44 pixels.
Make sure you also have enough white space around them so that they visually stand out and they’re easy to click without clicking something else by accident.
Image size
As we noted above, images can be tricky for email marketing because while you want them to be high-quality, you don’t want them to be so large that the email doesn’t load smoothly.
There aren’t any specific standards for pixel sizing for images; however, they should be no larger than the width of your email, which is 600-680 pixels.
Depending on how you use them, they could take up a large amount of your email (like banners) or be relatively small (like product images). At any size, be sure to compress your images to keep your email file size from becoming too large. TinyPNG, JPEG-Optimizer, and ImageOptim are widely used for compressing image files to reduce their size.
Preview dimensions
Some email clients have a preview window that shows customers a brief view of the email before they actually open it.
This is a great opportunity for you to reel in customers’ attention and encourage them to open your email. These preview windows are typically up to 600 pixels wide and 300-500 pixels tall.
Design your email so that this area’s visual and textual content is eye-catching and makes opening your email irresistible. Here’s a look at a preview window in Gmail:
Pre-header Size
A pre-header is a small piece of text that appears after your subject line in customers’ inboxes. On some platforms, it might also be called preview text or summary text.
The pre-header also appears above your email. Pre-headers should be short and snappy, between 40 and 100 characters long.
In that short text, you have an extra opportunity to tell customers why they should open your email. For example, this is a great place to note the sale your email is promoting.
Or, for an email newsletter, you can tout the stories that didn’t make it into your subject line.
Footer size
A footer should have basic information that closes out your email, including contact information, social media links, and an unsubscribe link.
This gives customers an easy way to get in touch with you and adheres to anti-spam regulations.
Email footers don’t need to be very large. We recommend 600-680 pixels wide and 50-100 pixels of height to offer the necessary information without taking up too much space.
Font size
Your font size needs to be large and clear enough to be readable, including for customers with visual impairments, but not so large that it makes your email excessively long. We recommend:
For body text: 14-16 px.
Headers and sub-headers: 18-22px.
For inclusive readability for all your customers, make sure that your fonts are not only large enough but also clear and easy to read.
Content block size
A content block usually contains text, an image, and a button. These can be used for different purposes in certain types of emails. For example, a promotional email might have product cards that promote certain products while an email newsletter might have a content block for each story.
Depending on your layout, a content block could be as wide as your email (600-680 pixels) or less. You might do two columns, for example, with each content block about 300 pixels wide. The height will depend on how much content you have and how long you want your email to be.
Try to keep your content area (the area with all your content blocks) 900 pixels tall or less. That’s typically enough to fit three rows of content blocks. Dedicating more space than this will risk clients getting bored or overwhelmed with all the information.