Now that we've covered file size guidelines, including email weight, image size, and load time, you know that an ideal email will be about 60KB, but anything under 100 KB is generally okay. If you're far above this, we recommend a few ways listed below to reduce the weight of an email's HTML.
Depending on the email's content, there may only be so much you can do to reduce the amount of code. In drastic situations, you may consider using a more image-based email. This does contradict traditional best practices that encourage using a balanced mix of HTML text and images, but rules are meant to be broken and tested-and image-heavy retail messaging often proves those emails can still make a major impact if done well.
Weigh the pros and cons before doing anything drastic. For example, determine if fixing email truncation in a particular email client or optimizing for the images-off view is your priority.
Here are a few tips to reduce the size of your email's HTML, based on your level of need.
Easy fixes
- Removed unnecessary breaks
- Remove hard returns and spaces
- Remove unnecessary comments (comments are tags inserted by coders to make it easier to edit HTML...in emails they are often used to show where certain parts of the email begin and end, such as "Start navigation" or "End footer")
- Ensure all text styles are placed within a table row, rather than being repeated multiple times in paragraph tags
- Avoid image maps if possible-they add many lines of extra code
- Keep alt text concise (Gmail won't display alt text if you add too much, so don't write a novel)
- Use code shorthand to specify CSS padding over long form items (for example, use this: padding: 10px 5px 10px 25px; instead of this: padding-top: 10px; padding-right: 5px; padding-bottom: 10px; padding-left: 25px;)
- Remove redundant HTML if it doesn't affect rendering (extraneous widths, heights, nested tables, extra font properties, etc.)
Drastic measures
- Reduce the amount of content in the email
- Remove all comment tags when the email is complete (...but save the commented version if it helps make coding the next campaign more efficient)
- Remove code indentation prior to pasting into the application
- Convert text and images to all-image content to reduce code
For code samples and more useful tips, review our guide on Email Coding Fundamentals within the Email Design Toolkit.