Stop Gmail from adding download icons on HTML email images

If you’ve ever crafted a beautifully designed HTML email, you might have noticed that Gmail often adds a download icon over your images. This can disrupt the aesthetics of your email and potentially confuse recipients. Luckily, there are ways to mitigate this issue using CSS.

Understanding the problem

Gmail’s download icon appears on images when they are not fully loaded, when there is an issue with the image source, or when they are just full width images. This icon allows users to manually download images. While this feature is useful for recipients with slow or unreliable internet connections, it can be an eyesore for email designers.

The CSS solution

One effective way to hide this download icon is by using a simple CSS trick. By targeting the elements that Gmail uses to place the download icon, we can hide it. Here’s how you can do it:

Explanation

• Selector: img + div This CSS selector targets any div element that immediately follows an img element. In Gmail’s HTML structure, the download icon is typically inserted in a div that follows the image.
• Property: display: none; This CSS property hides the targeted div, making the download icon invisible to the email recipient.

Just simply add this CSS rule to your head, and those pesky icons will be no more 🙂