Want to add a graphic or logo to your signature but not sure how big it should (or can) be? Find the best size for an image in your email signature here (and what to do about images on Retina displays).
First, You Can Count on Photoshop
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 to count.
If you want, you can change the color and size of the labels.
Speaking of sizes and images—and now that we’re in Photoshop anyway—, have ever you wondered what the right size is for an image or logo you want to include in your email signature, say in Gmail?
This Is the Best Image Size for an Email Signature
Images, in email signatures like elsewhere, should help your message, not hinder it. That means the graphic or logo should be topical, crisp and on point.
It also means the image needs just the right size. If the graphic is too wide, the whole message is wider than what is visible on screen. The poor reader has to scroll or drag their fingers back and forth to read your email.
Wondering how much text to include? This Is the Best Email Signature Size (Not Too Big, Not Too Small)
So, for the best email signature image size (for use in Gmail, Outlook, Yahoo Mail, iCloud Mail etc.):
- Your signature images (plus any words next to it) should not exceed the typical width seen by the recipient.
- This width is usually around 300–600 pixels.
As a rule of thumb,
- make your signature image 300 pixels wide at most and
- 70–100 pixels high.
Important: Also make sure the image is compressed to be the smallest for the desired resolution and quality; you can compress images for free online.
For adding a graphic to your email signature, see the following articles, for instance:
- Gmail: How to Add a Signature Image
- GoDaddy Workspace Webmail: How to Add a Signature Image
- iPhone: How to Add an iPhone Email Signature Image Using iOS Mail
- Outlook for Windows: How to Add a Signature Image
- Outlook.com: How to Add a Signature Image
- Yahoo Mail: How to Add a Signature Image
This Is the Best Image Size for an Email Signature: 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 5120 pixels (5k) 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 for email signatures? 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 or CSS to resize email signature images (apart from retina images for high-resolution displays; see below).
When you use image properties to resize graphics, the image
- size (in KB) remains the same, and you do not profit from a smaller file size
- can be distorted, if you mistype a number, for instance
- 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
- could end up shown 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.
Resize the image in a program or on the web instead: both Paint and Preview work reasonably well for this.
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 photo or graphic 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 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 November 2023; example image: StockUnlimited)