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:
Prevent Hyperlinking: Instead of using {{ emptyURL|add:"#"}}, remove the hyperlink entirely and use this CSS approach:
This ensures the image remains non-clickable and avoids unnecessary "#" links that can confuse spam filters or impact accessibility.
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.
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.
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.
This ensures the image remains non-clickable and avoids unnecessary "#" links that can confuse spam filters or impact accessibility.
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.
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.
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.
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:
Spam Filters: Empty or placeholder links can raise red flags for spam filters.
Accessibility: Screen readers might interpret these as clickable elements without meaningful content, leading to confusion.
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!