deliverability letter

The Importance of Email File Size

Thoughts by Gracija Atanasovska • Writer Bento

When discussing email marketing and crafting the best email campaign, we often forget about a very important element: the email file size. While we’re in over our heads about the subject line, the email copy, the CTA button, and email personalization, we don’t usually stop to think about the email file size, the HTML file that we’ve sent, email load times, and the fully loaded email size.

Sure, this might not be the most interesting of email marketing topics, but that doesn’t make it any less important. Your email’s size can determine how much bandwidth your subscribers need to download and read the email. So, you probably see why this can be a problem - if your users or subscribers can’t load the email, or it takes ages for that to happen (especially on a mobile device), it’s less likely that they will engage or let alone convert.

So, I encourage you to read further and let me take you through the basics of email file size. I’ll also share some tips on reducing the size of your emails and the images inside them, so let’s get into it.

TLDR: Email file size is an often neglected email marketing issue, yet it’s so important. Email file size is measured through code weight (the weight of the HTML code) and through the fully loaded email weight, which is a combination of the HTML code and external assets like images. The HTML file size is the HTML code and it doesn’t include any images - the maximum recommended size is 100KB.

You can lower the size of your emails if it exceeds this number by cleaning up the email code, minifying the code, creating a simpler email design, or moving some of the CSS from Inline to Embedded. The most common external asset are the images included in the email, which can be reduced through image compression. The fully loaded email size combines the HTML email size and the external assets (the images). Here it’s essential to monitor the email loading times - you have to consider users with slower network connections as well, which means your emails need to be light and easy to render with almost every recipient.

How Can We Measure Email File Size?

Email file size is measured in two ways:

  • Through the code weight.

  • Through the loaded email weight.

Code Weight

When we say email code weight, we mean the bytes in the HTML code of the email (each character weighs 1-2 bytes), which can include text, links, HTML tables, etc. This doesn’t include the size of any accompanying images or media because these are linked from the .html file and are only downloaded when the user opens them.

Loaded Email Weight

The loaded email weight includes the elements that the user needs to render your email fully, such as assets like images, videos, and fonts.

HTML File Size

The maximum recommended size of the .html file should be 100KB - if it’s larger, you risk deliverability issues and issues with displaying your email. And if you don’t reduce the size, Gmail certainly will - they clip the .html file at 102KB. This is definitely not good for business because it practically ruins the end of your email and can wreak havoc on your layout.

How to Reduce Email File Size

Even though most of the emails you send should easily be under 50KB, there are still some instances where the email ends up larger than desirable. But, there’s no room for despair when this happens, as there are several ways you can reduce the email file size and have your email be downloaded whole.

Let’s take a look at what you can do to keep your email fit.

Make Sure You Clean the Email Code

The email world is in constant flux, so it’s not uncommon to see email templates with outdated code, taking up a bunch of unnecessary space. Make sure you regularly maintain your email templates and code, and you can easily save a couple of KBs right there.

Keep It Simple With the Code

You don’t have to get carried away with the code. Some email templates can do away with the extra code and additional table elements. In fact, most layouts are perfectly fine with 5-10 tables; yet, out there, you may encounter code with 30-40 tables. Besides, the fewer tables you have, the easier your code is to read.

Move Some of the Code From Inline CSS to Embedded

It’s still not time to move all the code, aka all the styles into CSS, but if you do it well, you can move some of the inline styles to embedded styles and reduce the code.

Make Your Email Design Simpler

Did you know that single-column email templates use significantly less code? Go back to the design and do some tweaks. It’s pretty straightforward; the simpler the design, the lighter the email.

Minify or Minimize Your Code

Minification or minimization of your code is an activity through which you remove the unnecessary comments and spaces in code, which can greatly affect the email size. However, you have to be careful when you do this because many email service providers (ESPs) demand a maximum line length which could break your code by forcing a new line.

External Assets Size

This is the size of your images and external CSS style sheets, but because external stylesheets are kinda rare, I’ll focus on the images here.

The maximum size for the majority of images out there is 100KB. However, there are some images, like high-res ones or animated gifs, that go up to 500KB. The good news is that there are ways you can compress images. You can use these tools to do just that:

  • Caesium - good for Windows users;

  • ImageOptim - good for Mac users, you can also use it as a web service;

  • Use a CDN - Many CDN services also have built-in image optimization. Some of them also adjust the image compression depending on the bandwidth available.

Be sure to use the appropriate format for the images, .jpg for photos, .png for alpha channels, and .gif for graphics. And don’t forget to simplify the design, something I mentioned earlier. This means including fewer images, and smaller and simpler images that can be easily compressed into smaller sizes.

Fully Loaded Email Size

This size refers to the combination of the email size when it’s opened and when the user downloads everything. This fully loaded email size can vary depending on where the email is being opened.

The key issue in the fully loaded email size is the time it takes for it to load. Sure, you may be testing your email loading time in a place with a very fast internet connection, but your recipients might not be so lucky opening the email from public wi-fi or a 3G mobile network.

See it this way: with a good connection, the fully loaded email size of 1MB will load instantly. But on a 3G connection, it can take from 2-14 seconds for this to happen. See how big the difference is and why it’s so important to monitor your email size?

Conclusion

The issue with email file size is pretty straightforward - keep it simple and light, and you’ll do just fine. And yes, if this means that you’ll have to make a compromise and change and simplify your email design, then so be it. Whatever improves your email loading size also improves how quickly customers see your email.

So, make sure to look at the advice and recommendations I provided here on HTML email size and image optimization. Also, experiment a little with the code and see what has to stay and what you can leave out and lighten the load.

Experiment with the images as well, and try out various ways to compress them. And, don’t forget to make your email look good and functional even without the images because sometimes it will take a bit more for them to load. Your email needs to be readable without them.