Why should I avoid using images for CTA buttons in email marketing?

Summary

Relying solely on images for CTA buttons in email marketing presents several challenges. Many email clients block images by default, hindering visibility and reducing click-through rates, especially among a significant portion of B2B users on Outlook. Accessibility is a major concern, as images without alt text are unusable by screen readers, violating accessibility guidelines. Furthermore, images may render inconsistently across email clients and devices. Using excessive images, including image-based CTAs, can also increase the likelihood of emails being flagged as spam. In contrast, text-based CTAs ensure consistent display, easier brand maintenance, and support features like Dynamic Type for text scaling. Utilizing semantic HTML elements like `<button>` offers built-in accessibility. Avoiding exclusive reliance on images for CTAs can help maintain accessibility and also improve conversion rates.

Key findings

  • Image Blocking: Many email clients block images by default, making image-based CTAs invisible unless the user enables them.
  • Accessibility Issues: Image-based CTAs without proper alt text are inaccessible to visually impaired users using screen readers.
  • Rendering Inconsistencies: Images can render differently across email clients and devices, potentially breaking or distorting CTAs.
  • Spam Risk: Emails with a high image-to-text ratio are more likely to be flagged as spam.
  • Brand Maintenance: Text-based CTAs are easier to style and maintain brand consistency.
  • Lower Conversion Rates: Image blocking can lead to decreased conversion rates.

Key considerations

  • Implement Alt Text: Always include descriptive alt text for images used in CTAs.
  • Use Text-Based CTAs: Utilize text-based CTAs or combined text/image approaches.
  • Optimize Images: Optimize images for file size and rendering across devices.
  • Test Across Clients: Thoroughly test email rendering across different clients.
  • Consider Image to Text ratio: Consider the ratio of image to text, to reduce the chances of being flagged as spam.
  • Usability: Ensure CTAs have clear and legible text labels.

What email marketers say
10Marketer opinions

Avoiding images for CTA buttons in email marketing is crucial due to several factors. Image blocking by email clients, like Outlook (affecting a significant portion of B2B users), hinders visibility and lowers engagement. Inaccessible CTAs for visually impaired users, inconsistent rendering across devices, and increased chances of being flagged as spam are other significant concerns. Text-based CTAs offer better accessibility, consistent display, and easier brand maintenance, and can improve click-through rates.

Key opinions

  • Image Blocking: Many email clients block images by default, rendering image-based CTAs invisible unless the user enables them.
  • Accessibility Issues: Image-based CTAs without proper alt text are inaccessible to visually impaired users relying on screen readers.
  • Inconsistent Rendering: Images can render differently across various email clients and devices, potentially distorting or breaking CTAs.
  • Spam Filters: Emails with a high image-to-text ratio are more likely to be flagged as spam.
  • Brand Consistency: Text-based CTAs are easier to style and maintain brand consistency across campaigns.
  • Engagement Rates: Use of images reduces click through rates

Key considerations

  • Alt Text: Always provide descriptive alt text for image-based CTAs to ensure accessibility.
  • Text-Based Alternatives: Utilize text-based CTAs or hybrid approaches (text and image) to ensure visibility and accessibility.
  • Image Optimization: Optimize images to reduce file size and improve rendering speed across devices.
  • Email Client Testing: Thoroughly test email rendering across different email clients and devices to identify and resolve potential issues.
  • Image to Text ratio: Consider the ratio of image to text, to reduce the chances of being flagged as spam.
Marketer view

Email marketer from Reddit user mentions that using too many images, including image-based CTAs, can increase the likelihood of your email being flagged as spam. Spam filters often penalize emails with a high image-to-text ratio.

March 2021 - Reddit
Marketer view

Email marketer from Hubspot explains that the key benefit is that live text is supported by all email clients. It's also easier to read, doesn't rely on the end user downloading images, which can improve your click rate.

July 2024 - Hubspot
Marketer view

Marketer from Email Geeks approximates that Outlook represents about 6% of all email clients, and likely a large percentage of B2B users.

November 2024 - Email Geeks
Marketer view

Email marketer from Stack Overflow user mentions using text allows for a greater ability to manipulate the look and feel of a button, in code - it's easier to maintain brand consistency with text-based CTAs across different campaigns and platforms. Text can be easily styled with CSS to match your brand guidelines, while images may require more effort to resize and optimize.

December 2022 - Stack Overflow
Marketer view

Email marketer from Campaign Monitor explains that using images for CTAs can create accessibility issues for visually impaired recipients who rely on screen readers. If the image lacks proper alt text, the CTA becomes inaccessible.

February 2022 - Campaign Monitor
Marketer view

Marketer from Email Geeks shares an example of an organization experiencing lowered engagement after switching to images for CTA buttons without considering that some users have images turned off, and without providing alt text for the images.

February 2024 - Email Geeks
Marketer view

Email marketer from Litmus explains that images can render differently across various email clients and devices. A CTA button that looks perfect in one client might be distorted or unreadable in another, impacting the user experience.

January 2025 - Litmus
Marketer view

Email marketer from Mailjet Blog explains that many email clients block images by default, which means if your CTA is an image, it won't be visible unless the recipient enables images. This can significantly reduce click-through rates.

June 2022 - Mailjet Blog
Marketer view

Email marketer from Email on Acid explains that not all email clients support images in the same way. Some clients may block images by default or have limited support for certain image formats. Using text-based CTAs ensures that your message is consistently displayed across different clients.

October 2024 - Email on Acid
Marketer view

Email marketer from Pardot suggests that relying solely on images for CTAs can lead to lower conversion rates, as image blocking is a common issue and many users don't enable images by default.

March 2022 - Pardot

What the experts say
2Expert opinions

Experts at Word to the Wise advise against relying solely on images for CTA buttons in email marketing due to rendering inconsistencies across email clients, potentially leading to broken or unreadable buttons. Furthermore, the lack of alt text in image-based CTAs creates significant accessibility barriers, preventing visually impaired users from understanding the button's purpose and rendering the email inaccessible.

Key opinions

  • Rendering Issues: Images used as CTA buttons may not render correctly across all email clients, resulting in broken or unreadable buttons.
  • Accessibility: The absence of alt text for image-based CTAs creates major accessibility problems for visually impaired users.

Key considerations

  • Client Testing: Always test how images render across various email clients to ensure consistent display of CTAs.
  • Alt Text Implementation: Include descriptive alt text for all images used as CTAs to provide accessibility for users with visual impairments.
  • Text Alternatives: Consider using text-based CTAs or a combination of text and images to ensure that the call to action is always clear and accessible, regardless of image rendering or user settings.
Expert view

Expert from Word to the Wise explains that using images without alt text is a major accessibility issue. Alt text provides a textual alternative to the image, allowing screen readers to convey the CTA's purpose to visually impaired users. Neglecting alt text makes your email inaccessible.

May 2021 - Word to the Wise
Expert view

Expert from Word to the Wise, Laura Atkins, explains that images may not render properly across all email clients. This could lead to a broken or unreadable CTA button, hindering user interaction.

January 2025 - Word to the Wise

What the documentation says
4Technical articles

Technical documentation from W3C, MDN Web Docs, Google's Material Design, and Apple emphasizes the importance of avoiding images as the sole content of CTA buttons in email marketing. Accessibility is a primary concern, as images without alt text are unusable by screen readers for visually impaired users. Semantic HTML elements like `<button>` offer built-in accessibility features. Clear, legible text labels enhance usability, and text scaling (Dynamic Type) ensures readability for users who adjust text sizes. Using images exclusively can hinder interaction and confuse users.

Key findings

  • Accessibility Concerns: Image-based CTAs without alt text are inaccessible to screen reader users.
  • Semantic HTML Advantage: Semantic HTML elements like `<button>` provide built-in accessibility features.
  • Usability: Clear, legible text labels are essential for button usability.
  • Text Scaling: Text-based CTAs support text scaling for enhanced readability.

Key considerations

  • Implement Alt Text: Always include descriptive alt text for any images used in CTAs.
  • Use Semantic HTML: Prioritize using semantic HTML elements for creating buttons.
  • Prioritize Clarity: Ensure CTAs have clear and legible text labels.
  • Adaptable Text Size: Design CTAs that support adaptable text sizes for user preferences.
Technical article

Documentation from MDN Web Docs emphasizes the use of semantic HTML elements like `<button>` for creating interactive buttons. These elements have built-in accessibility features and are recognized by screen readers. Using images instead of semantic buttons can lead to accessibility issues and a less user-friendly experience.

October 2022 - MDN Web Docs
Technical article

Documentation from Apple explains that using text rather than images for buttons allows the text to scale with Dynamic Type. This means that users can increase the text size without compromising the usability of your buttons.

June 2022 - Apple
Technical article

Documentation from W3C explains that alternative text (alt text) provides a textual alternative to non-text content, including images. It is crucial for accessibility, allowing users with visual impairments to understand the image's purpose. Without alt text, image-based CTAs are inaccessible to screen reader users.

December 2021 - W3C
Technical article

Documentation from Google's Material Design recommends using clear, legible text labels for buttons to ensure usability and accessibility. While icons can supplement text, relying solely on images for CTAs can confuse users and hinder interaction.

December 2022 - Material Design