Best Practices for Images in Messages

Integrating images in your communications or web pages implies advantages and disadvantages depending on the format and size used. Images can have a positive impact on your readers' interest. However, too many images or images with a large size may slow down the opening or the sending of a message. Whether it is for emails, landing pages/Rich SMS or other types of web pages, read this article for tips to improve the integration of your images. 

Image Format

Among the supported formats and most popular, it is recommended to use JPEG or PNG since these are universal formats.

  • Ideal for photos and images with a color gradient
  • Lighter than PNG
  • Quality loss (destructive compression)
  • Ideal for images with solid colors
  • Progressive transparency (alpha)
  • No quality loss (non-destructive compression)
  • Heavier than JPEG.
  • Ideal for logos or short animations
  • Transparency (clear)
  • Lighter than PNG and JPEG
  • Limited color number (Indexed color)
  • Loading time is longer if the animation is heavier (more bandwidth for phones)

Image Size

Dimensions and format are directly linked to the size of the image. The size of the image does not affect the weight of an email template, but a large image will load slower at the opening of the message.  

Your image should have a size corresponding to the width of the message or the web content content. The format of an image has a default resolution of 72 DPI (standard of the web). It is recommended to aim for a 1:1 ratio with the content or, for mobile content, a fixed ratio such as 2:1. Otherwise, the browser will resize the image with its default properties.

The images above take the full width of the columns (255px). It is recommended to use images with a minimum width of 255px. For a better display on mobile, use a ratio of 2:1, which means 510px (255 x 2). If you use another ratio, make sure to have one that does not insert a decimal to the height of the image when it will be resized to the width of the container (255px in this example). Decimals in the height of an image are often the cause for white stripes in Outlook (visual glitch).

Mobile Display Options

If your image is larger than the mobile content, check the Resize in the Mobile display option in the Mobile display section (in the edition of the image). The image size will adapt automatically to the screen size. You could also use the Hide in responsive option for the image to disappear when there is not enough room in the screen. 

Texts of the Image

Make sure to include an alternative text in case the image would not display and to make your content more accessible. This way, the content can be understood without the image. 

The name of the image file can affect the SEO of a web page. It is thus recommended to choose a relevant file name. 

Image Preview

For web pages, it is recommended to test your content on different browsers. For emails, you can use the simulation tool to preview the image display for different inboxes, including dark mode. 

Tips for dark mode

  1. Use a background for the image without pale frames on a dark background. 
  2. Apply a pale outline for dark fonts on an image to have a good contrast. 
  3. If the image requires a background color, make sure the padding is even all around so the frame is consistent. 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.