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 be resized correctly. You can use one of the free graphics editors to resize your image before you insert it into your signature, for example Gimp, which allows for a lossless change of image dimensions (Fig. 1.).

Fig. 1. Resizing an image in Gimp.

Resizing an image prior to using it in a signature is also a good idea because not all email clients support the HTML or CSS properties that you can use to resize images. Consequently, email clients will display the image in its full size when your email reaches your recipient, completely corrupting the layout of the signature. What’s more, in the case of some email clients, the image might be restored to its original size in replies.

If, you still want to use a high-resolution image and then scale it down (e.g. to achieve better results on 4K screens), follow these steps in your CodeTwo software:

1. In the template editor, use the Picture option to insert an image into your email signature.
2. Set the desired (smaller) image size by entering values in the With and Height fields (or just one of them, if the Keep aspect ratio option is selected), as shown in Fig. 2.

   Info

   When you define custom image dimensions, our template editor will automatically add the following extra layer of HTML and CSS coding to your signature:

   <img src="..." width="XX" height="YY" style="width: XXpx; height: YYpx;">

   where XX is the value you’ve set for width and YY for height. Thanks to that, your image should be handled properly by more than 90% of email clients available on the market.

   Still, to be 100% sure that your image has the exact size you want, resize it before you insert it into your signature, as explained at the beginning of this article.

Fig. 2. The controls that allow you to resize the image on inserting it in the template editor.

Now, your image should be displayed correctly in all email clients that support CSS properties (or their HTML equivalents at least).

Resizing an image after it’s been added to a signature template

If you want to change your image dimensions after you’ve already inserted it into your signature (template), you can do it in three ways:

1. Click your image to select it, place the mouse cursor at one of its edges and drag it until you get the desired size.
2. Click your image to select it, go to the Picture tab and set the dimensions using the Width and Height fields (Fig. 3.).

Fig. 3. Resizing an already inserted image with the controls on the Picture tab.

3. Open the HTML code of your signature for editing (use the HTML source / Source button on the ribbon), locate your picture in the code, and modify the values for HTML and CSS width and height attributes/properties (Fig. 4.).

Fig. 4. Resizing an already inserted image by editing its HTML code.