HTML Emails: Adding Images

In Part 5 in our video series on creating HTML emails we show you how to add images to the email.

We’ve included a copy of the full code here so that you can use it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
</head>
 
<body>
    <table width="100%" style="max-width: 600px;">
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Hi Anne,</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae feugiat ex. Donec eleifend viverra justo. Nam velit arcu, imperdiet sed ante sed, bibendum finibus erat. Maecenas ut elementum odio.</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris est lectus, fermentum nec turpis at, dictum eleifend dolor.</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: left; width: 45%;">Heading 1</td>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: right; width: 45%;">Heading 2</td>
        </tr>
        <tr>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: left; width: 45%;">Pellentesque dui magna, maximus ut diam eu, aliquam vehicula sapien. Suspendisse sed auctor libero. Integer id velit consectetur.</td>
            <td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: right; width: 45%;">Sed in euismod odio. Mauris pulvinar sem erat, vitae suscipit nisl tincidunt a. Vivamus sed tempus metus, at dignissim ligula.</td>
        </tr>
        <tr>
            <td><img src="http://demowebsite1.co.uk/email-images/call_to_action.png"></td>
        </tr>
        <tr>
            <td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px;">Best regards,</td>
        </tr>
        <tr>
            <td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px;">John Doe</td>
        </tr>
        <tr>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/company_logo.png"></td>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/facebook.png"></td>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/google_plus.png"></td>
            <td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/twitter.png"></td>
        </tr>
    </table>
</body>
 
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body>
	<table width="100%" style="max-width: 600px;">
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Hi Anne,</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae feugiat ex. Donec eleifend viverra justo. Nam velit arcu, imperdiet sed ante sed, bibendum finibus erat. Maecenas ut elementum odio.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px; padding-bottom: 10px;">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris est lectus, fermentum nec turpis at, dictum eleifend dolor.</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: left; width: 45%;">Heading 1</td>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 20px; color: #f26012; padding-top: 10px; float: right; width: 45%;">Heading 2</td>
		</tr>
		<tr>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: left; width: 45%;">Pellentesque dui magna, maximus ut diam eu, aliquam vehicula sapien. Suspendisse sed auctor libero. Integer id velit consectetur.</td>
			<td style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px; float: right; width: 45%;">Sed in euismod odio. Mauris pulvinar sem erat, vitae suscipit nisl tincidunt a. Vivamus sed tempus metus, at dignissim ligula.</td>
		</tr>
		<tr>
			<td><img src="http://demowebsite1.co.uk/email-images/call_to_action.png"></td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 10px;">Best regards,</td>
		</tr>
		<tr>
			<td width="100%" style="font-family: 'Trebuchet MS', sans-serif; font-size: 17px; color: #333333; padding-top: 6px; padding-bottom: 10px;">John Doe</td>
		</tr>
		<tr>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/company_logo.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/facebook.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/google_plus.png"></td>
			<td style="float: left; padding-right: 10px;"><img src="http://demowebsite1.co.uk/email-images/twitter.png"></td>
		</tr>
	</table>
</body>

</html>

Images Must Be Placed On A Server

If you want your email to contain images the first step is to place the images on your server. When you do this also record the path of the image so that you can point the image source to it in the email.

Put the image in a table data cell

In the email put the image in it’s own table cell and make sure that the path is correct and points to the images on the server.

For full details on how to add images to your HTML email watch this short video:

Leave a Reply

Your email address will not be published. Required fields are marked *


eight − = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">