Imagery

Guidelines

Images, icons, and illustrations are valuable components of an email. Using them in the right way will not only help enrich the experience, but it will reinforce the emails value. Make sure they relate to the content they are paired with. Don’t just use them to use them. Have a purpose behind them.

Best Practices

How to choose the best image type

• Photography
  • Use when referring to specific people. This will pull the reader in to feel the human element of the story.
  • Use primarily photographs in B2B emails. For B2B emails, use photography over illustrations where possible. Photography communicates more of a professional vibe that resonates more easily with our B2B customers.
• Illustrations
  • Use to show concepts. Use illustrations to align the email with the Treehouse brand or to communicate concepts that are often hard or not appropriate to visualize through photography.
  • Make them friendly. Illustrations play a big role in the Treehouse brand because they make the courses feel fun and accessible.
• Animated GIFs
  • Use GIFs to show product flows. When announcing a new product feature, it's often helpful to show how the feature works. Keep the GIF short so the file size is small. If a longer explanation is needed, use a video.
  • Don't include meme GIFs. This makes Treehouse look unprofessional and the GIFs don't conform to our brand guidelines.
• Videos
  • Use videos for campaigns or library content. Use videos produced by Treehouse. This can include campaign videos, teasers, course trailers, and the Dev Team Show.

Best Practices

Scaling

• Keep the aspect ratio. Don't warp the images. Constrain proportions to retain the aspect ratio of the original image.

Do - Constrain proportions


Don't - Stretch or warp

Size

• Make it retina-ready. Save images at 2x. This ensures retina-ready images. The images will be scaled down to fit. Full width images should be saved at 1200 pixels wide because their max rendered size will be 600 pixels wide. Inline images should be saved at 1032 pixels wide because their max rendered size will be 516 pixels wide.
• Keep image file size as small as possible. Large file sizes take too long to load. Compress images through a tool such as TinyPNG (actually accepts .jpgs as well as .pngs).
• Images should be wider than their height. Since the top portion of emails are the most important part of the email, it's important that images don't take up too much vertical space. Keep image height smaller than 516 pixels in height (rendered size; actual retina-ready size is 1032 pixels).

Do - Keep images short


Don't - Make images too tall

User Experience

• Provide a fallback for background images. Background images don't work in Microsoft Outlook or in Gmail, so provide a background color which is similar to the overall color in the image.
• Plan for text-only emails. Prepare for the emails to be viewed without images. Include alt text that describes the image. Clients such as Outlook, AOL, and Yahoo have images blocked by default, and in other clients users can turn this on in their preferences.

Do - Plan for blocked images


Don't - Forget to add alt text

• Don't put text in images. Text is put outside images in order to gain control over readability at small screen sizes. Also, if the user has images blocked in their email client, then they'll miss out on seeing key copy.

Do - Put text outside of images


Don't - Put text inside images

• Make images link to the CTA when possible. If the image is associated with a CTA, make the image a link to the story-—not to the image itself. Images often take up a lot of real estate on the page, so make use of all that clickable space by including a link. People often instinctively try to click images, so make it easy for them to interact with the email.