HomeBlogs

Email Design

Email Signature Size and Image Best Practices

The ideal email signature is 320–600px wide and 90–200px high. Learn the best image sizes, formats, file limits, and mobile-friendly design tips.

Md. Yaikub Hossain Razon

Md. Yaikub Hossain Razon

July 20269 mins to read

The best email signature size is generally 320–600 pixels wide and 90–200 pixels high. Keep individual logos or profile photos between 80 and 150 pixels, use social icons around 20–28 pixels, and aim to keep the combined image weight below 100 KB.

These dimensions give you enough room for your name, job title, contact information, logo, social links, and a small call to action without overwhelming the actual email.

However, there is no single size that every email client treats identically. Gmail, Outlook, Apple Mail, mobile applications, and webmail platforms can resize or interpret signature images differently. The safest approach is to use a compact, HTML-based signature with correctly resized images and test it across desktop and mobile devices.

Need a professionally structured design without building it manually? Explore MailEditor’s email signature templates and customize a layout that matches your brand.

Email Signature Size at a Glance

Use the following specifications as a practical starting point.

Signature element Recommended dimensions Recommended file size
Complete signature 320–600px wide, 90–200px high Under 100 KB in combined images
Horizontal logo 100–200px wide, 30–80px high Under 30 KB
Square logo 80–120px square Under 30 KB
Professional headshot 80–120px square Under 40 KB
Social media icons 20–28px square Under 5 KB each
Promotional banner 320–600px wide, 60–120px high Under 60 KB
Certification or award icon 30–60px high Under 10 KB
Main text 13–16px Not applicable
Disclaimer text 10–12px Not applicable

Current industry guidance commonly places professional signatures within a range of approximately 300–600 pixels wide, while recommending compact heights and optimized images.

These numbers are not rigid technical limits. Treat them as a safe baseline and adjust the layout according to the number of elements you need.

What Does Email Signature “Size” Actually Mean?

Email signature size can refer to three different measurements.

1. Pixel dimensions

Pixel dimensions determine how wide and tall your signature appears on the recipient’s screen.

For example:

  • A 600px-wide signature may look comfortable on a desktop.
  • The same signature may feel cramped on a 320px mobile screen.
  • A 900px-wide banner may be cropped, compressed, or force horizontal scrolling.

Pixel width has the greatest influence on mobile compatibility.

2. Image file size

File size is measured in kilobytes or megabytes. It affects how quickly the signature’s images load.

A logo can have small visual dimensions but still be unnecessarily heavy if it was exported at a very high quality. A 120×120px headshot should not need to be a 1 MB file.

As a general target:

  • Keep each small icon below 5 KB.
  • Keep logos below 30 KB when possible.
  • Keep headshots below 40 KB.
  • Keep banners below 60 KB.
  • Keep all signature images together below 100 KB.

A slightly larger file may still work, but smaller files usually create a faster and more reliable experience.

3. HTML size

A professional signature is normally built with HTML containing text, links, table cells, inline styling, and image references.

Complicated HTML can create compatibility problems even when the signature looks visually small. Deeply nested tables, unsupported CSS, tracking scripts, excessive formatting, and copied code from page builders can all make a signature harder for email clients to process.

The goal is not simply to make the signature look small. Its code should also be clean and efficient.

What Is the Best Overall Email Signature Width?

For most professional signatures, use a width between 320 and 600 pixels.

A width of approximately 450–500 pixels works particularly well for signatures containing:

  • A logo or headshot
  • A name and job title
  • A phone number and website
  • Two or three social icons
  • A small call-to-action link

A narrower signature between 320 and 400 pixels is better when most recipients are likely to read emails on mobile devices.

Use a width closer to 600 pixels only when you need a horizontal banner or additional business information. Even then, the essential contact details should remain readable when the available width becomes smaller.

Is 600 pixels too wide for an email signature?

Not necessarily. A 600px signature can work on desktop and many webmail interfaces, but it should not depend on the full width being available.

A safe design should still make sense when displayed inside a narrower message window. Avoid placing too many pieces of information in one long horizontal row.

What Is the Best Email Signature Height?

Try to keep the main signature between 90 and 200 pixels high.

Height is more flexible than width, but an excessively tall signature creates several problems:

  • It dominates short messages.
  • It makes long email conversations harder to scan.
  • It repeats large images throughout reply threads.
  • It pushes useful content further down the screen.
  • It can make a simple email look promotional.

A signature should support your message, not compete with it.

If you include a banner, your complete signature may become 220–300 pixels high. In that case, consider using the banner only on new messages and a shorter version for replies.

Gmail Signature Image Size

Google recommends using footer images that are approximately 300–400 pixels wide and 70–100 pixels high. Gmail’s stated maximum for an email-signature image is 1,000 pixels wide by 100 pixels high.

The maximum should not be treated as the ideal size. A 1,000px-wide image is too wide for many mobile layouts.

For Gmail, a safer setup is:

  • Logo: 100–180px wide
  • Headshot: 80–120px square
  • Banner: 300–500px wide
  • Image height: preferably no more than 100px per image
  • Total signature width: approximately 320–500px

Resize images before adding them to Gmail. Do not upload a very large image and rely entirely on Gmail’s small, medium, or large display controls.

Why does a Gmail signature image look blurry?

A Gmail signature image may appear blurry when:

  • A small image is stretched beyond its original dimensions.
  • Gmail has recompressed or resized the image.
  • The source image contains very small text.
  • The logo was exported in a low-quality JPEG format.
  • The HTML dimensions do not match the actual image ratio.

Use a sharp source image and display it at a size equal to or smaller than its original dimensions.

Outlook Signature Image Size

Outlook can be more sensitive to image metadata, HTML width attributes, and DPI settings than browser-based email clients.

For Outlook signatures, use:

  • A total width of 320–600px
  • Logos between 100 and 200px wide
  • Headshots around 80–120px square
  • Explicit HTML width and height attributes
  • Inline CSS rather than external stylesheets
  • Images resized before they are inserted

Some Outlook versions can interpret image DPI metadata in ways that make a logo appear larger or smaller than expected. Microsoft support discussions commonly recommend checking images at 96 DPI when troubleshooting classic Outlook scaling.

Pixel dimensions remain more important than DPI for most modern email displays, but matching Outlook’s expected settings can reduce unexpected scaling.

Best Logo Size for an Email Signature

A horizontal logo normally works best at:

  • Width: 100–200px
  • Height: 30–80px

A square or circular logo usually works best at:

  • Width: 80–120px
  • Height: 80–120px

Preserve the logo’s original aspect ratio. Never force a rectangular logo into a square container or stretch a square logo into a wide rectangle.

The logo should be clearly visible without becoming the largest element in the signature. Your name and contact information should remain the primary focus.

Should you use a logo or a headshot?

Use a logo when:

  • The signature represents a company or department.
  • Brand consistency is the main priority.
  • Multiple employees use the same signature system.
  • The sender’s personal identity is less important.

Use a headshot when:

  • Trust depends on a personal relationship.
  • You work in consulting, sales, recruitment, real estate, or coaching.
  • Clients communicate directly with one named professional.
  • You want the signature to feel more human.

Some signatures can use both, but the layout must remain compact. In many cases, one strong image is better than two competing images.

Best Headshot Size for an Email Signature

Use a professional headshot between 80×80 and 120×120 pixels.

Square or circular headshots are usually the easiest to position. The face should remain recognizable when the image is displayed at its final size.

For better results:

  • Crop closely around the face and shoulders.
  • Use a simple or neutral background.
  • Avoid group photos.
  • Do not include text inside the headshot.
  • Compress the image before uploading.
  • Add descriptive alt text.

A headshot that is 300×300 pixels on screen will usually overpower the rest of the signature.

Best Social Media Icon Size

Social icons should normally be 20–28 pixels square.

Icons below 16 pixels can become difficult to recognize or tap. Icons above 32 pixels often draw too much attention.

Keep the icons consistent:

  • Use the same visual style.
  • Use equal dimensions.
  • Align them in one row where possible.
  • Maintain 6–10 pixels of spacing.
  • Include only relevant platforms.

Four carefully selected social links are more useful than eight icons covering every account your company has ever created.

For a B2B professional, LinkedIn and the company website may be enough. For a visual brand, Instagram, YouTube, or Behance may be more relevant.

Best Email Signature Banner Size

A promotional banner can advertise:

  • A new product
  • An upcoming webinar
  • A case study
  • A seasonal offer
  • A booking page
  • A company announcement
  • A lead magnet

Use a banner between 320 and 600 pixels wide and approximately 60–120 pixels high.

Keep the message short. A signature banner should contain one idea and one action.

Good banner copy:

  • Book a Free Consultation
  • Download the New Industry Report
  • Register for Our Upcoming Webinar
  • View Our Latest Case Study

Avoid placing essential contact information only inside the banner. Images may be blocked, and recipients should still understand the signature without seeing it.

Choose the Right Image Format

PNG

PNG is usually the best choice for:

  • Logos
  • Icons
  • Graphics with transparency
  • Images containing sharp lines
  • Images containing a small amount of text

PNG files can become heavy, so compress them before use.

JPEG

JPEG is normally better for:

  • Headshots
  • Photographs
  • Detailed backgrounds
  • Images containing many colors

Use a quality level that keeps the photo clear without creating an unnecessarily large file.

GIF

GIF can be used for simple animation, but it should be used sparingly.

Animated signature graphics can:

  • Increase file size
  • Distract from the email
  • Display differently across clients
  • Create accessibility concerns
  • Repeat continuously in long conversations

A subtle animation may suit a creative campaign, but a static logo is more appropriate for most professional communication.

SVG and WebP

SVG and WebP are excellent web formats, but support can vary in email environments. For broad compatibility, PNG and JPEG remain safer choices for email-signature images.

Do Not Create the Entire Signature as One Image

An image-only signature may look perfect in a design program, but it creates practical limitations.

Recipients may be unable to:

  • Copy your phone number
  • Select your email address
  • Click individual social links
  • Search for your contact details
  • Read the information when images are blocked
  • Use screen readers effectively

Text should remain actual HTML text. Images should be reserved for visual elements such as your logo, headshot, icons, or banner.

This is one reason professionally structured HTML templates are more dependable than exporting a complete signature as a screenshot.

MailEditor provides a library of 200+ premium signature templates, along with an HTML-compatible signature generator and copier. Its signatures are designed for use with platforms including Gmail, Outlook, Apple Mail, HubSpot, and supported mobile email applications.

Browse professional MailEditor signature templates to start with a structured design rather than a flattened image.

Resize Images Before Uploading Them

One of the most common signature mistakes is uploading a 2,000px-wide logo and reducing it visually with the email editor.

The file may look smaller, but recipients can still be forced to download the large original image. Some email clients may also ignore or alter the visual resizing.

Instead:

  1. Decide the final display dimensions.
  2. Crop the image to the correct aspect ratio.
  3. Resize it in an image editor.
  4. Compress the file.
  5. Export it as PNG or JPEG.
  6. Insert the optimized version into the signature.
  7. Send test emails to several devices.

For example, when a logo will display at 160×50 pixels, do not upload a 2,400×750px version unless you have a tested high-resolution workflow that applies explicit dimensions reliably.

Use Explicit Image Dimensions in HTML

A signature image should include defined width and height values.

Example:

<img
  src="https://example.com/company-logo.png"
  width="160"
  height="50"
  alt="Company Name"
  style="display:block; width:160px; height:50px; border:0;"
>

Using both HTML attributes and inline styles can improve consistency across email clients.

The values must match the image’s aspect ratio. When the source file is 320×100 pixels and you display it at 160×50 pixels, both dimensions have been reduced proportionally.

Do not define only the width when a sensitive email client may need both measurements.

Add Alt Text to Every Important Image

Alt text describes an image when it cannot be displayed.

Useful examples include:

  • “MailEditor logo”
  • “Photo of Sarah Johnson”
  • “Download our email marketing report”
  • “LinkedIn profile”

Avoid generic alt text such as:

  • “Image”
  • “Logo image”
  • “Click here”
  • “Picture123”

Do not repeat contact information in the alt text when that information already appears as HTML text beside the image.

Host Images on a Secure HTTPS Address

Externally hosted images should use a stable HTTPS address.

Avoid image URLs that:

  • Require the recipient to sign in
  • Expire after a few days
  • Point to a private cloud folder
  • Redirect several times
  • Come from a temporary file-sharing service
  • May be deleted during a website redesign

A broken image inside a signature immediately reduces credibility.

If your logo URL changes, update the signature for every team member who uses it.

Make the Signature Mobile-Friendly

A signature can look excellent on a desktop and still fail on a phone.

For mobile compatibility:

  • Keep essential content within 320px when possible.
  • Avoid rigid multi-column layouts.
  • Do not use tiny text.
  • Give links and icons enough space for tapping.
  • Keep phone numbers on a single line.
  • Use short labels.
  • Avoid full-width images larger than 600px.
  • Test in portrait orientation.
  • Keep disclaimers concise.

A two-column desktop signature should either remain readable at a narrow width or stack logically on mobile.

When responsive CSS is not supported, a simple table-based layout is often more dependable than a complex layout built with modern web CSS.

Use the following text sizes:

  • Name: 15–18px
  • Job title: 13–15px
  • Contact details: 12–14px
  • Call to action: 12–14px
  • Legal disclaimer: 10–12px

Avoid using text smaller than 10 pixels. It may become unreadable on mobile devices or high-resolution displays.

Choose email-safe fonts such as:

  • Arial
  • Verdana
  • Georgia
  • Tahoma
  • Trebuchet MS
  • Times New Roman

You can specify a branded font first, but include a reliable fallback.

Example:

font-family: Arial, Helvetica, sans-serif;

Use One Clear Call to Action

A signature does not need five competing buttons.

Choose one primary action, such as:

  • Schedule a meeting
  • Visit our website
  • Download a resource
  • View our portfolio
  • Request a quote
  • Read a case study

The call to action can be a text link or a small button. Keep it visually noticeable without making it larger than the sender’s name.

For example:

Ready to improve your email branding? Choose a MailEditor signature template and personalize the colors, information, images, and layout for your business.

Common Email Signature Image Mistakes

Uploading oversized images

A large source image can load slowly and may be resized unpredictably.

Changing the width without adjusting the height distorts the brand mark.

Using an image-only signature

This makes contact details less accessible and reduces link flexibility.

Adding too many social icons

An excessive number of icons creates visual noise and weakens the main call to action.

Using a tall promotional banner

A large banner can make every email feel like an advertisement.

Forgetting mobile testing

Desktop previews do not show how the signature will behave inside narrow mobile email applications.

Using temporary image URLs

A signature will show broken-image icons when the hosted files are moved or removed.

Adding tiny text inside images

Text embedded in a logo or banner may become unreadable after resizing.

Copying a website layout into an email signature

Web browsers support design techniques that many email clients do not. Email signatures need simpler code and more conservative styling.

Skipping test emails

A design should be tested after it is installed, not only previewed inside the signature editor.

How to Test an Email Signature Properly

Send test messages to accounts opened in:

  • Gmail on desktop
  • Gmail on Android or iPhone
  • Outlook on the web
  • Outlook for Windows
  • Outlook for Mac
  • Apple Mail on macOS
  • Apple Mail on iPhone
  • A dark-mode interface

Check each test for:

  • Correct logo dimensions
  • Sharp image quality
  • Working links
  • Readable text
  • Mobile alignment
  • Dark-mode contrast
  • Missing images
  • Unexpected gaps
  • Distorted icons
  • Excessive signature height

Also test:

  1. A new email
  2. A reply
  3. A forwarded email
  4. A long conversation thread
  5. An email with images disabled

The signature should remain useful even when none of its images load.

How to Create a Properly Sized Signature With MailEditor

Creating every element manually can take time, particularly when you need a signature that works across different email clients.

MailEditor lets you begin with a professionally designed signature and customize the layout for your identity or brand.

Step 1: Choose a signature template

Visit the MailEditor signature template library and select a design that matches the amount of information you need.

A consultant may prefer a headshot-based design, while a larger company may need a logo-led template that can be reused across a team.

Step 2: Add only essential information

Include:

  • Full name
  • Job title
  • Company name
  • Phone number
  • Website
  • One primary call to action
  • Relevant social profiles

Do not add information simply because the template has space for it.

Step 3: Upload optimized images

Prepare your logo, headshot, icons, and banner using the recommended dimensions from this guide.

Step 4: Match the design to your brand

Customize:

  • Brand colors
  • Font hierarchy
  • Link colors
  • Dividers
  • Icon style
  • Spacing
  • Call-to-action wording

Step 5: Preview the signature

Check the relationship between the images and text. The logo should not overpower the name, and the call to action should not dominate the contact details.

Step 6: Copy and install the signature

MailEditor includes a signature copier that can preview HTML and copy the completed signature for installation.

Step 7: Send cross-client tests

Always send real emails to several accounts before using the signature for customer communication.

Final Email Signature Checklist

Before publishing your signature, confirm that:

  1. The total width is no more than 600px.
  2. It remains readable around 320px wide.
  3. The main height stays near 90–200px.
  4. Logos and headshots are properly resized.
  5. Combined images are ideally below 100 KB.
  6. Every image has useful alt text.
  7. Contact details remain HTML text.
  8. Phone numbers and URLs are clickable.
  9. Social icons are consistent.
  10. The signature contains one primary CTA.
  11. Images use stable HTTPS URLs.
  12. The layout works with images disabled.
  13. It has been tested in Gmail and Outlook.
  14. It remains readable in dark mode.
  15. Reply-thread spacing is acceptable.

Conclusion

The best email signature is compact, readable, fast-loading, and useful even when images are unavailable.

For most businesses, a signature between 320 and 600 pixels wide and 90–200 pixels high provides the right balance. Keep logos and headshots around 80–150 pixels, social icons near 20–28 pixels, and the combined image weight below 100 KB whenever possible.

Most importantly, avoid turning the entire signature into one image. Use real HTML text, clickable contact information, optimized visual elements, and a layout designed for both desktop and mobile devices.

Ready to put these email signature size and image best practices into action?

Explore more professional email signature templates with MailEditor, choose a layout that fits your brand, customize the details, and create an HTML signature suitable for your everyday business communication.

 

newsletter

Field notes on email design.

One thoughtful issue a month. Unsubscribe anytime.

Share

Popular Blogs

Not Enough?

Order a Custom Template.

Can't find the perfect template? Our experts will design a custom email template tailored to your brand—responsive, unique, and fully tested for compatibility.

Tested withTested with
Email Signature Size and Image Best Practices