Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dbraynard/273a16f2593e85b385f36ae8f1e08f07 to your computer and use it in GitHub Desktop.
Save dbraynard/273a16f2593e85b385f36ae8f1e08f07 to your computer and use it in GitHub Desktop.
Outlook HTML Email with base64 img tags
<html>
<head>
<style>
/* Remove space around the email design. */
html,
body {
margin: 0 5 !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: #f7f8f7;
}
/* Stop Outlook resizing small text. */
* {
-ms-text-size-adjust: 100%;
}
/* Stop Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
/* Use a better rendering method when resizing images in Outlook IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* Prevent Windows 10 Mail from underlining links. Styles for underlined links should be inline. */
a {
text-decoration: none;
}
.title {
color: rgb(224, 0, 0);
font-family: Arial, Helvetica, sans-serif;
vertical-align: top !important;
font-size: xx-large;
}
.details-keyword {
color: rgb(48, 45, 45);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.details-keyword-light {
color: rgb(102, 96, 96);
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
.alert-name {
color: #5f5953;
font-family: Arial, Helvetica, sans-serif;
vertical-align: middle !important;
font-size: xx-large;
}
.device {
color: #684163;
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.device-id {
color: #5f565e;
font-family: Arial, Helvetica, sans-serif;
}
.message {
color: #3a3632;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.date {
color: #5f5953;
font-family: Arial, Helvetica, sans-serif;
}
p {
color: rgb(52, 56, 66);
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHYSURBVEhL5dY9TxRRFMbxEQELSLCCmGBiQkAQeij4BBSGSGe0taGg0IrwFayQUNJABSGhoeSlgMoKovED0BvXQk0U+D87927OTM4MszBrw5P8MjfDmXPg7swOyb3Lg3BsN5OYS5fJPr6ky85mCf9wFfwN5zqaGdihdvg0OpJenCE/NNLPelB7VuANtFRTa57jN7xh1i+otpZ04Rix+SU+YhQasgY7/Ai3fVoyeQfbeAP5bMPW6Jo75Qm+wzZ9iXxew9boGl1bGG1jWT7hcbpspT8cbfrCMUbXrKZLP2WD5/EqXWYyEY42Y+FoswD1aCsDuIDdvmgH+ezBq1UP9aqcdXiN5Cvy+QavVtSrUmahR8ZrInqeuxGjb6s/8GpFX7HqWZpH0F/kNbDs5zwCr8ZST/VuJX9zLcO7efKZCkelSr1q1NuN3rFlW2Z9xjMM4zScu4l6v0AmD3EC74I6aUZmlxfhFRbRzXeAw7D2aopoVjNP0YBXVOQ9Yj7AqynyA/qIkq1woh3NC0P0i3s1ZTQz+WlOVPUWMVp7NWUaem9qsPfFXxbdoZvpMnmDzDNaIZp5q62+q+ZWD+E8nPgfNGsw/ouirdIrcBy1/NviREP1MtmFPqp7lSS5BnfiXCWRq3zgAAAAAElFTkSuQmCC" />
<g></g>
</td>
<td>
<div class="title">Alert</div>
</td>
</tr>
</table>
<table><tr><td>
<span>Another image</span>
</td><td>
<div class="device">Location: <span class="device-id">Greengrass Core 6</span></div>
<div class="device">Device: <span class="device-id">my ups device 1</span></div>
</td></tr></table>
<table>
<tr>
<td>
<img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAARFSURBVGhD7ZprqGVjHIeP+51Eg6SoQRENJSORkC9KMc1MboNm4sPMILnNFxlyySVKLpFyq4kY90JJMfNhJKMk5PrB3QeXUO6eh/Wvd97W3mvvc9bZa69lP/W0zn7PXuu8v/1fa73veveZmjChW2xRbNvKLrgZ/vHvq45zOv6KX+AeNnSZM9Cq/l14AraKLYvtIORhn8LWXJpb4Sv4E55tQwVlYT1GazgAo/MGOQd7kYd9GrfGVuEd9jGMEH9iWejWVzbFjr+LvUJ3orIp12CECeP07lRl5VpMg36Y/GylO13Zm9BAVjFtV9umE3ZzvAqfxYNsaIq8soYNDGY1098vw2Ex7D0Yx3gEG6Gssjl5peOaHhTD3o2x/194Lo6cfpXNyUP3GrJy8soa9lIcOaswOqH9wgaGfhJjHyvdr1Jllb0MR84p6B+PjgwSNnAYSkNb6bLQY1PZXfEbjI7cgcNSVemxCSs3YnRkPU73ycZKr8U4lpU+D8tO48bCbo/fox2xKofgTLDSeeiXk9eNhpUFGJ15zoYasNJPYBw3bDys3InRobNsqImy0D51Nc5rGB3a14YayUPHNd0on6Kd+Q29udTN2IX+Cu2ISzizhaEfx7EI/R5GJ7axYZbIZ3GNhX4eoxOH2zALXIFp2NDQJ+MmzMZ1lfJGsZUTi22dGNaJTXA/Ok6L2Y7578fRcRHGJ/4O1vkB55W9Dz2+1/TNuAb3wpGxEH/HtFNnYh2UhXUFtDHKwqoPEXvjTOhV2cbIw76A6QRkI+6G0+FKjONobZXdDo/GU/FY3AEH4XjMw26LzrK+Ldr0fTwUB8WHkLsw9tdaKmvQ6/FHTA/+M96GO2E/1mHs8yIaNjgKf8D4vbMvj9lvyun+S/AjjP30XpxxZf1yeQOmB859G/fEMuzAd+j7/ICsSs48/ATTYzpe+ndvx0vwQnShzwf+9AOK967GWk7jRzE9sKfjrfgMpqepX4v0ut2/ifE+T8Gyju2OMeUcRoe147AWDsM48C+YTxKOwPQaNHRZpRdjvEfz0H4P7PgYv/eD/Sx5nes3/C/hIqz1O+B0+fQ6G0rwJpOuTfWq9A0Y71FDe3MpC3s+ylw8DZfjxeh61TA3y6FJO9JvOmbo/G57JAbum1+j+jDmSzMXYGM8hNGZk2zog+tSaaX1S/w6a3Mty2WXtE3TyjaGa0HRIcNXcTB+jGmQ1A/wQFyB6Q3Pa3IpNs4+aGfslFVxaKhiR/Q59C30AV+9S1+O6ZC0P3o8r8/9bBgXrsaohKFX4qB4U2p0Pjsd7PADmIb2lOw0hn4Q09Ceip3GAT69axvagb/TGNqxM0I79lY9OLQeZ0avYoQei+FkpvS7s/rll49vwfxi22qqhhL/NTfYudi2mqrAPiUFnxfbzuJim3PkuIar5tit5xaMsK9j1dnQenw+9cZllZ0P/y+Yg2VrUxMmTBgHpqb+AW2d5ne0QCM4AAAAAElFTkSuQmCC" />
</>
<td>
<div class="alert-name">Load Above 9%</div>
</td>
</tr>
</table>
<h4 class="date">Date: 2021-02-27 10:04:00.123000-05:00 (EST) - 1614456240123</h4>
<div class="message">
The device: <span class="details-keyword">my ups device 1</span> has 3 occurrences
of the <span class="details-keyword">Load Above 9%</span> status during the time period
of:<br><br><span class="details-keyword">2021-02-27 10:04:00.123000-05:00 (EST)</span> to <span class="details-keyword">2021-02-27 10:04:05.015000-05:00 (EST)</span>
<br><span class="details-keyword-light">2021-02-27 15:04:00.123000 (UTC)</span> to <span class="details-keyword-light">2021-02-27 15:04:05.015000 (UTC)</span>
<br><br>
This status has continued on the device. Additional alerts of this type will not be sent until after the status changes.
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment