When you are designing and developing html email signatures, there are a lot of factors that are out of your control. This can make designing and developing email signatures a challenge.
Because of the variances in technology and email clients, there aren't published standards when it comes to building an email signature. Each email client does things a little differently which can be confusing if you are just learning how to make one. Even those of us who have been building websites for years can be thrown off by some of the strange circumstances that can happen when using graphics and images in email signatures.
Here is my best effort to answer frequently asked questions when it comes to sizing anything and everything within an HTML email. If you have additional questions you need answers to, please let me know on the contact form and I would be happy to answer them.
What is the Best Width Size for an Email Signature?
You could use an email signature width of up to 600 pixels, but if possible I would recommend something below 320 pixels wide.
For a long time the standard width for developing any kind of html email was 600px. This was during a time when you could basically guarantee that every screen was about 1024 pixels wide, and the email clients that everyone was using had some kind of sidebar that took up about 1/3 of the screen. This left about 600 pixels with a little bit of margin on each side. This standard is still an important one today, but it is not as simple as it used to be for a few reasons:
- Big Monitors: Today’s desktops come in many sizes, and people don’t keep their windows full screen anymore. They can expand and shrink their windows at will. This means you have no idea how much room will actually be left to view your email. It could be around 600 pixels or it could be thousands. Because of this, many people choose the safe route of sticking to 600.
- Mobile: According to Litmus, 42% of email opens are now on a mobile device. These devices are typically held in portrait mode and tend to render emails at around 400 pixels, but the actual width can vary greatly. Many mobile email clients will scale email signatures down to their screen size. This is partially good because it means that the signature may not appear broken, but it can also be bad because elements within the signature can become too tiny to read or be useful.
So in today’s world there isn’t always a clear answer for which to go with. In general, I would recommend keeping your signature smaller so that it appears nicely on both desktop and mobile devices. Especially with the prevalence of mobile email, this seems wise.
What is the Best Height for an Email Signature?
We recommend keeping your email signature height below 200px.
This is a recommendation and not a restriction. It won’t be a problem if you break this recommendation because the email will continue to scroll vertically. That said, people can find really tall email signatures to be annoying as they are scrolling through an email chain trying to find the email they are looking for. Just be cognizant of that as you are designing an email signature for yourself or your clients.
What are the Correct Dimensions for a Logo or Image in an Email Signature?
We recommend a logo take up 150px - 300px of width, but be saved at 2x the resolution so 300px - 600px.
Including a logo or a photo in your email signature has been common practice for a long time. The question is always: what size should those images be? Give me a standard! Unfortunately, there is no such standard to quote here, but I can tell you what I found from my years of experience.
It obviously depends on the kind of image you are including. If its a logo then it may be long, or square, or tall. As such the image size will depend greatly on your image signature and it’s design.
The main thing to think about today is the quality of the image you are adding. If you put a 300px image into your email signature and view it on a mobile device, it will end up looking fuzzy. This is because that mobile devices screen is typically a retina (or high dpi) screen with MUCH more than 300 pixels across, so it is blowing up your image to 150% - 200% of your image, which causes visible pixelation. Because of this I highly recommend that you save your image at double the size and then set the width and height attributes of the image to keep it to the size you want it to be seen at. This will make your logo look crystal clear on both desktops and mobile devices and help your organization look more professional.
What resolution or dpi should my image be saved at for an email signature?
I would recommend saving your image at 72dpi. This is the most common resolution when saving graphics for the web and email.
I have come across a few websites recommending that email signature images be saved at 96dpi for Outlook to avoid them becoming blurry. I have done a lot of testing across multiple versions of Outlook and have not found this to be the case. I believe this is an outdated standard that should not be followed any more.
What size should a banner be in an email signature?
I would recommend displaying these at or below 600px, but possibly be sized a little larger for quality, maybe around 900px.
Sometimes you may want to save out a banner that has some marketing language or a new deal your company is offering. All of what I've said about images above still applies in this example, but the main difference is that once you get to mobile in this situation, it will no longer appear at it’s given dimensions and will be scaled down to fit within the window it is given. This means that it may not be necessary to save it out at double the resolution because it may already be scaled down somewhat. Think about these banners like a billboard on the side of the road, don’t include too much text in them, just nicely sized headlines that are easy to read at any size they get scaled down to.
What file size can an image be in an email signature?
If at all possible, keep your image file sizes below 30kb. With a total signature file size below 150kb.
Having to download a huge image file every time you view someone’s email can be annoying. It slows down their email client and restricts them from doing what they need to do. If you want you can read more about email file size limitations over on Mailtrap's Blog.
While I'm on the subject, make sure that you are not including the images as an attachment within the email! Instead you should be uploading them to a web server somewhere and then linking to those files using an image tag in your html. Having someones logo attached to every one of their emails clogs up their email browser and makes it really hard to find your email when they are filtering by attachments to find that one PDF you sent a few months back.
What image file type should I use in an email signature?
Do not use SVG’s or WebP in an html email signature. Choose wisely between JPG’s, GIF’s, and maybe PNG’s.
New fangled web image file types like SVG's and WebP are not going to work in most email clients, so don’t even bother trying to use them!
File types to use in an email signature:
- JPG's are the standard image file type to use on the web and in email signatures. They are good for photos and often compress to be relatively small in file size. JPG is a versatile and helpful file format that works in a variety of situations. Just watch out for your compression settings because at times you can notice a degridation of quality. If you are saving out a logo, you may want to try out another image type.
- GIF’s are the long forgotten image file type of the web. Most web designers hardly bother with them any more. But, remember that often what we are saving in an email signature is a logo, and logos have a set number of colors, usually 1-4. These types of images are great candidates for GIF’s. A GIF logo vs a JPG logo may be smaller in file size and higher quality!
- PNG’s may not be supported in older email clients like Lotus Notes 6.5 and 7.0 as well as Outlook versions prior to 2007. That said, you may be willing to sacrifice support on those older email clients because of your audience and if dark mode support is important to you. Dark mode in emails can make the background of an email appear on a dark gray rather than white based on the user’s preferences. This can often make a logo in a signature have a white box around it because it was saved that way, which makes PNG’s a nice way to solve that problem with their beautiful transparency. Watch your image size with these!
If you are looking for a refresher head over to 99designs for a complete tutorial on image file types.
What font size should I use in an email signature?
I would recommend 11px - 13px font size for an email signature.
An email signature is meant to be a sign off, a conclusion to an email conversation, so it should balance being practical and readable without being annoying and overbearing. Many people use a default size of 12px - 14px on their email client depending on their preferences. Staying right around that size or even a tiny bit smaller can be a good thing.
Is there a limit to how many characters an email signature can be?
Yes, some email clients limit a signature by number of characters or even by file size. I recommend keeping it under 5,000 characters if possible.
Gmail will limit your email signature to 10,000 characters, this includes the html characters as well! The easiest way to stay under these limitations is to not include long paragraphs of legal disclaimers within your email signature which can end up being thousands of characters long.
Other email clients that have even shorter limits include Outlook.com, Office 365, and AOL Mail.
- GMail: Limit of 10,000 Characters
- Yahoo.com: Limit of 10,000 Characters
- Outlook.com: Limit of 5,000 Characters
A New Kind of Signature Generator
I have spent a lot of time here learning about the eccentricities of different email clients and their limitations. I have been building an advanced email signature editor that allows you to drag and drop fields into your layout and customize everything from fonts, colors, images, and spacing.
The editor takes care of most of the complexities of adding images into your email signature and automatically creates code that looks consistent across email clients and allows for a great amount of design flexibility as you build your template.
I would love to have you try out the editor and build your own email signature today! Let me know if you have feedback or questions.
Further Reading:
If you want to delve into the specifics of creating email signatures we have a number of other guides to help you out when it comes to making decisions about your email signature: