Image Download Button in Gmail

How to Prevent Gmail’s Image Download Button in HTML Emails

4

It’s just a tiny, inconspicuous arrow that shows up in the righthand corner of images. But if you’re an email marketer who strives to deliver email perfection, you probably want to prevent the Gmail image download button from appearing in your campaigns.

Image download icon

People started noticing it in 2014, and some folks even thought it was a bug in Gmail webmail, which would quickly get fixed. But here we are years later, and the Gmail image download button is still hanging around.

Turns out, it’s more of a feature that does make sense for personal emails.

Let’s say your mom sends a photo from the family reunion and pastes it into an email. Or your friends email a pic of you embarrassing yourself at karaoke night. In those cases, that button is a quick way to download the image for yourself. 

But the Gmail image download button isn’t something you want or need in emails from a business or brand. So – how do we get rid of the little bugger?

3 ways to hide the Gmail image download button

First, there are two things to know about when and why the download button shows up in Gmail:

  1. When the images are large.
  2. When the images aren’t linked to anything.

It seems Gmail webmail treats larger, high-resolution images as attachments that can be downloaded. That means you shouldn’t have to worry about the button showing up on small images such as icons or decorative elements in an HTML email. 

According to FormGet.com, Gmail won’t show the download arrow on images with an aspect ratio of 299×524 or smaller.

The unlinked image issue is easily solved with our first fix.

1. Add a link to email images

The easiest way to prevent the Gmail image download button from displaying is to add hyperlinks to your images. In many campaigns, there will be a logical place to link so that when an image is clicked it takes subscribers to a relevant place.

For example, we recently noticed that the header image in an email from Pathwire showed the Gmail image download button.

Gmail download image button on a Pathwire email header graphic.

That image could easily be linked 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 probably should) link to the main landing page in which the email intends to drive traffic. In an email newsletter, thumbnail images can link directly to the piece of content they represent.

Linking images like that is a good best practice anyway. Images make ideal tap targets for subscribers viewing emails on mobile devices.

If there isn’t a good option for an image link, adding an empty href attribute will also work.

<a href="#"><img src="https://media.emailonacid.com/wp-content/uploads/2018/04/CodeAnalysisImage.jpg"></a>

The downside of the empty href solution is that subscribers will see their cursor behaving as if the image is linked, but clicking it won’t take them anywhere. Others have tried styling images with cursor:default or pointer-events:none; — but these won’t work in Gmail. That’s because Gmail only supports <style> tags in an email’s head.

2. Use a sibling selector

Remi Parmentier discovered that you can hide the icon with a sibling selector because the download icon is contained within a div that is added after the image by Gmail.

img + div { display:none; }

This selector is very broad as it will hide any div that is adjacent to an image including divs that you might have added yourself.

Thankfully since Gmail started supporting class names, you now have much more control over this.

You can add a class like “g-img” to an unlinked image and then add a CSS style like below in the <head>.

img.g-img + div {display:none;}

However, if you happen to have a div adjacent to your image, this may cause that div to be hidden in other clients, such as Yahoo! Mail or iOS. As a safeguard you can append 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> 

Unfortunately, the sibling selector technique for hiding the Gmail download button still converts the cursor to a pointer. 

3. Set the image as a background image

If a graphic is coded as a background image, the Gmail image download button will not appear.

However, solving that problem creates others because of the fact that some email clients do not support background images. The lack of support comes mainly from (you guessed it) desktop versions of Microsoft Outlook. According to Can I Email, there’s limited support in the Yahoo Mail and AOL clients.

The upside of this technique is that it does prevent the cursor from transforming into a pointer when subscribers roll over the email image.

What’s the best solution?

Obviously, there are some pros and cons to each of these fixes for getting rid of the Gmail image download button in HTML emails.

In reality, it’s not the worst problem in the world, and struggling to fix it may not be worth a ton of time and effort. For example, setting an image as a background image in your email just creates more work because it forces you to address problems with Outlook HTML emails.

You’ll need to judge each situation (and each image) individually to find the right solution. But, if you can add a link to a logical destination, that’s probably the easiest and most user-friendly fix for hiding the Gmail image download button. 

The Gmail image download button nuisance is just another one of the many complexities of email marketing. Here at Email on Acid by Pathwire, it’s our mission to reduce those complexities so that email teams can work together and get more done.

Our email pre-deployment platform helps you run checks on everything from inbox display and link validation to image optimization and profanity checks. Developers rely on Email on Acid’s email previews to catch rendering issues in major clients before launching a campaign. 

Give us a try and discover how we help you deliver email perfection. With unlimited testing, you’ll never hit a ceiling or face overage charges.

This article was first published in January 2017 and was updated in October 2021.

Test Your Email First!

Make sure your email looks flawless before you send it out to your subscribers. Remember: only live email tests can guarantee fully accurate email rendering previews. With Email on Acid, you can preview your email in dozens of email clients and devices before you hit “send.” Sign up for our free trial and start testing today.

Sign Up Today

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

Author: The Email on Acid Team

The Email on Acid content team is made up of digital marketers, content creators, and straight-up email geeks.

Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more sweet stuff and great convos on email marketing.

4 thoughts on “How to Prevent Gmail’s Image Download Button in HTML Emails”

  1. Don’t empty anchors cause issues in rendering with Outlook.com? Or has that been resolved?

  2. Gmail is one of the major esp’s so optimizing emails sent to gmail can make a big difference. Thanks for sharing Justin!

  3. @keith empty anchors will be stripped in Outlook.com which in this case is just fine since we don’t want to have a link around the image anyways.

  4. I figured to prevent image to be downloaded in Gmail, but the cursor is a pointer and I am trying to have to the cursor to be default instead. I added style=”cursor:default;” into the anchor tag that I wrapped it around the image tag. I also placed that style within the image tag but still displays cursor pointer, which is not what I want. Any help? Thanks.

Comments are closed.