How to Use 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:

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

In this case, this process is straightfoward, 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.

Edit_Marissa_s_Fake_Templates___Klaviyo

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:

TinyPic_-_Free_Image_Hosting__Photo_Sharing___Video_Hosting

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_-_Free_Image_Hosting__Photo_Sharing___Video_Hosting

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.

6. Format Your Image

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

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.

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.

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

Edit_Marissa_s_Fake_Templates___Klaviyo

 

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.