{"id":4827,"date":"2018-09-19T00:00:00","date_gmt":"2018-09-19T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/email-pixel-art-the-rarest-and-coolest-defensive-design-tactic\/"},"modified":"2025-10-07T13:50:05","modified_gmt":"2025-10-07T17:50:05","slug":"email-pixel-art-the-rarest-and-coolest-defensive-design-tactic","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/email-pixel-art-the-rarest-and-coolest-defensive-design-tactic","title":{"rendered":"Email Pixel Art: The Rarest and Coolest Defensive Design Tactic"},"content":{"rendered":"

Image blocking is common<\/a>, with some email clients disabling images by default<\/a> and some subscribers turning off images to save mobile data or for other reasons. Because of that, email marketers need to use defensive design techniques to ensure that their message is conveyed when images are disabled.<\/p>\n

Defensive design, which also helps with email accessibility<\/a>, consists of three key tactics:<\/p>\n

    \n
  1. Using HTML or live text as much as feasibly possible, instead of embedding all of your text into your images<\/li>\n
  2. Adding ALT text to your images\u2014or better yet, styled ALT text<\/a><\/li>\n
  3. Using background colors on table cells<\/li>\n<\/ol>\n

    Let\u2019s focus on that last tactic.<\/p>\n

    One of the big things that happens when images are blocked is that your email loses its structure. The email flattens out and everything starts blurring together. Using HTML text and styling the size and color of your ALT text can help create structure and hierarchy, but background colors are even more powerful.<\/p>\n

    Adding a background color to a table cell creates banners, content blocks, and is essential to making bulletproof buttons<\/a>. This Twitter email demonstrates how background colors on table cells can maintain the integrity of an email design<\/a> when images are blocked.<\/p>\n

    \"Defensive<\/a><\/figure>\n

    That\u2019s great, but background-colored table cells can do more\u2014much more. In addition to being used along with HTML text to create email content that is unaffected by having images blocked, table cell background colors<\/a> can be used as a fallback for images.<\/p>\n

    You do this by creating a mosaic out of a series of nested tables with background colors applied to the table cells. You then slice up the image so that each slice fits perfectly into the table cells of your mosaic. That way, when the overlaying image is blocked and disappears, the underlying mosaic of colored table cells appears.<\/p>\n

    Examples of Email Pixel Art<\/h2>\n

    To demonstrate the power of email mosaics, here are a few examples, each showing the email with images enabled on the left and images disabled on the right:<\/p>\n

    Mothercare<\/strong> creates pixel art of their stroller in this email, which also makes liberal use of styled ALT text throughout.<\/p>\n

    \"email<\/a><\/figure>\n

    Pizza Express<\/strong> uses pixel art in this triggered birthday email, which also includes a personalized image and corresponding personalized styled ALT text.<\/p>\n

    \"email<\/a><\/figure>\n

    PlayStation New Zealand<\/strong> uses an email mosaic to create the symbol of the Autobots, cleverly playing off of Transformers\u2019 \u201crobots in disguise\u201d slogan.<\/p>\n

    \"email<\/a><\/figure>\n

    Benton Lingerie<\/strong> captures the sentiment of the message of Mother\u2019s Day email, using email pixel art to create a large pink heart.<\/p>\n

    \"email<\/a><\/figure>\n

    Design & Strategic Considerations<\/h2>\n

    Before creating an email mosaic, consider the following design and strategy issues:<\/p>\n

    1. Email pixel art can get heavy<\/strong>, which can result in your email being clipped in Gmail if the email exceeds 102KB. So keep things simple, focusing on a minimum viable pixel art image.<\/p>\n

    For instance, Benton Lingerie\u2019s pixelated heart could have been way more contoured with the doubling or tripling of the number of table cells. But their execution is very clearly a heart and so is plenty effective as is.<\/p>\n

    2. Email pixel art can be a lot of extra work<\/strong>, so it\u2019s generally best to reserve them for high-volume or high-impact emails. That means perhaps using them for key broadcast emails for new product announcements, Cyber Monday campaigns, and similar big events. But it also means considering them for high-volume triggered emails, such as the Pizza Express birthday email above.<\/p>\n

    Similarly, you might consider them for high-volume email elements, such as your logo or a footer element. If you do this, implement them as a partial<\/a>, so you can change or update the pixel art across all instances of your logo or footer.<\/p>\n

    Whichever approach you choose, you want to be sure to get reap the impact of your extra design effort.<\/p>\n

    3. Email pixel art isn\u2019t always compatible with responsive design.<\/strong> Depending on how you code your responsive email, email mosaics may not translate from desktop version to mobile version. Hiding and stacking email content in your mobile version may break your email pixel art. Be sure to consider this when designing your email mosaic.<\/p>\n

    4. Email pixel art doesn\u2019t have to try to replace the blocked images.<\/strong> As we saw in the PlayStation and Benton Lingerie examples, the email pixel art can be totally different from the images in the email. Don\u2019t feel like you always have to create the 8-bit version of your hero image. Sometimes conveying the spirit of an image is just as effective\u2014and may be easier to code and less to deliver.<\/p>\n

    5. Some emails are more likely to have images blocked.<\/strong> The possibility of having the images in an email blocked is not uniform. The chance of image blocking is higher at both the very beginning of an email relationship and toward the very end.<\/p>\n

    For the very first emails you send a subscriber, they may have images blocked for unfamiliar senders. That means that you may want to devote more effort to defensive design for your welcome email(s) and for your transactional emails.<\/p>\n

    For emails that come late in a relationship\u2014that is, after a considerable period of inactivity\u2014images may be blocked because they\u2019re in the subscriber\u2019s spam folder. That means that you may want to put extra defensive design effort into your reengagement emails and re-permission emails.<\/p>\n

    In both cases, that extra effort may include email pixel art, in addition to the liberal use of HTML text and styled ALT text.<\/p>\n

    \n\n\n\n
    <\/td>\n\n

    Optimize for Image Blocking<\/h2>\n

    Litmus Builder allows you to easily code emails and preview them in 70+ email apps and devices. Toggle images on and off with a single click to perfect your email pixel art.<\/p>\n

    Build great emails \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n

    How to Make Email Pixel Art<\/h2>\n

    With those considerations in mind, what\u2019s the best way to create email pixel art?<\/p>\n

    To get started, we recommend:<\/p>\n

      \n
    • Image to Table Converter<\/a><\/li>\n
    • Email Optimized Dogs<\/li>\n
    • Image-HTML app<\/a><\/li>\n<\/ul>\n

      However, you may not find those helpful in all instances. More often than not, we expect that you\u2019ll want to build your email pixel art manually.<\/p>\n

      If that\u2019s the route you go, here are the main steps you\u2019ll need to take:<\/p>\n

        \n
      1. Sketch out a minimum viable email pixel art image on graph paper or in your design software of choice.<\/li>\n
      2. Use the slice tool in Photoshop or other design software to divide your image into the necessary block sizes to create your email mosaic and save those out as separate images. Use a file naming convention that makes it easy to puzzle your overall image back together.<\/li>\n
      3. Using a series of tables nested inside a table, create the blocks in the positions that you need to accommodate your design.<\/li>\n
      4. To ensure that your sliced images fit together seamlessly, specify that cellpadding=\u201c0\u201d, cellspacing=\u201c0\u201d, and border=\u201c0\u201d are set for your tables.<\/li>\n
      5. Apply the needed bgcolor to each of your table cells.<\/li>\n
      6. Preview your email with images disabled to make sure it\u2019s rendering as intended.<\/li>\n<\/ol>\n

        Here\u2019s a great example of email pixel art from Action Rocket\u2019s EmailWeekly newsletter.<\/a> Select \u201cToggle Images\u201d in the Litmus Builder interface to view the email with images off.<\/p>\n