HTML Emails vs Image Slices: The Pros & Cons

Emails come in all shapes, sizes, and formats–some of which are better suited to the whims of the many email clients that exist than others. But if you’ve tried your hand at email design, you may have unfortunately realized that these email clients aren’t always reliable at displaying your emails as you envisioned. So, what options do you have? In this post, we’re going to compare two main methods of email design—HTML-coded emails and image slices—to see how they can boost or hinder your email creation process.

HTML emails

HTML emails are emails that are created and designed using hyper-text markup language. These emails can also be built using MJML, a framework that’s very similar to HTML, but specifically for email design. To create emails from scratch, you’d need some form of HTML or MJML coding experience, but you can also use services that provide email templates, or you can use a company like Scalero to create custom templates for you.

Image slices

On the other hand, image slices are emails that are mostly or entirely composed of images. Image-based emails are fairly easy to create since they normally don’t require any coding and the design of these emails remains static, no matter the email client. This type of email is an easier option to explore if you’re a beginner to email design, you have graphic design experience, and/or it’s important to you that the elements of your email render the same regardless of the device or email client they’re displayed on.

What are the advantages & disadvantages of HTML emails?

Advantages

Responsiveness

HTML emails give you the ability to create dynamic fields and optimize for both desktop and mobile viewports. As a result, your subscribers can enjoy more personalization, such as being greeted by their first name or having certain products recommended to them, and emails can be adjusted to fit the device your recipients are using.

Design flexibility

Emails created with HTML are also easy to manipulate design-wise. If you want to change an element, such as a product picture, a CTA button, text, background, or any colors used in the email, you can do so without having to design an entirely new email. You also don’t need any design software–you can simply use the templates provided by your email marketing tool or many of the coding platforms available for free use on the web. To learn more about how to start email designing, check out our resource here.

Loading speed

The file size of an HTML email directly affects how long it takes for the email to load, but coded emails tend to load much faster than image-based emails. Even if you notice that your code is a bit too long, there are tools you can use to “minify” or shrink the overall file size, which will not only increase loading speed, but will also prevent your emails from getting cut off by certain clients. Emails being clipped is particularly a problem for Gmail subscribers.

Images aren’t necessary

Of course, you still have the option to use images with HTML emails, but as mentioned before, coding your emails gives you a lot of flexibility when it comes to design. You have the ability to use an array of vivid colors and to manipulate the overall structure of your emails to spice up your message without compromising on the responsiveness. Subscribers can also understand the main objective of the email even if they have image-blocking enabled because of the text coded within the email.

Disadvantages

No full support for all fonts

The majority of email clients don’t provide full support for fonts that exist outside of the web-safe font sphere, which is why it’s highly recommended to use email-friendly fonts to make sure your subscribers can read your emails as intended. Unfortunately, this means you shouldn’t custom fonts for any important text, but there are some good email-safe options available that may still match the feel of your brand.

Coding for different email clients

The world of email design is somewhat like the wild west–email clients are constantly coming up with their own ways of rendering, while email designers are trying to keep up. Frameworks like MJML have helped make this process a little easier, but if you’re coding an HTML email from scratch, you may quickly grow frustrated by the amount of tricks needed to get your email to render properly with multiple email clients. If you’re new to the world of coding for emails, learning to implement all the different hacks can be especially daunting.

Easy to make mistakes

With the amount of coding that is sometimes necessary to create a beautiful email, making mistakes during the email design process isn’t uncommon, even for more experienced email developers. As a result, emails need to constantly be tested for silly errors, but also to make sure they’re rendering properly for the vast majority of email clients that subscribers use.

Harder to optimize for dark mode

The use of dark mode has been growing in popularity over the years, forcing many email designers to build a complementary version of their emails just for dark mode. The advantage is that you have control over how your email looks regardless of the mode, but it can be a hassle to have to create that extra code.

What are the advantages & disadvantages of Image Slices?

Advantages

Less code needed

With an image-heavy email or an email completely made out of images, you may not need any coding, or at least a very small amount. You can basically create the email in a design software with all your text and graphics contained within the images and you won’t have to worry about any of it shifting or displaying in an unintended manner.

Custom fonts are easy to implement

We’ve stressed how important email-safe fonts are for the readability of your emails, but in this case, they aren’t really necessary. Since your text is contained within an image, you have the freedom to use any font you want, allowing you to use custom fonts and maintain the identity of your brand.

No changes in dark mode

Whether your subscribers use light or dark mode, your image-based email will look the same regardless, which means no color changes. However, when designing, this means you’ll want to make sure that your images will look good in either mode.

Disadvantages

Not much room for responsiveness

Because images are static, you won’t be able to include any dynamic fields for personalization or change out elements of the email without a redesign. There also isn’t much flexibility when it comes to optimizing an image-based email for desktop or mobile. You can’t design too much for either viewport because you risk alienating the other. For example, the text within the images may appear too small on desktop or the actual graphics may appear blurry on mobile. However, a workaround for this issue is to use two images of the same block—one for desktop and another one for mobile, which is possible in most ESPs.

Bad for accessibility

Accessibility has become a must for email—recipients expect to be able to adjust emails to their needs, especially when it comes to text, but this can be difficult or even impossible with image-heavy emails. When text is embedded in an email, screen readers won’t be able to read the email for recipients who need the extra help. A lack of live text will also make it more difficult for recipients to search for your email later on—they’ll only have the subject line to go off of. This is why it’s important to not only use alt-text, but to make sure that the most crucial parts of your message are represented as live text somewhere within your email.

Susceptible to being flagged as spam

Emails that are completely image-based are at high-risk of being blocked or thrown into the spam folder by email clients. This is because there are many spammers who use image-heavy emails to their advantage in order to keep their messages hidden, so if an email client can’t “read” the email, this sounds an alarm. Email clients are evolving to use other factors to determine legitimacy, but using live text for the most important parts of your message is the best way to go.

Images–and the entire email itself–may not load

Not all of your subscribers will have automatic image loading turned on. In fact, many email clients’ default setting is to block images for privacy reasons, and if your subscribers don’t know how or prefer not to display images, they won’t be able to see any graphics. If your email is entirely made of images, you can see how this would be a bad thing. 

Here are the major differences between HTML emails and image slices summed up for you.

What are some workarounds if you want to use images?

Use alt-text

Even if your images refuse to load, alt-text can be used to partially save the integrity of your email by giving subscribers a basic idea of your message. Alt-text should also be used when coding HTML emails.

Mix and match

Depending on your email creation platform, you can use both text and images to boost your communication. With a drag-and-drop email builder, you should be able to do this fairly easily. However, if you’re trying to custom design an email in a builder like Figma, you would only be able to use images.

Watch image size

Be mindful of the file size of your images. Yes, you want to use good quality images that will properly show off your products and maintain the professionalism of your brand, but if these images are constantly slow to load because they’re too big, your subscribers may become frustrated over time. Mailchimp recommends a max size of 1MB for images.

So, which is best: HTML emails or Image Slices?

The answer is that it depends. We would lean towards HTML emails because they tend to be more reliable overall and provide more room for personalization, but you might find image slices easier to implement. For example, let’s say you run a travel agency with multiple sales consultants and you would like to give off a warmer impression to new leads by having your consultants introduce themselves in a welcome email. With an HTML email, you could include dynamic fields that would pull the name, contact info, Calendly link, and even picture of any of your consultants from a CRM, like Salesforce. But this wouldn’t be possible with an image-based email. However, if you run a small business, such as a local restaurant, maybe personalization isn’t a huge priority for your email marketing and you just need a quick, easy way to create custom emails with vivid graphics. In that case, using image slices may be a better option.

The most crucial thing is to remember that the purpose of an email, regardless of its format, is to communicate effectively with your subscribers. If you still need help figuring out what type of email will allow you to do so, Scalero’s team of email specialists and designers can not only point you in the right direction, but also design custom email templates for you. In fact, Scalero has run multiple tests on image slices vs HTML, live emails, and the results have been surprising! Reach out to us today to learn more!