Skip to main content
Solved

Hyperlinks in images - best practice


Forum|alt.badge.img+3

Hi guys, 

We have some decorative images in our emails, such as general lifestyle images, which are not intended to be clickable. And I would like to avoid hyperlinking these images to some generic URLs, as adding more links to emails is generally not recommended, if not mistaken.

Currently, we use the following hyperlink format: {{ emptyURL|add:"#" }}. This  adds a "#" slug to the images, making them non-clickable. The goal of this approach was to prevent the display of a download button when hovering over an image in Gmail desktop, as images without any URL will show a download button on hover.

However, I believe this practice may have several drawbacks. It could lead to issues with spam filters, create confusion for screen reader users regarding accessibility, and potentially affect click tracking. Do you agree?

 

What you guys think and what do you do for such images? Thanks!

Best answer by Amos Peace

Hello lleontiy,

 

Here's what worked for a friend:

  1. Prevent Hyperlinking:
    Instead of using {{ emptyURL|add:"#"}}, remove the hyperlink entirely and use this CSS approach:

     

    html

    Copy code

    <img src="your-image.jpg" alt="" style="pointer-events: none;">

    This ensures the image remains non-clickable and avoids unnecessary "#" links that can confuse spam filters or impact accessibility.

  2. Address Gmail's Hover Behavior:
    Gmail adds a "download" button for images without links. Using the pointer-events CSS property as shown above helps mitigate this issue while keeping the image as plain text.

  3. Accessibility Tip:
    For purely decorative images, leave the alt attribute empty (alt=""). This signals screen readers to ignore the image, improving the experience for users who rely on them.

  4. Simplify Email Design:
    Where possible, consider whether decorative images are essential. Minimizing unnecessary elements can also improve deliverability.

This method solved the same problem for my team member and improved email performance.

Let me know if you need help implementing it!

 

 

Best regards,

Peace.

+23423453575

View original
Did this topic or the replies in the thread help you find an answer to your question?

3 replies

Amos Peace
Problem Solver III
Forum|alt.badge.img+5
  • Problem Solver III
  • 47 replies
  • Answer
  • January 16, 2025

Hello lleontiy,

 

Here's what worked for a friend:

  1. Prevent Hyperlinking:
    Instead of using {{ emptyURL|add:"#"}}, remove the hyperlink entirely and use this CSS approach:

     

    html

    Copy code

    <img src="your-image.jpg" alt="" style="pointer-events: none;">

    This ensures the image remains non-clickable and avoids unnecessary "#" links that can confuse spam filters or impact accessibility.

  2. Address Gmail's Hover Behavior:
    Gmail adds a "download" button for images without links. Using the pointer-events CSS property as shown above helps mitigate this issue while keeping the image as plain text.

  3. Accessibility Tip:
    For purely decorative images, leave the alt attribute empty (alt=""). This signals screen readers to ignore the image, improving the experience for users who rely on them.

  4. Simplify Email Design:
    Where possible, consider whether decorative images are essential. Minimizing unnecessary elements can also improve deliverability.

This method solved the same problem for my team member and improved email performance.

Let me know if you need help implementing it!

 

 

Best regards,

Peace.

+23423453575


Timmy Solomon
Problem Solver III
Forum|alt.badge.img+5
  • Problem Solver III
  • 19 replies
  • January 16, 2025

Hello lleontiy,

You’ve raised an important point regarding best practices for decorative images in emails. Here's a breakdown of the considerations and some alternative approaches:

Current Approach: Adding # to Links

Using {{ emptyURL|add:"#" }} prevents Gmail from showing the "download" button but introduces potential issues:

  1. Spam Filters: Empty or placeholder links can raise red flags for spam filters.
  2. Accessibility: Screen readers might interpret these as clickable elements without meaningful content, leading to confusion.
  3. Click Tracking: Placeholder links may inflate click metrics inaccurately.

Better Alternatives for Non-Clickable Decorative Images

1. Role and ARIA Attributes for Accessibility

For purely decorative images, you can use:

  • role="presentation" or aria-hidden="true" in the HTML.
  • This signals screen readers to ignore the image.

2. Prevent Gmail’s Download Button Without Links

Instead of adding #, try these solutions:

  • Use CSS to style the image:
     

    css

    CopyEdit

    img { pointer-events: none; }

  • Or wrap the image in a div container with pointer-events: none; applied to the wrapper.

3. Optimizing Clickable Areas

If it’s necessary to hyperlink all images for some reason, ensure decorative images point to a relevant, neutral destination like your homepage rather than a placeholder.

4. Email Client Testing

Always test how your emails render in different clients (Gmail, Outlook, Apple Mail) using tools like Litmus or Email on Acid to ensure the desired behavior.

By implementing these changes, you can improve email accessibility, reduce spam risks, and maintain clean analytics. Let me know if you need help with any of the technical steps!

Best regards,
Timmy Solomon
EmailDesign Expert


Forum|alt.badge.img+3
  • Author
  • Contributor I
  • 2 replies
  • January 20, 2025

@Amos Peace ​@Timmy Solomon  thanks a lot, guys!