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
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:
- Decide the final display dimensions.
- Crop the image to the correct aspect ratio.
- Resize it in an image editor.
- Compress the file.
- Export it as PNG or JPEG.
- Insert the optimized version into the signature.
- 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.
Recommended Font Sizes
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.
Stretching the logo
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:
- A new email
- A reply
- A forwarded email
- A long conversation thread
- 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:
- The total width is no more than 600px.
- It remains readable around 320px wide.
- The main height stays near 90–200px.
- Logos and headshots are properly resized.
- Combined images are ideally below 100 KB.
- Every image has useful alt text.
- Contact details remain HTML text.
- Phone numbers and URLs are clickable.
- Social icons are consistent.
- The signature contains one primary CTA.
- Images use stable HTTPS URLs.
- The layout works with images disabled.
- It has been tested in Gmail and Outlook.
- It remains readable in dark mode.
- 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.
Popular Blogs

Email Design2 mins to read
Top Email Template Builders & HTML Email Editors for 2026
Compare the best email template builders and HTML editors to design professional, responsive campaigns without coding.

Email Tips7 mins to read
Best Drag and Drop Email Editors in 2026
Discover the best drag and drop email editors in 2026. Compare top tools, features, templates, pricing, and automation to build stunning emails fast.

Marketing7 mins to read
4 Best Unlayer Alternatives to Design Emails
Looking for Unlayer alternatives? Explore the 4 best email design tools to create beautiful, responsive emails faster and easier.

Marketing6 mins to read
5 Beefree Alternatives to Upgrade Email Design Workflows
Looking for a better email design tool? Explore 5 Beefree alternatives that streamline workflows, improve collaboration, and elevate email campaigns.

Email Design1 min to read
How to Create an HTML Email Template in Mailtrap
Follow this step‑by‑step guide to creating a responsive HTML email template in Mailtrap. Design, code, and customize your template with confidence.