It’s only a tiny, inconspicuous arrow that reveals up within the righthand nook of pictures. However for those who’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 people even thought it was a bug in Gmail webmail, which might shortly get mounted. However right here we’re years later, and the Gmail picture obtain button remains 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 night time. In these circumstances, 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 photographs are giant.
- When the photographs aren’t linked to something.
It appears Gmail webmail treats bigger, high-resolution pictures as attachments that may be downloaded. Which means you shouldn’t have to fret in regards to the button displaying up on small pictures akin to icons or ornamental parts in an HTML e mail.
In response to FormGet.com, Gmail gained’t present the obtain arrow on pictures with a facet ratio of 299×524 or smaller.
The unlinked picture concern is definitely solved with our first repair.
1. Add a hyperlink to e mail pictures
The best approach to forestall the Gmail picture obtain button from displaying is so as to add hyperlinks to your pictures. In lots of campaigns, there shall be a logical place to hyperlink in order that when a picture is clicked it takes subscribers to a related place.
For instance, we just lately 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 pictures in different e mail advertising messages might (and doubtless ought to) hyperlink to the principle touchdown web page by which the e-mail intends to drive site visitors. In an e mail publication, thumbnail pictures can hyperlink on to the piece of content material they characterize.
Linking pictures like that may be a good greatest follow anyway. Photos make splendid faucet targets for subscribers viewing emails on cell gadgets.
If there isn’t a very good choice for a picture hyperlink, including an empty href attribute may 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 gained’t take them anyplace. Others have tried styling pictures with cursor:default or pointer-events:none; — however these gained’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 which you could disguise 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’s going to disguise any div that’s adjoining to a picture together with divs that you just may need added your self.
Fortunately since Gmail began supporting class names, you now have way more management over this.
You may add a category like “g-img” to an unlinked picture after which add a CSS type like beneath within the <head>.
img.g-img + div {show:none;}
Nevertheless, for those who occur to have a div adjoining to your picture, this will trigger that div to be hidden in different purchasers, akin to 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 approach 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 won’t seem.
Nevertheless, fixing that drawback creates others due to the truth that some e mail purchasers don’t help background pictures. The dearth of help comes primarily from (you guessed it) desktop variations of Microsoft Outlook. In response to Can I E mail, there’s restricted help 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 drawback on the planet, and struggling to repair it is probably not value 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 deal with 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, for those who 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 cut back these complexities in order that e mail groups can work collectively and get extra executed.
Our e mail pre-deployment platform helps you run checks on every little thing 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 attempt to uncover how we assist you ship e mail perfection. With limitless testing, you’ll by no means hit a ceiling or face overage expenses.
This text was first revealed 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 group is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with 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 group is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising.
