Your logo is crisp everywhere except in email, where it arrives looking soft, muddy, and slightly out of focus. Nothing is wrong with the file.
The cause is a mismatch between how many pixels your image contains and how many the recipient’s screen wants to draw. Here is the fix, which takes about two minutes.
Most phones and laptops sold in the last decade use high-density displays. A MacBook, an iPhone, and most modern Android and Windows devices pack two or three physical pixels into every one logical pixel a web page describes.
So when your HTML says an image is 200 pixels wide, a retina screen actually draws it across 400 or 600 physical pixels. If the file only contains 200 pixels of data, the device stretches it — and stretched pixels look soft.
Your logo is not blurry. It is being enlarged.
Export the image at twice the size you intend to display, then tell the email to render it at the smaller size.
For a logo displayed 180 pixels wide and 60 tall, export the file at 360 by 120. Then in the signature HTML:
<img src="https://example.com/[email protected]" width="180" height="60" alt="Company name">
Standard screens downsample it harmlessly. Retina screens have the extra detail available and draw it sharp. Some designers go to 3x, but the file size cost rarely justifies it for a signature.
Outlook desktop ignores or mishandles a good deal of CSS. If the display size exists only in a stylesheet, Outlook may render the image at its full exported dimensions — so your carefully prepared 2x logo appears at double size and breaks the layout.
Always put width and height directly on the image tag. Adding the same values in CSS as well is fine and gives you a fallback.
A JPEG logo on a white background is one of the most common causes of a signature that looks vaguely dirty rather than obviously broken.
If the only logo file you have is 200 pixels wide, enlarging it to 400 in an image editor adds no information. You get a bigger blurry file instead of a smaller one.
Go back to the original vector artwork — the AI, EPS or SVG your designer produced — and export a fresh PNG at the size you need. If that artwork is genuinely lost, have the logo redrawn once. It is worth doing properly.
A 2x logo is roughly four times the file size of a 1x one, so compression matters. Use a lossless PNG optimiser rather than reducing quality.
Target under 50 KB for a logo and under 100 KB for a photo. If a well-optimised PNG is still too heavy, the image probably has more colours or gradients than a signature needs.
You cannot judge this on a standard monitor, because a standard monitor is where the problem is invisible. Send the signature to yourself and open it on a phone, then on a retina laptop.
Check the logo, the profile photo, the social icons and any banner. Social icons at 24 pixels are the ones most often forgotten, and small blurry icons undermine an otherwise tidy signature.
The Mail Ink generator was built with high-DPI displays in mind: images are prepared at the correct density with dimensions declared on the tag, so signatures stay sharp on every screen without you having to think about export sizes.