Want to add an image or logo to your signature but not sure how big it should—or can—be? Find the best email signature image size below, and what to do about images on Retina displays.
First, You Can Count on Photoshop,
and it works like this: choose the last item in the Eyedropper tool’s fly-out menu, then click on items in your image to count.
If you want, you can change the color and size of the labels.
What Is the Best Email Signature Image Size?
Images, in signatures like elsewhere, should help your message, not hinder it. That means the image, graphic or logo should be topical, crisp and on point.
It also means the image needs to be of the appropriate size: an image too wide can make the whole message wider than what is shown on screen—and the poor reader scroll or drag their fingers all the time.
- your email signature image (plus any words to be shown next to it) should not exceed the typical width seen by the recipient or some 300–600 pixels.
As a general rule,
- make your signature image 300 pixels wide at most and
- 70–100 pixels high.
For adding an image to your email signature, see the following articles, for instance:
- Gmail: How to Add a Signature Image
- Outlook.com: How to Add a Signature Image
- Yahoo Mail: How to Add a Signature Image
Email Signature Image Size: FAQ
What happens when an email signature image is too wide?
An email signature image is too wide when its width exceeds the width of the area where the email is shown. This can be the window for an email program on a laptop, for example, or the full width of a mobile device. These widths vary wildly, of course… from some 2400 pixels down to maybe 320 pixels on low-resolution or compact mobile or wearable devices.
When an image in the email signature is wider than the screen space used to show the email, the email program has a couple of options:
- Make the email as wide as the image: this means the user has to scroll to see the full width of the email—including every full line of the text.
- Allow the image to stick out to the right or left: only part of the image is visible, but the reader does not have to scroll horizontally to read the message at least.
- Shrink the whole message proportionally to fit the full width on the screen: depending on the image size, the result can be unsightly tiny and illegible text; the reader has to zoom in—and scroll.
- Shrink only the image while keeping the original text size: this is often the best solution as it allows everything to be visible; the email program does your job of properly sizing the image, but it can break your intended formatting in the process.
How should I resize images? Should I use the HTML image width attribute?
Using an email program or service’s image properties, you can have any image display at any size—including smaller sizes. For the most part, this is not the proper way to resize images for email signatures.
Do not use HTML image properties to resize email signature images (with the exception of retina images for high-resolution displays; see below).
When you use image properties to resize graphics,
- the image’s size remains the same, and you do not profit from a smaller file size
- the image can be distorted, if you mistype a number, for instance
- the image is resized by the email program instead of your graphics program (which will typically do a better job making the image or logo look as good as it can be at the desired size) and
- the image could end up being displayed at its original—large—size, if HTML tags are filtered along the email’s journey, for instance, or if the recipient’s email program or service displays it as an “attachment” alongside a plain-text version of your email.
What about retina images for high-resolution displays?
On displays with particularly high resolution, email signature images can look less than perfectly sharp. This happens because the image has to be enlarged to be shown at the intended size and is especially true for images that contain characters or logos with sharp edges. Here’s an example:
If you need your email’s signature image to display with perfect crispness, you can work around this using HTML and CSS properties:
- Save the image at twice the desired size.
- Example: For an email signature image of size 300×70 pixels, use 600×140 pixels.
- Tip: Twice the desired size is usually sufficient, but you can choose a larger size.
- When adding the image to your email signature, make sure you set the image’s width and height properties to scale the image to the original size.
- Tip: For additional compatibility—say, with certain versions of Outlook—, you can include the width and max-width CSS attributes.
- Example: The code for the above email signature image could be:
<img src="signature_image_600x140.png" width="300" height="70" border="0" style="width:100%; max-width:300px; border:0px;">
Note that this doubling of image resolution, though the effect is usually noticeable, is often not necessary.
(Best email signature image size updated April 2018; title image: StockUnlimited)