One of the common annoyances in Gmail webmail is Gmail displaying an image download icon when a user moves the cursor over an unlinked image. Thanks to Gmail’s recent support for embedded styles you can use CSS to to suppress the image download icon.

Gmail Image Download Icon

If you have unlinked images in your email and the image is above a certain size, Gmail will display an image download icon when you move the cursor over the image. In my tests this happens when the image is at least 300 pixels wide and 150 pixels tall. Clicking on the icon will cause your browser to download the image to your computer.

Gmail will also display this icon if you resize your image dimension down – up to a degree. For example although the icon does not appear for images 200 pixels wide and 100 pixels tall, the icon will appear if the image was sized from 300 pixels wide to 200 pixels wide.

In addition, Gmail will also change the cursor to a pointer (hand) when the cursor is over the image. If you click on the image itself and not the icon, the image is featured within a grey background within the Gmail interface.

Techniques to Hide the Download Icon

Here are two ways to hide the icon:

1. Add a Link

The simplest method to prevent Gmail from displaying the download icon is to wrap the image with a link. You can link it to a call to action or even place an empty anchor on the image.

<a href="#"><img src=""></a>

2. Use a Sibling Selector

Remi Parmienter 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 in their update last year, you now have much more control over this.

You can add a class like “g-img” to an unlinked image and when add a CSS style like below in the <head> (Gmail only supports <style> tags in the head) of the email

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="">

3. Set the Image as a Background Image

Although Gmail does not add the image download icon to background images, a few email clients do not support background images. Clients that do not support background images include some versions of Gmail Android clients as well as Microsoft Outlook (you need to resort to using VML).

Choosing The Best Option

Wrapping an image with an empty link is simple and straightforward. However, when the recipient clicks on the image, nothing happens which can lead to the recipient thinking that your email is broken. This also has the effect of making the image having an appearance of a link in non Gmail clients as well. Therefore if you want to use this option, use a real link.

With the sibling selector technique you can hide the download icon, but Gmail will still convert the cursor to a pointer when the user moves the mouse over the image. Since Gmail strips the ‘cursor’ CSS style, we aren’t able to override Gmail’s cursor styles. However using this technique, your image won’t look like it has a link in other email clients.

Using the background technique will prevent the icon from being displayed and the cursor from being changed, but comes with more complexity as you have to deal with clients that don’t support background images.

As usual, when testing new techniques, you should make sure that they don’t negatively affect rendering in other email clients. Here’s where Email on Acid can save you a ton of time. Get over 70 previews in just one minute by testing with Email on Acid.


Original Source