how to show an image in gmail inbox preview - email

Question

I have been receiving promotional emails with an image along with the subject line. i have seen this only in Gmail.
Not emojis, but image preview right below the subject line portion in the inbox preview
The emails are much more catchy with this. I have been checking google for a while to see what this feature is called but could not find any clue on the same.
Any information on this is Greatly appreciated.

Answer 1

Gmail Promotion Annotation
Since 2018 you can, indeed, add images with a preview in Gmail by using JSON-LD markup in the email's head.
Gmail Promotions Tabs can have/show:
Logo
Image
Subject
Deal Badges with Dates Frames
Discount Code within a Badge Design
The customization is quite strict, as of now, but the google guidelines are commented in the code snippet below:
<script type="application/ld+json">
[{
"#context": "http://schema.org/",
"#type": "Organization",
// WARNING: Before sending email, either point the logo
// at your own image or delete the logo annotation.
//
// If showing a logo, we recommend using an https URL.
// It's not a requirement today, but may be in the future.
"logo": "https://www.gstatic.com/images/branding/product/1x/googleg_48dp.png"
},{
"#context": "http://schema.org/",
"#type": "EmailMessage",
// Use this optional alternative subject line to avoid duplicate text
// between the subject, deal badge, and discount code.
"subjectLine": "[Important] Please add subject line in annotation"
},{
"#context": "http://schema.org/",
"#type": "DiscountOffer",
// Describe your discount, this will be shown as a badge (eg "25% off" or "free
shipping")
"description": "20% off",
"discountCode": "PROMO",
"availabilityStarts": "2019-07-21T03:42:38-07:00",
"availabilityEnds": "2019-07-24T03:42:38-07:00"
},{
// Promotion card with single image.
// We recommend using an https URL. It's not a requirement today, but may be in
the future.
// Any image size will work and will just be cropped automatically.
// GIF & WEBP images are not supported and will be filtered out.
// Sample image is 538x138, 3.9 aspect ratio
"#context": "http://schema.org/",
"#type": "PromotionCard",
"image": "https://www.google.com/gmail-for-marketers/promo-tab/markup-
tool/sample.png"
}]
</script>
Resources for this answer can be found in Google Developers Documentation:
Promotion Tab Documentation

Answer 2

enter image description here
This is the image of gmail inbox preview for product listing.

Answer 3

Add a Event onmouseover=FuntionName() to each GridView row, and show the popup which will include the message. But get it from client side