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:
<!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"/> <title>Demo Email</title> </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: