Adding Images to Signatures

Learn how to add company logos, banners, and other images to your email signatures using the fixSignatures image gallery.

Supported Image Formats

fixSignatures supports the following image formats:

• PNG – Best for logos and graphics with transparency
• JPEG/JPG – Best for photographs and complex images
• GIF – Supports simple animations (use sparingly)

Recommended Image Sizes

Image Type	Recommended Size	Max File Size
Company Logo	200-300px wide	50KB
Profile Photo	80-100px square	30KB
Banner/Promo	400-600px wide	100KB
Social Icons	20-24px square	5KB each

Using the Image Gallery

Uploading Images

1. In the signature editor, click the Gallery button in the toolbar
2. Click Upload Image
3. Select an image file from your computer
4. Wait for the upload to complete
5. The image will appear in your gallery

Inserting Images

1. Click the Gallery button
2. Click on the image you want to insert
3. The image HTML will be inserted at your cursor position
4. Adjust the HTML attributes as needed (size, alt text, etc.)

Image HTML Attributes

When inserting images, use these HTML attributes for best compatibility:

<img
  src="https://your-image-url.com/logo.png"
  alt="Company Name"
  width="200"
  height="50"
  style="display: block; border: 0;"
>

Attribute	Purpose	Best Practice
src	Image URL	Use HTTPS URLs
alt	Alternative text	Always include for accessibility
width	Display width	Set explicitly in pixels
height	Display height	Set explicitly in pixels
style	CSS styles	Use display: block; to prevent gaps

External Image URLs

You can also use images hosted elsewhere:

<img src="https://yourcompany.com/assets/logo.png" alt="Company Logo" width="200">

Requirements for external images:

• Must use HTTPS (not HTTP)
• URL must be publicly accessible
• Server must allow hotlinking
• URL should be stable (won’t change)

Email Client Compatibility

Images May Be Blocked

Many email clients block images by default until the recipient clicks “Display images”. Design your signature to look acceptable even when images are hidden:

• Always include meaningful alt text
• Don’t put critical information only in images
• Use background colors that work with or without images

Outlook Considerations

• Outlook desktop may add unwanted spacing around images
• Use display: block; to prevent gaps
• Avoid CSS background images (not supported in Outlook)
• PNG transparency works in modern Outlook versions

Common Image Patterns

Company Logo

<table>
  <tr>
    <td style="padding-right: 16px;">
      <img src="https://example.com/logo.png" alt="Company Name" width="120" style="display: block;">
    </td>
    <td>
      <strong>{{name}}</strong><br>
      {{jobTitle}}
    </td>
  </tr>
</table>

Social Media Icons

<table>
  <tr>
    {{#linkedInUrl}}
    <td style="padding-right: 8px;">
      <a href="{{linkedInUrl}}">
        <img src="https://example.com/linkedin-icon.png" alt="LinkedIn" width="24" height="24">
      </a>
    </td>
    {{/linkedInUrl}}
    {{#twitterUrl}}
    <td style="padding-right: 8px;">
      <a href="{{twitterUrl}}">
        <img src="https://example.com/twitter-icon.png" alt="Twitter" width="24" height="24">
      </a>
    </td>
    {{/twitterUrl}}
  </tr>
</table>

Promotional Banner

<table style="margin-top: 16px;">
  <tr>
    <td>
      <a href="https://company.com/promo">
        <img src="https://example.com/promo-banner.png" alt="Special Offer - Learn More" width="400" style="display: block;">
      </a>
    </td>
  </tr>
</table>

Image Optimization Tips

• Compress images – Use tools like TinyPNG to reduce file size
• Use appropriate formats – PNG for logos, JPEG for photos
• Specify dimensions – Prevents layout shift while loading
• Use 2x resolution – For retina displays, use double-size images scaled down
• Test on mobile – Ensure images display correctly on small screens