The 102s of Email Code: Working With Images

Seeing code spill out in front of you can be incredibly intimidating and sometimes frustrating. I promise you, from trader to trader, it's a lot easier than it looks. Plus, being able to navigate the HTML of emails is an incredibly valuable skill. In our series on email code basics, we'll teach you the basics of HTML code you need to know to get started with email code. In our last article, we covered how you can navigate your email code to get familiar with updating links or quickly changing copy.

But what about pictures? Images are the backbone of many high-performing emails. But, with ever-increasing complexity and varying file types, sizes, accessibility, and load times to consider, it can overwhelm even the most skilled marketer. In this article, we'll cover some of the most common ways to add images to your email and go over the E-Commerce Photo Editing Service basics to ensure your subscribers have a great experience. If you're looking for a deep dive into footage, check out these guides: Ultimate Guide to Background Images in Emails Guide to Animated GIFs by Email Using Images in an HTML Email You can easily follow the topics covered in this guide, so go ahead and open an email in Litmus Builder and we'll get started!

Prepare your picture Before you can add your image to your email, make sure it's set up to succeed. First, make sure the image you're using is an email-friendly file type and size . Large files will slow down your load time, decreasing your overall conversions and engagement, so be sure to use a lightweight image that loads quickly. Insert your picture Find where you want to add the image in your code - if you're using Litmus Builder, switch to grid view to click where you want an image to appear, then click in the code view. When you've found the perfect spot, use the <img> tag to add in your image, but replace the URL here with a direct link to your image.