Skip to content

Design

Images in email signatures: formats, sizes and hosting

Logo, photo, banner: which formats and dimensions to use, how to host images, handle Retina screens and keep your email signature from turning into attachments.

The Soniako team Published 4 min read

Images make the difference between a polished signature and an amateur one. They are also behind most signature problems: stray attachments, blurry logos, banners that never load. Here are the rules that work across Gmail, Outlook and Apple Mail.

Choosing the right format

FormatRecommended useWorth knowing
PNGLogos, icons, flat graphicsSupports transparency; watch out for dark mode
JPGProfile photos, photographic bannersLighter for photos, no transparency
GIFLight animationSome Outlook for Windows versions show only the first frame
SVGAvoidNot supported by Gmail or most Outlook versions
WebPAvoid for nowSupport still uneven across email clients

In practice: PNG for the logo and icons, JPG for photos and banners.

The right dimensions

The whole signature should stay within 600 pixels wide, the standard reading width of an email. Within that:

  • Logo: 120–200 px wide as displayed.
  • Profile photo: 60–100 px, square or round.
  • Social icons: 16–24 px.
  • Banner: 450–600 px wide, 80–150 px tall.

The 2x rule for high-density screens

On a Retina display, a 150 px image shown at 150 px looks soft. The fix: export the image at twice its display size (300 px) and set the display size in the HTML with width and height attributes. That detail is essential for Outlook on Windows, which often ignores sizes set only in CSS.

File weight

Every image downloads each time an email is opened. Aim for:

  • under 50 KB per image;
  • under 150 KB for the whole signature.

An optimized PNG logo is often 5–15 KB. Compression tools (TinyPNG, Squoosh, ImageOptim) cut weight with no visible loss.

There are two ways to put an image in an email:

  1. Embedded (inline attachment): the image travels with the email. Downsides: the paperclip icon shows up, every email gets heavier, and some clients display the image twice.
  2. Hosted: the email contains a link to an image stored on a server. This is the method to prefer.

For hosted images, follow three rules:

  • HTTPS only: many clients block images served over HTTP.
  • Stable URL: if the image moves, every signature already sent shows an empty frame.
  • Reliable server: fast, durable hosting (a CDN or object storage), not a personal file-sharing link.

A centralized signature management tool handles this hosting for you.

Plan for blocked images

Many email clients — Outlook first among them — block images by default for unknown senders. Your signature must stay useful without them:

  • Alt text on every image: “Atelier Nord logo”, not “image1”.
  • Key details as text: name, phone and website must never live only inside an image.
  • Fixed dimensions: with width and height, the layout doesn’t collapse when the image is missing.

It is also a matter of accessibility.

Dark mode

A black PNG logo on a transparent background vanishes when the email client switches to dark mode. Two simple fixes: add a subtle light outline around the logo, or use a white background with rounded corners. More in email signatures and dark mode.

Profile photo: yes or no?

A photo humanizes the exchange, especially in relationship roles (sales, recruiting, consulting). A few precautions:

  • a consistent frame across the company (same background, same format);
  • a recent, professional photo;
  • respect each person’s choice: an employee photo is personal data — see email signatures and GDPR.

Syncing with Google Workspace or Microsoft 365 can pull the directory profile photo automatically, so you don’t manage it twice.

Recap

  • PNG for the logo, JPG for photos, no SVG.
  • 600 px wide maximum overall.
  • Images exported at 2x, sizes set with width/height.
  • Under 50 KB per image.
  • Stable HTTPS hosting, never attachments.
  • Alt text everywhere, key details as text.

← All articles