CODEWITHSUNDEEP
htmlhtml-email
sTg
sTg

Reputation: 4434

Embedding an HTML Image in a mail?

I have a requirement where i have to embed an image in a mail and when the user would click over the image it would redirect him to the new site. I seriously have no idea as to what should i provide in the image src. Is it possible only through html. Require guidance. Thanks.

This is my trial HTML

<html>
<head>
</head>
<title>trial</title>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<table width="900" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td><a href="siteAddr">
<img style="float:left;" src="myImage.jpg" width="900" height="356" alt="my image" border="0" /></a></td>
    </tr>

</table>
</center>
</body>
</html>

Upvotes: 0

Views: 1147

Answers (2)

Mike
Mike

Reputation: 894

INLINE EMBEDDING (Base64 Encoding)

Inline embedding is much more simple, mostly because you don’t have to completely roll your own emails and dig around in MIME to use it.

Embedding an image in an email first requires that you have a version of said image as a base64 encoded string. There are lots of web based tools to do this, such as ImageToBase64Converter by Web Coder Tools.

Once your image is encoded, jump into your template, or whatever HTML you’re sending out, and embed it using a standard HTML image tag:

<img alt="My Image" src="data:image/jpeg;base64,/9j/4S/+RXhpZgAATU0AKgAAAAgACAESAAMAENkDZ5u8/61a+X...more encoding" />

Then you’re done! Send away.

Pros

Much simpler to achieve Much faster to do Requires much less deep dive into MIME and application code

Cons

Can really increase size of emails especially if you use more than one image Most likely blocked by default in many webmail services Blocked completely in Outlook

REFERENCES: "Sendgrid Blog - Embedding Images"

EXTERNAL REFERENCE LINK

link the image from another site.

<img src="http://this-is-a-url.com/this-is-an-image.jpg" />

Upvotes: 2

The Conspiracy
The Conspiracy

Reputation: 3963

Replace the img src with an absolute url and you're done - if the reader is connected to the internet when reading, otherwise your pic will not be loaded.

Upvotes: 0

Related Questions