---

The main focus of email designers and developers alike is to bring the best experience to the viewer. When producing an email that matches this objective, many tricks and hacks are used in the process to ensure that the email displays properly on all email clients, or at least falls back gracefully. Because of how many fixes can be added, we could unintentionally create problems for the reader—such as whether or not they can even view the email in their inbox. That’s why it’s important to have a basic understanding of how to minify email HTML.

What Does "Minify" Mean?

When we minify something, we are making it smaller. In email, it means to remove unnecessary code, characters and spacing to reduce the file size. Again, creating the best experience for subscribers, through either intricate design or interactive code, can require lots of fixes. This leads to the addition of extra lines of code in our HTML files. With each line of code, the file size of the email grows larger. The more complex the email, the more lines of code we need.

How File Size Affects Email

There are three ways in which file size affects email: rendering, deliverability and load time.

1. Rendering

Rendering is how your email displays on an email client. As mentioned before, the aim of an email marketer is to create engaging content for our audience. The last thing we want is for the email to not render properly, which would spoil the experience for subscribers. An example of where this is an issue is in Gmail. Currently, Gmail clips an email if its file size is over 102KB. A full in-depth explanation can be seen on the Email Bugs repository, by fellow email developer and #emailgeek, Rémi Parmentier.

2. Deliverability

Next is deliverability. Creating brilliant and engaging content is great, but what’s the point if your audience never actually gets to see it? That’s what makes deliverability so important. Email on Acid conducted a study on the impact email file size has on spam filters. The results from the test conclude that emails between 15KB-100KB pass with no issues. When the file size grows beyond 100KB, problems start to arise. [caption id="attachment_9143" align="alignnone" width="500"] Example of spam filter failure due to file size[/caption] It is worth noting at this point that your sender reputation also impacts your deliverability. Whilst reducing file sizes can help, there are other factors to look into if you’re struggling to reach inboxes. Chris Arrendale, Chief Privacy Officer at Trendline Interactive, suggests these tips to improve deliverability.

3. Load time

The last point is load time. Generally speaking, subscribers aren’t going to wait longer than a couple of seconds (if that) for an email to load.

Related: What is an Acceptable Email Download Speed?

In addition to speeding up load time, minifying email code also helps your subscribers who use mobile data. A study by cable.co.uk found that North American and Western European countries have some of the highest costs per 1GB of data. Between desktop, webmail and mobile, mobile still holds the majority of email opens, reigning at over 40%. Therefore, by keeping the file size of your emails down, you are not only helping yourself but your customers too.

Check out 10 Easy Ways to Improve Mobile Email Design

Now that you know the reasoning behind keeping your file size down, it’s time to put it into practice. To do this, Email on Acid recommends removing comments from your code, as well as any redundant or unused styles. It’s also a good idea to have a landing page so you don’t have to put as much content in the email. In addition to this, you can try taking out the white space and tabbing within your code. [caption id="attachment_9144" align="alignnone" width="600"] White space and tabbing in email code[/caption] Manually combing through your code looking for unused styles and taking out the white space can be tedious and time-consuming. Luckily for us, there is a tool that has been specifically created to minify HTML emails.

Your One-Stop-Minify-Shop

HTML Crush is a tool from fellow #emailgeek Roy Revelt. Built for the sole purpose of minifying HTML emails, HTML Crush not only removes comments but knows not to remove Microsoft conditional comments. Another feature is that it can remove white space and unnecessary line breaks. In general, you need to be careful with how many characters are on a single line of code. Microsoft Outlook on desktop and Mozilla’s Thunderbird have been known to struggle to understand long lines of code and can also trigger spam filters. However, with some testing, Roy has found that 500-character limits work best for email. As such, he has it set as the default within his tool.

Remove Irrelevant CSS

Finally, to condense a file size even more, remove any unused CSS. You can do this by using another tool from Roy called EmailComb. EmailComb removes any CSS styles and classes that aren’t used in the email. However, occasionally a receiving email client will append classes and IDs to an email's code. As it’s built specifically for email, EmailComb has an exclusion section where you can declare which IDs and classes the tool should skip. In contrast to other minify tools, this one gives you greater control over the removal process and ensures that your email enhancements stay in place. You may notice that there is a toggle switch to minify your code within EmailComb as well (above). This minify toggle uses HTML Crush. If you are happy with the default settings of HTML Crush, then this could be a time-saver for you. On the other hand, if you want to change how many characters are on a line of code, you may want to minify your code directly in HTML Crush after removing unused CSS with EmailComb. The choice is yours.

Check and Test Every Email

On a final note, it is always best to test your code. My process is to test my original code, and once it renders properly, use EmailComb to remove unused CSS. Then I TEST AGAIN. If everything still renders properly, I then minify the code using HTML Crush.

Be patient with trial and error

If the email doesn’t render, I simply read the list of classes and IDs removed by EmailComb and add them to the exclusion list one by one. I then continue testing the email to debug which class or ID affects rendering when it’s removed.