Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
It's just a tiny, inconspicuous arrow that appears in the right corner of the images. However, if you're an email marketer looking to perfect emails, you probably want to prevent the Gmail image download button from appearing in your campaigns.
In 2014, people started noticing it and some even thought it was a bug in Gmail webmail that would be quickly fixed. But here we are years later and the Gmail image download button is still stuck around.
It turns out it's more of a feature that makes sense for personal email.
Let's say your mother sends a photo of the family reunion and includes it in an email. Or your friends email a picture of you embarrassing yourself at karaoke night. In these cases, this button is a quick way to download the image itself.
But the Gmail image download button isn't what you want or need in emails from a company or brand. So – how do we get rid of the little bastard?
3 Ways to Hide Gmail Image Download Button
First, there are two things to know when and why the download button appears in Gmail:
- If the images are large.
- If the images are not linked to anything.
It appears that Gmail webmail treats larger, high-resolution images as attachments that can be downloaded. This means you don't have to worry about the button appearing on small images such as icons or decorative elements in an HTML email.
According to FormGet.com, Gmail does not display the download arrow on images with an aspect ratio of 299×524 or smaller.
The problem with unlinked images is easily solved with our first fix.
1. Add a link to email images
The easiest way to prevent the Gmail download image button from showing is to add hyperlinks to your images. In many campaigns, there is a logical place for linking, so that when subscribers click on an image, they are taken to a relevant place.
For example, we recently noticed that the header image of an email from Pathwire contained a Gmail image download button.
This image could easily link to the Pathwire homepage or the Nightmare at Email Camp landing page. And abracadabra – the download button disappears.
Likewise, hero images in other email marketing messages could (and should) point to the main page where the email is intended to drive traffic. In an email newsletter, thumbnail images can link directly to the content they represent.
Linking such images is a good best practice anyway. Images are ideal typing targets for subscribers viewing emails on mobile devices.
If there is no good option for an image link, adding an empty href attribute also works.
The downside to the empty href solution is that subscribers will see their cursor behave as if the image is linked, but when they click on it, they don't go anywhere. Others have tried formatting images with “cursor:default” or “pointer-events:none”. – but these don’t work in Gmail. That's because Gmail only supports
2. Use a sibling selector
Remi Parmentier figured out that since the download icon is contained in a div that Gmail adds after the image, you can hide the icon using a sibling selector.
img + div { display:none; }
This selector is very comprehensive because it hides all divs that are adjacent to an image, including divs that you may have added yourself.
Luckily, since Gmail started supporting class names, you have a lot more control over them.
You can add a class like “g-img” to an unlinked image and then add a CSS style like below
. img.g-img + div {display:none;}
However, if there is a div next to your image, it may cause that div to appear in other clients such as Yahoo! is hidden. Mail or iOS. To be safe, you can append a “placeholder” div after your unlinked image:
Unfortunately, the sibling selection technique for hiding the Gmail download button still converts the cursor to a pointer.
3. Set the image as wallpaper
When a graphic is encoded as a background image, the Gmail image download button will not appear.
However, solving this problem leads to further problems as some email clients do not support background images. The lack of support is mainly due to (you guessed it) desktop versions of Microsoft Outlook. According to Can I Email, there is limited support in the Yahoo Mail and AOL clients.
The advantage of this technique is that it prevents the cursor from turning into a pointer when subscribers hover over the email image.
What is the best solution?
Obviously, there are some pros and cons to each of these fixes to remove the Gmail image download button in HTML emails.
In reality, it's not the worst problem in the world, and trying to fix it may not be worth a lot of time and effort. For example, setting an image as the background image in your email just creates more work by forcing you to troubleshoot Outlook HTML email issues.
You must assess each situation (and image) individually to find the right solution. However, if you can add a link to a logical destination, this is probably the easiest and most user-friendly solution to hide the Gmail image download button.
The annoying Gmail image download button is just another of the many complexities of email marketing. Here at Email on Acid by Pathwire, our mission is to reduce this complexity so email teams can collaborate and get more done.
Our email pre-deployment platform helps you check everything from inbox viewing and link validation to image optimization and profanity checks. Developers rely on Email on Acid's email preview to identify rendering issues for large customers before launching a campaign.
Try us and discover how we can help you deliver emails perfectly. With unlimited testing, you'll never hit a cap or face overage fees.
This article was first published in January 2017 and updated in October 2021.
Author: The Email on Acid Team
Email on Acid's content team is made up of digital marketers, content creators, and real email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet @EmailonAcid on Twitter for more great email marketing news and great convos.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
