Hyperlinks in images - best practice

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

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