Email signature size: dimensions, images and file formats

The short version

• Width: keep the whole signature to about 600 pixels wide or less.
• Height: aim for roughly 100 to 200 pixels, not counting any banner.
• Logo: usually shown between 100 and 200 pixels wide, and saved at twice that size so it stays sharp.
• Photo: a small square, about 80 to 120 pixels.
• File size: keep each image small, ideally under 50 KB.
• Formats: PNG for logos, JPG for photos. Avoid SVG and background images.
• Hosting: link to images on a secure (https) web address rather than attaching them.

The rest of this guide explains why, and what to do when something goes wrong.

Width and height

Most email designs are built around a width of about 600 pixels. That fits comfortably in a reading pane on a laptop and scales down on a phone. A signature wider than that can force sideways scrolling or get squeezed into an awkward shape.

Height matters too. A tall signature pushes the rest of a thread off the screen, and every reply adds another copy. Four or five lines of details plus a logo is plenty. If you want to promote something, a short banner under the signature does the job better than a bigger signature.

Set image sizes with the HTML width and height attributes as well as with inline styles. Classic Outlook for Windows pays more attention to the attributes, and without them an image can appear at its full size.

<img src="https://www.example.com/logo.png" width="150" height="40"
     alt="Halden & Rowe" style="display:block;width:150px;height:auto;border:0">

Logo and photo sizes

A logo in a signature is a supporting detail. Shown between 100 and 200 pixels wide, it's big enough to recognise without competing with your name.

Photos work best as a small square, around 80 to 120 pixels. Crop to head and shoulders so the person is still recognisable at that size.

Keeping images sharp on retina screens

Most modern laptops and phones have high-density screens that pack two or three pixels into the space of one. An image saved at exactly the size it's shown will look soft on those screens.

The fix is to save the image at twice the display size, then set the display size in the HTML. For a logo shown 150 pixels wide, save it 300 pixels wide and use width="150" on the image. It stays crisp without looking any bigger.

Going beyond twice the size rarely makes a visible difference. It just makes the file heavier.

File sizes and formats

Images in a signature are downloaded each time someone opens your email, often on mobile data. Small files load faster and keep the email feeling light. As a rule of thumb, keep each image under 50 KB. A well-compressed logo is often under 20 KB.

• PNG is the best choice for logos and icons with flat colours or a transparent background.
• JPG suits photos. Export at around 70 to 80 per cent quality and you'll rarely see the difference.
• GIF works for very simple animation, but some versions of Outlook for Windows only show the first frame. Make sure that frame makes sense on its own.
• SVG isn't supported by classic Outlook for Windows, Gmail and many other email apps, so the image simply won't appear. Export a PNG instead.
• WebP and AVIF have patchy support in email. Stick to PNG and JPG for now.

Hosted or embedded images

There are three ways to put an image in an email signature, and only one of them works reliably everywhere.

• Hosted (linked) images live on a web server and the email links to them. The email stays small and the image looks the same everywhere. The catch is that some email apps block pictures from the internet until the reader allows them.
• Embedded (attached) images travel inside the email as hidden attachments. They can show without a download prompt, but they make every email bigger, often add a paperclip icon and can appear as separate files on some phones.
• Base64 images put the image data straight into the HTML. Classic Outlook for Windows and Gmail don't display them, so avoid them.

For most companies, hosted images are the best choice. Use a secure https address on a server you control, and don't move or delete the file while old emails still point to it.

Dark mode

Lots of people read email in dark mode, and email apps handle it in different ways. Some leave your signature alone, some darken only the background and some invert your colours completely.

The usual casualty is the logo. A transparent PNG with dark text can almost vanish on a dark background.

• Give the logo its own light background with a little padding, so it looks deliberate in both modes.
• Or add a thin light outline around the dark parts of a transparent logo.
• Keep important words out of images. Real text is recoloured with the rest of the email, so it stays readable.
• Test in dark mode in Outlook for Windows, Mac, the web and your phone before you roll a design out.

Why SVG and background images fail in Outlook

Classic Outlook for Windows uses Microsoft Word to display emails. Word understands a limited set of HTML and CSS, and it ignores a lot of what web pages rely on.

• SVG images don't display at all.
• CSS background images are ignored, so text meant to sit over a picture ends up on a plain background.
• Layouts built with div elements, flexbox or grid fall apart. Tables still work.
• Margins and padding behave unpredictably on many elements. Padding on table cells is the most reliable.
• Web fonts aren't loaded, and text can fall back to Times New Roman. Use common fonts like Arial, Helvetica, Georgia or Verdana, with a fallback list.

That's why signature tools build signatures from nested tables with inline styles. It looks old-fashioned in the code, but it's what renders consistently in every version of Outlook.

Signed's signature designer produces this kind of email-safe table HTML for you, and so does our free email signature generator.

Alt text

Alt text is the short description shown when an image is blocked, and read aloud by screen readers. Every image in a signature needs it.

• Logo: your company name, such as Halden & Rowe.
• Photo: the person's name.
• Social icons: the network, such as LinkedIn.
• Decorative images, like spacers or dividers: an empty alt attribute, alt="", so screen readers skip them.

Don't start with "image of" or "logo of". Screen readers already announce that it's an image.

In Signed, the photo and logo in a designed signature get their alt text from each person's name and your company name, so there's nothing to remember.