Signature Sizing for Retina and High-DPI Displays

Why your logo looks crisp on your laptop but blurry on someone else's phone — and the simple rule that fixes it permanently.

You upload your logo, set it to display at 80 pixels wide, send a test email to yourself, and everything looks great. A colleague opens the same email on their phone and the logo looks fuzzy, like a printed photocopy of a photocopy. The colleague is not imagining it. Modern displays pack more physical pixels into the same visible space than older screens, and unless you account for that when you prepare your signature image, the logo will look soft on roughly 80% of the devices that receive it. The fix is one of the simplest things in email signature design — once you understand why it works.

Two kinds of pixels and why it matters

Every modern screen has two pixel densities at play. The first is the physical pixel — an actual addressable dot of red, green, and blue on the display. The second is the CSS pixel — an abstract unit that web layouts use to size things consistently across different screen densities. On an old monitor these two are identical: one CSS pixel is one physical pixel. On a Retina laptop, an iPhone, or any other "high-DPI" display, one CSS pixel is rendered by multiple physical pixels — typically four (a 2-by-2 grid).

When you tell your email signature "display this image at 80 pixels wide", you are using CSS pixels. On an old monitor the browser allocates 80 physical pixels to the image and asks the source file to fill them. If the source file is 80 pixels wide, it fits perfectly. On a Retina display, the browser allocates 160 physical pixels but is still asked to fill them from an 80-pixel source. It scales the image up, and any time you scale a raster image up you get visible softness.

The solution is to upload images that contain enough physical pixels to satisfy the densest screen they will be viewed on, then explicitly tell the email signature to display them at the smaller logical size.

The 2× rule and when 3× makes sense

For email signatures specifically, uploading images at exactly twice the intended display dimensions covers virtually every device in current use. A logo intended to display at 80 pixels wide should be uploaded at 160 pixels wide. A banner intended to display at 500 pixels wide should be uploaded at 1000 pixels wide. The display width is set via the editor or HTML attributes; the source file simply has more pixels available, so high-DPI displays sample down from a richer source.

A few of the latest premium phones use 3× density (1 CSS pixel = 9 physical pixels), most notably the Pro models of recent iPhones. If your audience skews towards designers, photographers, or other visually demanding professions, uploading at 3× may be worth the extra file size. For most business signatures, 2× is the right trade-off — visibly crisp on every device, with only a modest bandwidth cost.

Why bigger source files do not automatically mean bigger emails

A common worry is that uploading a 160-pixel-wide image instead of an 80-pixel one will double the file size. In practice it does not, because file size is dominated by the compression complexity of the image content, not the pixel dimensions. A simple two-colour logo with sharp edges compresses to almost the same size at either resolution.

Where it does matter is for photographic content like headshots and banner imagery. A 1000-pixel-wide banner with a complex photograph will be substantially larger than a 500-pixel version. For those, run the image through a compression tool like TinyPNG or Squoosh after exporting at 2× — you can typically halve the file size with no visible quality loss.

The target for a complete email signature is under 200KB total across all images. Most well-prepared 2× signatures land between 50KB and 150KB, which is invisible to recipients and well below the threshold where Gmail truncates messages.

Vector formats: the workaround that does not work

You might wonder why we use raster images at all. SVG vector files scale infinitely without losing quality and would solve the entire retina problem in one move. Unfortunately, SVG support in email clients is patchy at best. Apple Mail and most modern webmail clients render SVG correctly. Gmail strips them. Outlook for Windows ignores them. Yahoo Mail handles them inconsistently.

Until SVG support is universal — and there is no sign that it will be soon — the only reliable approach is to export your vector logo as a 2× PNG and accept that you are baking in a resolution choice. PNG with a transparent background is the right format for logos with sharp edges and limited colour palettes; JPG is better for photographic content like headshots.

Step by step

Decide the display size you want — For most signatures, 60–120 pixels wide is appropriate for a logo and 400–600 pixels wide for a banner.
Export your source image at twice that width — A logo intended for 80 pixels wide should be exported from your design tool at 160 pixels wide.
Upload the 2× version to SignatureCraft — Use the Logo or Banner panel in the editor. Upload the larger source file.
Set the display dimensions explicitly — In the same panel, use the size slider to set the display width to your original intended size. This writes the correct width and height HTML attributes into the exported signature.
Test on at least one high-DPI device — Send a test email to yourself and open it on a recent iPhone, MacBook, or Pixel phone. The logo should look crisp, not soft.

Tips

When exporting from Figma, Sketch, or Illustrator, look for the "2x" preset in the export panel — every modern design tool has one.
For complex photographic banners, run the 2× export through a compression tool. You can often halve the file size with no perceptible quality drop.
Avoid GIF for logos — it has limited colour depth and produces visible banding on gradients. PNG-24 is almost always the right choice.