How to Embed HTML Images in Your Email Templates

Drag-and-drop email template editors are great for most marketers, since they’re intuitive and don’t require coding. However, they do present some limitations in terms of mixing images and text within the same block. If you can edit the HTML of your email templates, it’s easy to mix images and text within the same block with a very minimal knowledge of coding.

1. Edit the HTML Version of Your Email

In Klaviyo, this looks like this:

embedding an image from the source in the klaviyo email editor

2. Determine Where You’d Like Your Image to Go

In this case, this process is straightforward, since there’s only one line of text. If you’re inserting an image between lines of text, make sure you know where exactly you’d like your image to go.

Placement of image in the Klaviyo email template builder

3. Upload Your Image to an Image Hosting Service

Once your image in formatted — i.e. resized or converted to a PNG — you can upload it to the image hosting site of your choice. There are a number of websites that you can use to host images. I’m going to use TinyPic, but here are a few others you can use as well:

Upload image in hosting service

4. Copy the HTML

If you’re using TinyPic, this is where you’ll find the HTML image. If you’re using another image hosting site, this is the format you should look for.

Tinypic email template to share image code

5. Paste the HTML into Your Email

Paste the HTML where you would like your image to appear in the block. In this case, it’s beneath the “Follow Us” text.

pasting image into HTML code screen shot

6. Format Your Image

Here’s what my image now looks like without any formatting:

twitter follow us image logo

Now that I have it in my template and looking good, I want to make a few minor changes. First, I’m going to center the image with a <center> tag. Make sure you insert the <center> tag before the <a> tag, which precedes a hyperlink, and close it out with a </center> tag after the </a> tag.

formatting HTML code for image placement in page

Next, I’m going to add a link to my Twitter page. To edit a link, edit the href attribute, or add one if there isn’t an existing href attribute.

HTML for href attribute in code screenshot

And that’s it! If you’d like to add multiple images, simply repeat the process for each one. Here’s the finished product:

Formatted image logo for twitter follow us

Check out the new digs: Klaviyo’s new and improved interface

Are Daily Deals Right For Your Online Store?

How to score a high grade on your back to school email campaign

.yuzo_related_post img{width:260px !important; height:250px !important;}
.yuzo_related_post .relatedthumb{line-height:16px;background: !important;color:!important;}
.yuzo_related_post .relatedthumb:hover{background:#ffffff !important; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear;;color:!important;}
.yuzo_related_post .relatedthumb a{color:#323b43!important;}
.yuzo_related_post .relatedthumb a:hover{ color:}!important;}
.yuzo_related_post .relatedthumb:hover a{ color:!important;}
.yuzo_related_post .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb:hover .yuzo_text {color:!important;}
.yuzo_related_post .relatedthumb{ margin: 0px 0px 0px 0px; padding: 5px 5px 5px 5px; }

jQuery(document).ready(function( $ ){
//jQuery(‘.yuzo_related_post’).equalizer({ overflow : ‘relatedthumb’ });
jQuery(‘.yuzo_related_post .yuzo_wraps’).equalizer({ columns : ‘> div’ });
})

Back to Blog Home
Get email marketing insights delivered straight to your inbox.