Icons, illustrations and photos are used to visually communicate.
Want proof? View the test results to see how an image element renders across each of the most common email clients.
Images are a great way to enhance the design and help provide context in supporting the content in your email. Below are the most common types of images to add in your email:
Hero images are used to draw attention to the primary action or content. They are generally found at the top of the email.
Thumbnail images support secondary content by adding context to the title or description.
Brand images such as a logo are usually located in the header and/or footer of the email.
Avatar images are used to represent a user such as a status update or testimonial.
Icons are used to supplement text in order to help the user better understand the content, message or action.
Note the following when including images in your email.
- Size: To accommodate retina screens, it is best to save your images at least double the intended display height and width.
- Compression: Keep your files sizes low by using a dedicated file compression program after saving them.
- Type: Use PNG, JPG and GIF file types as they are the most commonly supported formats.
- Alt Tag: Include an alt tag because many email clients disable images by default.
Copy the code below and paste it into a table within the .panel-body to create an image in your email.
Use the code below to create a hero image.Images within the panel-body are sized at 534 pixels wide.
Follow these best practices when using images.
- Images should reflect your brand and message.
- Choose images that share a common style and intent.
- Include an alt tag because many email clients disable images by default.
Frequently Asked Questions
Answers to common questions about images in Email Kit.
An outline sized to the dimensions of the original image will still be visible to the user, but only the alt will be visible.
Email Kit does not have a background image element at this time.
Email Kit includes classes in the stylesheet to automatically resize your images when viewed on smaller devices.