Email Previews play a vital role in the success of your campaigns, offering a first impression of your email’s content and design. However, factors like HTML size, image size, and pixel height can disrupt both the preview experience and the email's overall performance. These elements influence how quickly your email loads, which can result in distorted visuals, incomplete previews, or no previews at all. Slow loading times may also disengage your audience, reducing the impact of your message.
Fortunately, by following a set of best practices, you can ensure your emails render properly across devices and provide a seamless, optimized experience for your readers.
HTML size
The best practice is to keep your HTML size below 102KB. Going over this limit can lead to slower email load times and email clipping, where only part of the email is displayed.
For example, if your email exceeds 102KB, Gmail will show just the first 102KB and clip the remaining content, with some variations depending on the device.
Example: How Gmail handles large emails on different platforms
-
Desktop (Web Client):
Gmail displays the first 102KB, followed by a "[Message clipped] View entire message" link at the bottom. When users click this link, the full email opens in a new tab. -
Mobile App (Gmail on iOS/Android):
Similar to the desktop version, Gmail shows the first 102KB with a "View entire message" link. However, the clipped content may be less visible, potentially reducing user engagement. -
Gmail's Promotions Tab (Mobile/Desktop):
In the Promotions tab, emails over 102KB are also clipped at 102KB. The "View entire message" link may be more prominent, depending on the tab's layout.
These differences affect how much of your email is initially visible to users, so keeping your HTML size under 102KB helps ensure the full email is displayed without any clipping issues.
Image size
While the recommended image size in your email editor is under 2MB, we suggest keeping your images below 200KB to avoid potential deliverability and display issues.
If the image you're trying to upload exceeds 2MB, you'll receive a warning prompting you to upload an optimized version of the image.
What issues do large images cause?
- Load Speed: Larger image files (in KB or MB) can cause delays in email loading. Some recipients may see a blank spot where the image is supposed to appear until it fully loads. This is particularly problematic for mobile users on slower connections.
- Email Client Restrictions: Some email clients have limits on image sizes or may not load images by default unless the recipient allows them to. To optimize for all email clients, it's best to compress your images while maintaining quality.
Pixel height
It’s best practice to limit the total pixel height of your email to around 5000 pixels. While most web clients have a pixel height limit of 7000, some desktop and mobile clients cap it at 5000. If your email exceeds these limits, the footer or disclaimer may be cut off. Even if the email renders fully, a longer height can lead to slower load times, negatively affecting reader engagement.
How does excessive pixel height affect engagement?
- Scroll Fatigue: Emails with excessive pixel height (too long) can lead to user fatigue as recipients are required to scroll excessively. This might result in lower engagement, as users might not reach the call-to-action (CTA) or key content at the bottom.
- Clipping: Certain email clients, like Gmail, may clip overly tall emails, especially if the combination of HTML and image sizes exceeds their limits. This could result in important content being hidden from the recipient unless they actively choose to view the entire message.
- Mobile Rendering: On mobile devices, pixel height plays a crucial role in how readable your email is. If the email is too long, important information might be pushed down, requiring users to scroll more than they’d prefer, potentially lowering the email’s effectiveness.