It’s a tiny arrow in the right-hand corner of images. If you’re an email marketer who strives for email perfection, you’ll want to disable the Gmail image download button.
It was first noticed in 2014, and some thought it was a Gmail webmail bug that would be quickly fixed. Years later, the Gmail image download button still exists.
It turns out it’s a feature that works well for personal emails.
Let’s say your mother sends you a photo from the family reunion. Or your pals send you a karaoke photo. In those cases, the button allows you to download the image.
But you don’t want or need the Gmail image download button in business or brand emails. So, how do we get rid of it?
2 Ways on How to Hide the Gmail Image Download Button
First, two things to know about the download button in Gmail:
- Large images.
- When the images have no context.
Larger, high-resolution images appear to be downloaded as attachments in Gmail webmail. That means the button shouldn’t show up on small images like icons or decorative elements in an HTML email.
If the image is 299 x 524 or smaller, Gmail won’t show the download arrow.
1. Making use of a sibling selector
Remi Parmentier discovered that you can hide the icon with a sibling selector because Gmail adds a div after the image.
img + div { display:none; }
This selector is very broad, hiding any div adjacent to an image, including ones you’ve created yourself.
Since Gmail now supports class names, you have much more control.
Unlinked images can be given a class like “g-img” and a CSS style like this in the head.
img.g-img + div {display:none;}
However, if you have a div next to your image, it may be hidden in other clients like Yahoo Mail or iOS. To be safe, add a placeholder div after your unlinked image:
<img class=”g-img” src=”https://media.emailonacid.com/wp-content/uploads/2018/04/CodeAnalysisImage.jpg”>
<div></div>
In order to hide the Gmail download button, you must use a sibling selector.
2. Addition of a link to email images
Adding hyperlinks to your images is the easiest way to avoid the Gmail image download button. Many campaigns have a logical place to link so that clicking an image takes subscribers to the right place.
For example, the header image in a Pathwire email recently showed the Gmail image download button.
Or the Nightmare at Email Camp landing page. Then the download button vanishes.
Other email marketing messages’ hero images could (and probably should) link to the email’s main landing page. Thumbnail images in email newsletters can link directly to the content they represent.
It’s good practice to link images like that. Images are ideal tap targets for mobile email subscribers.
If an image link isn’t available, an empty href attribute will work.
On the other hand, subscribers will see their cursor behave as if the image is linked, but clicking it will do nothing. Others have tried cursor:default or pointer-events:none; — but Gmail ignores these. Because Gmail only accepts style tags in the email body.