Knowledge Base

How to set the correct image size in your email signature for different email clients and devices

Problem:

You would like to ensure that the image inserted in the signature template is displayed in the correct size across different email clients and devices.

Solution:

The easiest possible method is to always insert an image in the desired size, so it does not require applying any additional HTML or CSS rules to work correctly. However, if for some reason you want to use a large image and then scale it down (e.g. to achieve better results on high-resolution screens), follow these steps:

  1. Add your large image to the signature, using the Picture button. It is best to remember what the filename of the image is.

The image inserted in its actual size.
Fig. 1. The image inserted in its actual size.

  1. Open the HTML Source code view and find the place in the HTML code where the image is defined. Images are represented in HTML code as IMG tags.
  2. Define the dimensions using both HTML and CSS as shown below (in this example, we would like the image to have a height and width of 25px).
    <IMG src="..." height=25 width=25 style="width: 25px; height: 25px;" />
  3. Save the changes in the HTML Source code view and make sure that the image is displayed correctly.

The image scaled down to the right size.
Fig. 2. The image scaled down to the right size.

From now your image should be displayed correctly in all email clients that support CSS properties (or their HTML equivalents at least). What is more, even though the edges inside the images may appear hard in the Editor, yet most popular email clients are equipped with algorithms that will display the images much better.