It’s only a tiny, inconspicuous arrow that reveals up within the righthand nook of photos. However should you’re an electronic mail marketer who strives to ship electronic mail perfection, you most likely need to stop the Gmail picture obtain button from showing in your campaigns.
Individuals began noticing it in 2014, and a few of us 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 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 electronic mail. Or your mates electronic mail a pic of you embarrassing your self at karaoke night time. In these instances, that button is a fast strategy 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 learn about when and why the obtain button reveals 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 exhibiting up on small photos corresponding to icons or ornamental parts in an HTML electronic mail.
In keeping with FormGet.com, Gmail gained’t present the obtain arrow on photos with a side ratio of 299×524 or smaller.
The unlinked picture concern is well solved with our first repair.
1. Add a hyperlink to electronic mail photos
The best strategy to stop the Gmail picture obtain button from displaying is so as to add hyperlinks to your photos. In lots of campaigns, there will probably 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 electronic mail from Pathwire confirmed the Gmail picture obtain button.
That picture may simply be linked to the Pathwire homepage or the Nightmare at Electronic mail Camp touchdown web page. And Abracadabra — the obtain button disappears.
Likewise, hero photos in different electronic mail advertising and marketing messages may (and possibly ought to) hyperlink to the principle touchdown web page during which the e-mail intends to drive visitors. In an electronic mail e-newsletter, thumbnail photos can hyperlink on to the piece of content material they symbolize.
Linking photos like that may be a good greatest apply anyway. Photos make splendid faucet targets for subscribers viewing emails on cellular units.
If there isn’t a very good possibility for a picture hyperlink, including an empty href attribute can 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 resolution is that subscribers will see their cursor behaving as if the picture is linked, however clicking it gained’t take them wherever. Others have tried styling photos with cursor:default or pointer-events:none; — however these gained’t work in Gmail. That’s as a result of Gmail solely helps <fashion> tags in an electronic mail’s head.
2. Use a sibling selector
Remi Parmentier found that you could cover 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 should cover 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 rather 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;}
Nonetheless, should you occur to have a div adjoining to your picture, this may occasionally trigger that div to be hidden in different purchasers, corresponding 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 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.
Nonetheless, fixing that downside creates others due to the truth that some electronic mail purchasers don’t assist background photos. The shortage of assist comes primarily from (you guessed it) desktop variations of Microsoft Outlook. In keeping with Can I Electronic mail, there’s restricted assist within the Yahoo Mail and AOL purchasers.
The upside of this method is that it does stop the cursor from remodeling right into a pointer when subscribers roll over the e-mail picture.
What’s one of the best resolution?
Clearly, there are some execs 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 will not be value a ton of effort and time. For instance, setting a picture as a background picture in your electronic mail simply creates extra work as a result of it forces you to deal with issues with Outlook HTML emails.
You’ll want to guage every state of affairs (and every picture) individually to seek out the correct resolution. However, should you can add a hyperlink to a logical vacation spot, that’s most likely 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 electronic mail advertising and marketing. Right here at Electronic mail on Acid by Pathwire, it’s our mission to scale back these complexities in order that electronic mail groups can work collectively and get extra achieved.
Our electronic 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 Electronic mail on Acid’s electronic mail previews to catch rendering points in main purchasers earlier than launching a marketing campaign.
Give us a attempt to uncover how we provide help to ship electronic 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 Electronic mail on Acid Workforce
The Electronic mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
Creator: The Electronic mail on Acid Workforce
The Electronic mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up electronic 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 electronic mail advertising and marketing.
