{"id":35309,"date":"2021-09-20T13:57:01","date_gmt":"2021-09-20T17:57:01","guid":{"rendered":"https:\/\/www.litmus.com\/?p=35309"},"modified":"2022-10-11T14:23:53","modified_gmt":"2022-10-11T18:23:53","slug":"convert-all-image-emails-to-html-emails","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/convert-all-image-emails-to-html-emails","title":{"rendered":"Making HTML emails instead of all-image ones is easier than you think"},"content":{"rendered":"\n\n\t
\n
\n \t
\n \t\t
\n \t\t\t
\n \t\t\t\t

Email\u2019s been around for 50 years as of this year, but in the beginning, it was all plain text emails. The idea of email marketing was born in 1978, but it wasn\u2019t until the 1990s that HTML email became a thing. In the early world of email marketing, email SPAM was a common annoyance and email clients used many different filters to help block SPAM. One of those filters blocked all-image emails. As early as 2007, Mailchimp<\/a> found that using a giant image in your email could cause your email to be blocked and increase your bounce rate by up to 23%.<\/p>\n

As email marketing has evolved, so have SPAM filters. These days an all-image email won\u2019t necessarily get you marked as SPAM, but just because you can <\/i>create all-image emails doesn\u2019t mean you should.<\/p>\n

I think it\u2019s time to have an honest conversation about all-image emails to address the reasons for and against them. And while we\u2019re at it, we\u2019ll take a look at how easy it can be to convert some all-image emails into live text emails.<\/p>\n

Let\u2019s evaluate all-image emails<\/h2>\n

Pros<\/h3>\n

\u201cWhat do you mean, there are pros to all-image emails?!\u201d you ask. Well, there are. All-image emails are not the email faux pas that they used to be. In fact, changing things up and sending an all-image email when you normally send live text emails may increase your engagement<\/a>. Anything new is probably going to cause your subscribers to perk up. But there are other things that make all-image emails the preferred choice for some companies.<\/p>\n

    \n
  1. Maintaining brand styles<\/strong>
    \nIf you\u2019re working for a brand that is very<\/i> specific about their brand styles being used, then all-image emails are probably the way to go. You can ensure the fonts are correct everywhere. And you can make sure any brand styles are maintained across all email clients. With all-image emails, you don\u2019t need to worry about the email breaking as much as you would with a live text email.<\/li>\n
  2. Visually impactful<\/strong>
    \nI\u2019m not a huge believer in this personally, as I believe you can make visually impactful emails without resorting to all-image emails. But there are some things you just cannot do everywhere<\/i> with a live text email (though not much if you\u2019ve got a great email developer). ReallyGoodEmails is full of some awesome email inspiration and a large chunk of it is all-image emails because, honestly, they\u2019re really nice looking.<\/li>\n
  3. Cheaper
    \n<\/strong>Some people would argue that all-image emails are cheaper because you don\u2019t need to pay a designer and <\/i>a developer. (In some cases, I\u2019m pretty sure these companies don\u2019t even use a designer). You can create the images in your favorite photo editing program and then save them out and put them straight into your ESP. It\u2019s a quick and easy way to send a beautiful email to your subscribers.<\/li>\n<\/ol>\n

    Cons<\/h3>\n

    Our own Magan Le asked me my thoughts on all-image emails and, honestly, I\u2019m not as anti-image-only emails as I used to be. I still don\u2019t think you can provide a great email experience for everyone with an all-image email. But, for some businesses, an all-image email may make sense. But before you make the decision, make sure you\u2019ve taken the downsides into account:<\/p>\n

      \n
    1. Poor accessibility<\/strong>
      \nAll-image emails are not as accessible as live text emails. \u201cBut I put in accurate ALT text, Carin!\u201d That\u2019s great. And there are some companies that do all-image emails with really good ALT text. But accessibility isn\u2019t just about putting ALT text in. Having an email that\u2019s accessible for all means that it can be read by everyone. <\/i>ALT text isn\u2019t any help for those with dyslexia or users with low vision who use settings to increase font size. Those are just a few of the issues that live text emails can handle much better than all-image emails.<\/li>\n
    2. Poor user experience<\/strong>
      \nEven for subscribers who have their images enabled, all-image emails can be a worse user experience than a live text email. Subscribers on slower internet connections may experience long wait times for images to load. Using large uncompressed images may eat up your subscriber\u2019s data if they\u2019re checking their emails while reading on mobile. And think about personalization! I can assure you that it\u2019s much easier to drop a merge tag into a live text email than it is to get personalized images for your whole list.<\/li>\n
    3. Missing or lost calls to action (CTAs)
      \n<\/strong>With all-image emails, any subscribers who have their images turned off will lose any CTAs that are in your image. Not to mention\u2014everything else you may have in your email. You may think that because you have a low number of subscribers clicking without opening your email that you don\u2019t need to worry about this. But how many subscribers are viewing your email with images off and don\u2019t click<\/i> because they can\u2019t see your CTA?<\/li>\n<\/ol>\n

      Those are just a broad overview of the downsides. If you need more convincing (or your client does), Magan goes much more in-depth with why you shouldn\u2019t send all-image emails<\/a>.<\/p>\n

      What\u2019s so great about live emails?<\/h2>\n

      You\u2019ve been sending all-image emails for your entire email marketing career and have been hearing the \u201cdon\u2019t send all-image emails\u201d refrain over and over, but you\u2019ve had nothing but success? That\u2019s great. But can I just let you know some of the awesome things about live emails?<\/p>\n

      Pros<\/h3>\n
        \n
      1. Easier to update<\/strong>
        \nAll-image emails are a pain to update. You have to update the image, re-save it, re-upload it, and then add it to your email. And you\u2019ve probably got some approvals in there as well. With a live email, it\u2019s a simple matter to update a misspelled word or an incorrect date. All you have to do is find the mistake and correct it. No need to go all the way back to the -literal- drawing board.<\/li>\n
      2. Better subscriber experience
        \n<\/strong>With a live email, the copy will be resized for subscribers with higher resolution screens, the text doesn\u2019t end up super small on mobile devices, and in Dark Mode you have some control over how the colors invert. And even if your subscribers have images off for some reason, the email content and CTAs will still be viewable.<\/li>\n<\/ol>\n

        Cons<\/h3>\n
          \n
        1. More expensive<\/strong>
          \n\u201cIt\u2019s too expensive to hire a developer for every email we do.\u201d Yeah, it probably is. That\u2019s why you shouldn\u2019t hire a developer to do every<\/i> email you send. Hire a developer to create a           modular system<\/a> that you can then implement yourself. Lots of email service providers (ESPs) offer templating systems, so hire a developer to build your company a customized template system. If your ESP doesn\u2019t have that, you can have a developer create partials and snippets in Litmus Builder and then use Drag-and-Drop and Visual Editor functionality to create the email in Litmus. I promise you will save time in the long run with less back and forth to make edits to your emails.<\/li>\n
        2. Harder to create
          \n<\/strong>Or are they? This is one of those cons that I hear from a lot of businesses. We don\u2019t have a developer so we can\u2019t do live emails. As pointed out above, many ESPs have templates and modular building solutions. And if your ESP doesn\u2019t, Litmus has a Visual Editor and the Litmus Community has many templates and snippets that you can use to build your own emails. We even have a           modular template<\/a> and snippets<\/a> to get you started.<\/span><\/li>\n
        3. Design isn\u2019t identical across all email clients
          \n<\/strong>Well no, most emails are not identical across all email clients. If you have a developer and lots<\/i> of time, you can probably get pretty close. But do you really need your emails to be identical across all email clients? Yes, the colors should be the same, but having rounded corners on your buttons, having a slightly different font, or having the layout be the same on a smaller screen are not issues that are going to affect your subscribers\u2019 experiences as much as unreadable text would be.<\/li>\n<\/ol>\n

          Converting all-image emails<\/h2>\n

          Now we get to the fun part. Converting those beautiful all-image emails into live text. There\u2019s a couple of techniques you can use to ensure that your email will still be as amazing and eye-catching as an all-image email.<\/p>\n

          Background Images<\/h3>\n

          One of the most common reasons for doing an all-image email is that having interesting backgrounds that aren\u2019t just white or a solid color creates a more visually interesting email. But you don\u2019t have to use a solid color as your background in your email. You can use background images<\/a> and they\u2019re supported in most email clients if you code them correctly. Windows 10 mail is the biggest exception. If you have a large subscriber base opening on Windows 10 mail, then you should steer clear of background images.<\/p>\n

          There\u2019s a big difference between an email coded with a background image and an email coded as only an image. If you\u2019re using a background image, all of the text is still visible even when images are off so the subscriber can still click on the initial call to action, as well as get an idea of what the email is about and who it\u2019s from:<\/p>\n\n\n\n\n\n
          \"dreamforce<\/i><\/td>\n\"dreamforce<\/td>\n<\/tr>\n<\/thead>\n
          Email with background images implemented and images turned on (Source: <\/i>Really Good Emails<\/i><\/a>)<\/i><\/td>\nEmail with background images implemented and images turned off<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

           <\/p>\n

          As opposed to an email where an image is used to create a background image effect. In this case, the initial CTA is lost (as is the logo and the company name). The email is not as impactful and, though the \u201cbest sellers\u201d section is still visible and actionable, the point of the email\u2014saving money on organizational bundles\u2014is lost:<\/p>\n\n\n\n\n
          \"openspaces\"<\/td>\n\"open<\/td>\n<\/tr>\n
          Hero piece is created with all-images\u2014images turned on (Source: <\/i>Really Good Emails<\/i><\/a>)<\/i><\/td>\nHero piece is created with all-images\u2014images turned off<\/i><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

           <\/p>\n

          Coding background images isn\u2019t the easiest thing, but we have a blog post to help you with that<\/a>. If you have templates set up with background images in Litmus, you can change out the background images in Visual Editor without even touching the code. Make sure the image sizes match the image that you\u2019re replacing and that you have compressed the image that you are using so it isn\u2019t too large.<\/p>\n

          Offset images and text<\/h3>\n

          Anything that breaks away from the expected or the regular has a tendency to draw our eye and you can see examples of this everywhere, including in email.<\/p>\n

          \"email
          The computer window is positioned between the image at the top and the lower black background for the headline in this email from Format (Source: <\/i>Really Good Emails<\/i><\/a>)<\/i><\/figcaption><\/figure>\n

          The above example has the image offset, which you can easily do as a whole image, but what if you want to offset a block of text? Well, you have a couple of options. You could offset it by just a little so that the text isn\u2019t actually offset, you just make it appear that the element is offset such as in this email:<\/p>\n

          \"warriors
          Source: <\/i>Really Good Emails<\/i><\/a><\/figcaption><\/figure>\n

          Here the top of the email is offset, but as you can see it\u2019s only a bit of blue that\u2019s actually in the white part, there\u2019s no text or images. So you can use an empty table cell. Or if you want rounded corners that work everywhere, you can use a decorative image. But more on those techniques later. In this case, the actual content of your email isn\u2019t offset, but it appears to be.<\/p>\n

          The other option is to have everything offset like in this email:<\/p>\n

          \"ziptop\"
          Source: my inbox<\/i><\/figcaption><\/figure>\n

          This email has the whole callout section offset in a block over an image. This is easy to do on the web with absolute positioning, but as that isn\u2019t supported everywhere in email it becomes a little trickier. There are two different methods that I\u2019m aware of. If you have more, let us know in the comments!<\/p>\n

          First, there is Faux Absolute Positioning. Steven Sayo<\/a> and Mark Robbins<\/a> have written up some great step-by-step guides to learn how to do this technique. Steven and Mark provide fallbacks to make it work in Outlook and, from my limited experience with it, it has pretty good support.<\/p>\n

          If you aren\u2019t that comfortable with code, you can also create this effect by slicing images and positioning them around the element you want to offset. A little bit messier, but it works. You do have to make sure to test, test, test as there is a higher probability of something going wrong and an image not lining up properly.<\/p>\n

          I\u2019m a fan of the faux absolute positioning because it allows emails to have that dramatic offset while keeping the email live text and not having to worry about lining up sliced images, but either method will work.<\/p>\n

          Webfonts & live text<\/h3>\n

          Maintaining brand standards is another big reason for using all-image emails, because you just can\u2019t get fonts to show up everywhere. I get that. However, there are a lot more fallback options than Helvetica and Arial. Encourage your company or your clients to look into having a standard fallback font in your brand guidelines so that you can make sure your message gets across in all email clients.<\/p>\n

          Samsung keeps it interesting by using Trebuchet MS as the fallback font for their headlines. Not quite the Samsung One brand font, but still more interesting and eye-catching than Helvetica, Arial, ALT text, or nothing:<\/p>\n\n\n\n\n
          \"samsung\"<\/td>\n\"samsung<\/td>\n<\/tr>\n
          Email with webfont enabled and images on<\/i><\/td>\nEmail with fallback displayed and images off<\/i><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

           <\/p>\n

          Adding web fonts<\/a> with interesting fallbacks is one of the quickest ways to help make your email stand out when you\u2019re not relying on images for your email. They\u2019re easy to add once and then implement across your entire email design system<\/a>. And once your email templates are set up with the web fonts, even non-coders can benefit from them if you\u2019re using a templated system.<\/p>\n

          Styled ALT text<\/h3>\n

          By styling the ALT text you are able to have the email retain some of the way it looks even with images off. We use styled ALT text here at Litmus to maintain a rough version of our logo, but you could also use this on those image-based buttons to make them stand out if you have to create all-image emails. You can style ALT text by adding CSS to the image tag and you can change background colors<\/a> and most aspects of the font for the ALT text. It isn\u2019t supported everywhere, but head over to our Ultimate Guide to Styled ALT Text<\/a> to see where it is supported and how to do it.<\/p>\n

          Images, empty table cells, and styled horizontal rules as design elements<\/h3>\n

          You don\u2019t need to have the entire image to create interesting elements. Sometimes just using parts of the image to finish it off and combining that with table cells can be used to create visual interest.<\/p>\n

          To create rounded corners that show up in all email clients, I will add images of rounded corners to the tops and bottoms of containers. You can do similar things to create angles or shapes as transitions between sections of your email. Instead of creating the entire shape with an image, use background colors for the part with text and then add an image at the top or bottom of a section to make it stand out.<\/p>\n

          You can also style your horizontal rules to create interesting transitions or dividers between sections. We use simple styles in Litmus to create a line, but there are lots of different techniques you can try<\/a> to create interesting dividers with just a horizontal rule. (Let us know how it goes!).<\/p>\n

          We also have a colorful divider that we use to break up content. This is done completely with background colors and table cells:<\/p>\n

          \"litmus
          From our Litmus Live Early Bird email<\/i><\/figcaption><\/figure>\n

          Get creative with your code and see what you can do without<\/i> images!<\/p>\n

          Bulletproof buttons<\/h3>\n

          This is my biggest pet peeve about all-image emails. Calls to actions that are image-based are hard for your subscribers to take action on if they can\u2019t see them. If everything else is too hard to implement, please, at least start using live text buttons for your calls to action<\/a>.<\/p>\n

          These are two different emails, one that uses a live-text button and the other is an all-image email with the button in one of the images. The email on the left is much more actionable than the email on the right.<\/p>\n\n\n\n\n
          \"busuu<\/td>\n\"a<\/td>\n<\/tr>\n
          Email with live-text button with images off (Source: <\/i>Really Good Emails<\/i><\/a>)<\/i><\/td>\nEmail with image-based button with images off (Source: <\/i>Really Good Emails<\/i><\/a>)<\/i><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

           <\/p>\n

          If your argument for using all-image emails is that you don\u2019t get many clicks without opens, so you must not have a large audience with images off, look at what your CTAs look like with images off. Not many people would click through if they didn\u2019t know what they were clicking on.<\/p>\n

          There are several different ways to create live-text buttons<\/a>, so make sure to use a method that works for your audience and, as always: Test, test, test!<\/p>\n

          Converting those all-image emails<\/h2>\n

          I reached out to some fellow email developers to help me show you how some of these techniques can be used to convert all-image emails into live text. You\u2019ll notice that converting these emails to live text didn\u2019t just enhance the version of the email with images off, it also improved the mobile and the Dark Mode version of the email.<\/p>\n

          S\u2019well email conversion<\/h3>\n

          Anne K. Tomlin is the founder of Email\u2019s Y\u2019all. An experienced coder who knows the ins and outs of email quirks, she was all about showing off the difference live-text can make in an email.<\/p>\n

          In her own words: All-image emails don\u2019t get your message to people who have images blocked by default and anyone using a screen reader or digital assistant (Siri, Alexa, etc). If your goal is conversions, you haven\u2019t even given those people a chance to convert. S\u2019well\u2019s email was 10 times as bad as a normal image-only email because there was no alt text at all.\u00a0 A screen reader or digital assistant would read out: \u201cCelebrate bold moves, big ideas, and joy! View this email in your browser. Shop. Stories. About Us. S\u2019well.\u201d and then immediately jump to read out the footer.\u00a0 What a horrible experience!\u00a0 Subscribers that have images blocked literally see a blank page.\u00a0 No one is going to look at a blank page and think, \u201cI should check this out in a browser!\u201d and click the \u201cview in browser\u201d link.\u00a0 You have 5 seconds to capture a subscriber\u2019s attention, so if you have an all-image email and those images don\u2019t load by default, you might as well not have sent an email at all. In fact, that subscriber could look at it as you are sending them nothing at all, so they should just unsubscribe.<\/p>\n

          Original email:<\/p>\n