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.
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:
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.
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
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: