Using Images in Templates

read

General Guidelines

Even the world’s most beautiful email template can be ruined by bad images. To ensure you don't fall victim to some common issues using images in your email templates, we've compiled five universal guidelines you should follow.

Learn more

Explore these guidelines here: 5 Rules for Using Images in Your Email Templates

Adding Alt Text

When you insert an image into your template, you will want to establish Alternative Text ("Alt Text") that will be shown in situations where your image doesn't load properly within your email (or when images may be blocked altogether). To add Alt Text for an image in Klaviyo, click on the image within your template and you will see this feature listed in Image Settings. Your Alt Text should provide a very short description of the image.

Making Images Crisper/Optimizing for Retina Display

If you are concerned that your images are not rendering as clean or as crisp as you'd like, there are steps you can take to improve image quality.

One of the prevailing standards for improving the crispness of a rendered image in an email is to insert an image 2x the desired size and then reduce the image size in your template. There are two ways to approach this in Klaviyo:

  • Insert a large, crisp version of your image and resize to your preferred dimensions.
  • Insert a natively larger image (i.e. 600px wide) and display at a smaller size (i.e. 300px width) using CSS; to take this approach, you will need to insert your image into a Text Block and adjust the CSS source code.

Image Mapping

When you insert an Image Block into your template, you can choose to add a link so that the image is hyperlinked to a specific URL destination.

Image Mapping is the process of creating a list of coordinates that map across a single image in order to hyperlink areas of the image to different destinations. While Klaviyo doesn't have a built-in image mapping tool, it is possible to build your own image map and use it in Klaviyo. You can custom code your own image map from scratch, or use a third-party web tool that allows you to build a client-side image map online and then copy the code for use in a template.

If you would like to use a pre-built image map, you must first insert your image into a Text Block - this is important because you cannot edit the source code for an Image Block.

After inserting your image into a Text Block, you can click the Source button and view the source code for the inserted image. Here, you can insert the additional code for your image map.

Was this article helpful?
0 out of 1 found this helpful