How To Prevent Gmail From Displaying An Image Download Button In Your Email
How to Preclude Gmail'southward Epitome Download Button in HTML Emails
iv
It's simply a tiny, camouflaged arrow that shows up in the righthand corner of images. Just if you lot're an e-mail marketer who strives to deliver email perfection, you probably want to prevent the Gmail prototype download button from appearing in your campaigns.
People started noticing it in 2014, and some folks even thought it was a bug in Gmail webmail, which would apace get fixed. But here we are years afterwards, and the Gmail image download button is still hanging around.
Turns out, it's more of a feature that does brand 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 electronic mail a film 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 push isn't something you want or need in emails from a concern or make. So – how do nosotros go rid of the niggling bugger?
iii means to hide the Gmail epitome download button
First, at that place are two things to know nearly when and why the download button shows up in Gmail:
- When the images are big.
- When the images aren't linked to annihilation.
It seems Gmail webmail treats larger, high-resolution images every bit attachments that tin can be downloaded. That means you shouldn't have to worry about the push button showing up on small images such every bit 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 upshot is easily solved with our first fix.
i. Add a link to e-mail images
The easiest way to prevent the Gmail paradigm download button from displaying is to add together hyperlinks to your images. In many campaigns, there will be a logical place to link and then that when an image is clicked it takes subscribers to a relevant place.
For example, we recently noticed that the header image in an electronic mail from Pathwire showed the Gmail image download button.
That prototype could easily be linked to the Pathwire homepage or the Nightmare at E-mail Camp landing page. And Alchemy — the download button disappears.
Likewise, hero images in other email marketing messages could (and probably should) link to the principal landing page in which the email intends to drive traffic. In an electronic mail newsletter, thumbnail images can link directly to the piece of content they stand for.
Linking images like that is a good all-time exercise anyway. Images brand ideal tap targets for subscribers viewing emails on mobile devices.
If there isn't a good option for an epitome link, calculation 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 run across their cursor behaving as if the prototype is linked, simply clicking information technology won't take them anywhere. Others have tried styling images with cursor:default or arrow-events:none; — but these won't piece of work in Gmail. That's because Gmail only supports <fashion> tags in an e-mail'south caput.
2. Utilize a sibling selector
Remi Parmentier discovered that you tin hide the icon with a sibling selector because the download icon is independent inside a div that is added after the epitome by Gmail.
img + div { display:none; } This selector is very broad as it volition hide any div that is side by side to an prototype including divs that you might have added yourself.
Thankfully since Gmail started supporting form names, y'all now have much more command over this.
You tin can add a class similar "g-img" to an unlinked prototype and so add a CSS style like below in the <head>.
img.yard-img + div {display:none;} Notwithstanding, if you happen to have a div adjacent to your paradigm, this may cause that div to be hidden in other clients, such every bit Yahoo! Postal service or iOS. Every bit a safeguard you lot tin can append a "placeholder" div later on 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 push button still converts the cursor to a pointer.
3. Set the image as a background epitome
If a graphic is coded every bit a groundwork image, the Gmail paradigm download button will not appear.
However, solving that problem creates others because of the fact that some email clients practice non back up background images. The lack of support comes mainly from (you guessed it) desktop versions of Microsoft Outlook. According to Can I Electronic mail, there'due south limited support in the Yahoo Mail service and AOL clients.
The upside of this technique is that it does prevent the cursor from transforming into a pointer when subscribers scroll over the email image.
What's the best solution?
Manifestly, in that location are some pros and cons to each of these fixes for getting rid of the Gmail epitome download push in HTML emails.
In reality, it'due south non the worst problem in the globe, and struggling to ready it may not be worth a ton of fourth dimension and effort. For instance, setting an epitome as a groundwork prototype in your e-mail just creates more work because it forces you to address bug with Outlook HTML emails.
You'll need to judge each situation (and each image) individually to detect the correct solution. Only, if you can add a link to a logical destination, that's probably the easiest and almost user-friendly prepare for hiding the Gmail image download button.
The Gmail prototype download push button nuisance is only some other one of the many complexities of email marketing. Hither at Email on Acid by Pathwire, it'southward our mission to reduce those complexities so that email teams tin can work together and get more than washed.
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'south email previews to catch rendering bug in major clients earlier launching a entrada.
Give us a effort 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.
Author: The Email on Acid Squad
The E-mail on Acid content squad is made upwards of digital marketers, content creators, and directly-up email geeks.
Connect with us on LinkedIn, follow us on Facebook, and tweet at @EmailonAcid on Twitter for more than sweet stuff and keen convos on email marketing.
Author: The Email on Acid Squad
The Email on Acid content team is made up of digital marketers, content creators, and straight-upward email geeks.
Connect with us on LinkedIn, follow u.s.a. on Facebook, and tweet at @EmailonAcid on Twitter for more than sweetness stuff and keen convos on email marketing.
DOWNLOAD HERE
Posted by: levymajecold.blogspot.com
0 Komentar
Postar um comentário