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:
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.
-
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.
Let me know if you need help implementing it!
Best regards,
Peace.
+23423453575
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:
- 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:
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!