Knowledge Base

How to ensure that the image will be displayed in the right size across different platforms.

Problem:

How to ensure that the image will be displayed in the right size across different platforms.

Solution:

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

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

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

  2. Open the Source view and find the place in the HTML code where the image is defined. Images are represented in HTML code as IMG tags.
  3. Add the dimensions using both HTML and CSS language like below (in this example, we would like the final size of the image to be 25px both in height and width).
    <IMG src="..." height=25 width=25 style="width: 25px; height: 25px;" />
  4. Save the changes in the Source view and ensure that the image is displayed properly.
     

    46-2
    Fig. 2. The image scaled down to right size.

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