It’s only a tiny, inconspicuous arrow that reveals up within the righthand nook of photos. However in the event you’re an e-mail marketer who strives to ship e-mail perfection, you in all probability need to forestall the Gmail picture obtain button from showing in your campaigns.
Folks began noticing it in 2014, and a few of us even thought it was a bug in Gmail webmail, which might rapidly get mounted. However right here we’re years later, and the Gmail picture obtain button continues to be hanging round.
Seems, it’s extra of a function that does make sense for private emails.
Let’s say your mother sends a photograph from the household reunion and pastes it into an e-mail. Or your pals e-mail a pic of you embarrassing your self at karaoke evening. In these instances, that button is a fast approach to obtain the picture for your self.
However the Gmail picture obtain button isn’t one thing you need or want in emails from a enterprise or model. So – how will we eliminate the little bugger?
3 methods to cover the Gmail picture obtain button
First, there are two issues to learn about when and why the obtain button reveals up in Gmail:
- When the pictures are giant.
- When the pictures aren’t linked to something.
It appears Gmail webmail treats bigger, high-resolution photos as attachments that may be downloaded. Which means you shouldn’t have to fret in regards to the button displaying up on small photos reminiscent of icons or ornamental components in an HTML e-mail.
In line with FormGet.com, Gmail received’t present the obtain arrow on photos with a facet ratio of 299×524 or smaller.
The unlinked picture difficulty is definitely solved with our first repair.
1. Add a hyperlink to e-mail photos
The simplest approach to forestall the Gmail picture obtain button from displaying is so as to add hyperlinks to your photos. In lots of campaigns, there will likely be a logical place to hyperlink in order that when a picture is clicked it takes subscribers to a related place.
For instance, we not too long ago observed that the header picture in an e-mail from Pathwire confirmed the Gmail picture obtain button.
That picture might simply be linked to the Pathwire homepage or the Nightmare at E-mail Camp touchdown web page. And Abracadabra — the obtain button disappears.
Likewise, hero photos in different e-mail advertising messages might (and possibly ought to) hyperlink to the primary touchdown web page through which the e-mail intends to drive visitors. In an e-mail e-newsletter, thumbnail photos can hyperlink on to the piece of content material they symbolize.
Linking photos like that may be a good finest observe anyway. Pictures make perfect faucet targets for subscribers viewing emails on cellular gadgets.
If there isn’t choice for a picture hyperlink, including an empty href attribute will even work.
<a href="#"><img src="https://media.emailonacid.com/wp-content/uploads/2018/04/CodeAnalysisImage.jpg"></a>
The draw back of the empty href answer is that subscribers will see their cursor behaving as if the picture is linked, however clicking it received’t take them wherever. Others have tried styling photos with cursor:default or pointer-events:none; — however these received’t work in Gmail. That’s as a result of Gmail solely helps <type> tags in an e-mail’s head.
2. Use a sibling selector
Remi Parmentier found you can conceal the icon with a sibling selector as a result of the obtain icon is contained inside a div that’s added after the picture by Gmail.
img + div { show:none; }
This selector may be very broad as it’ll conceal any div that’s adjoining to a picture together with divs that you simply may need added your self.
Fortunately since Gmail began supporting class names, you now have rather more management over this.
You’ll be able to add a category like “g-img” to an unlinked picture after which add a CSS type like under within the <head>.
img.g-img + div {show:none;}
Nonetheless, in the event you occur to have a div adjoining to your picture, this will likely trigger that div to be hidden in different purchasers, reminiscent of Yahoo! Mail or iOS. As a safeguard you possibly can append a “placeholder” div after your unlinked picture:
<img class="g-img" src="https://media.emailonacid.com/wp-content/uploads/2018/04/CodeAnalysisImage.jpg"> <div></div>
Sadly, the sibling selector method for hiding the Gmail obtain button nonetheless converts the cursor to a pointer.
3. Set the picture as a background picture
If a graphic is coded as a background picture, the Gmail picture obtain button is not going to seem.
Nonetheless, fixing that downside creates others due to the truth that some e-mail purchasers don’t assist background photos. The shortage of assist comes primarily from (you guessed it) desktop variations of Microsoft Outlook. In line with Can I E-mail, there’s restricted assist within the Yahoo Mail and AOL purchasers.
The upside of this method is that it does forestall the cursor from reworking right into a pointer when subscribers roll over the e-mail picture.
What’s one of the best answer?
Clearly, there are some professionals and cons to every of those fixes for eliminating the Gmail picture obtain button in HTML emails.
In actuality, it’s not the worst downside on this planet, and struggling to repair it will not be price a ton of effort and time. For instance, setting a picture as a background picture in your e-mail simply creates extra work as a result of it forces you to handle issues with Outlook HTML emails.
You’ll want to evaluate every state of affairs (and every picture) individually to seek out the proper answer. However, in the event you can add a hyperlink to a logical vacation spot, that’s in all probability the best and most user-friendly repair for hiding the Gmail picture obtain button.
The Gmail picture obtain button nuisance is simply one other one of many many complexities of e-mail advertising. Right here at E-mail on Acid by Pathwire, it’s our mission to scale back these complexities in order that e-mail groups can work collectively and get extra carried out.
Our e-mail pre-deployment platform helps you run checks on all the pieces from inbox show and hyperlink validation to picture optimization and profanity checks. Builders depend on E-mail on Acid’s e-mail previews to catch rendering points in main purchasers earlier than launching a marketing campaign.
Give us a try to uncover how we provide help to ship e-mail perfection. With limitless testing, you’ll by no means hit a ceiling or face overage expenses.
This text was first printed in January 2017 and was up to date in October 2021.
Creator: The E-mail on Acid Group
The E-mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
Creator: The E-mail on Acid Group
The E-mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e-mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e-mail advertising.
