It’s only a tiny, inconspicuous arrow that exhibits up within the righthand nook of photos. 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.
Individuals began noticing it in 2014, and a few people even thought it was a bug in Gmail webmail, which might rapidly get fastened. However right here we’re years later, and the Gmail picture obtain button continues to be hanging round.
Seems, it’s extra of a characteristic 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 can we do away with the little bugger?
3 methods to cover the Gmail picture obtain button
First, there are two issues to find out about when and why the obtain button exhibits up in Gmail:
- When the pictures are massive.
- When the pictures aren’t linked to something.
It appears Gmail webmail treats bigger, high-resolution photos as attachments that may be downloaded. Meaning you shouldn’t have to fret in regards to the button displaying up on small photos similar to icons or ornamental components in an HTML e mail.
In response to FormGet.com, Gmail received’t present the obtain arrow on photos with a side ratio of 299×524 or smaller.
The unlinked picture problem is definitely solved with our first repair.
1. Add a hyperlink to e mail photos
The best 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 seen that the header picture in an e mail from Pathwire confirmed the Gmail picture obtain button.
That picture may 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 may (and possibly ought to) hyperlink to the primary touchdown web page through which the e-mail intends to drive site visitors. In an e mail publication, thumbnail photos can hyperlink on to the piece of content material they symbolize.
Linking photos like that may be a good finest follow anyway. Photos make splendid faucet targets for subscribers viewing emails on cell gadgets.
If there isn’t a superb possibility 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 <fashion> tags in an e mail’s head.
2. Use a sibling selector
Remi Parmentier found 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 could be very broad as it is going to disguise any div that’s adjoining to a picture together with divs that you just might 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 fashion 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 shoppers, similar to Yahoo! Mail or iOS. As a safeguard you’ll be able to 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.
Nevertheless, fixing that downside creates others due to the truth that some e mail shoppers don’t help background photos. 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 shoppers.
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 the perfect 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 the earth, 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 handle issues with Outlook HTML emails.
You’ll want to evaluate every scenario (and every picture) individually to search 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 scale back these complexities in order that e mail groups can work collectively and get extra finished.
Our e mail pre-deployment platform helps you run checks on the whole lot 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 shoppers earlier than launching a marketing campaign.
Give us a attempt to uncover how we show you how to ship e mail perfection. With limitless testing, you’ll by no means hit a ceiling or face overage costs.
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 staff 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 staff 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.
