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.
| Format | Advantages | Disadvantages |
| JPEG |
|
|
| PNG |
|
|
| GIF |
|
|
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. It is recommended not to exceed 0.5 MB in size or 1500px in dimensions to avoid affecting the loading speed (however, the system will let you upload an image of up to 2 MB).
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.
Example 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
|