Email signature generator › Blurry logo

Why your signature logo arrives blurry

The logo looks crisp in the file and soft in the email. This is not compression and it is not the mail client: it is that modern screens have more physical pixels than the layout asks for.

The cause, in one paragraph

When you tell an image to display at 160 pixels wide, that is 160 CSS pixels. A retina or high-DPI screen draws each of those with two or three physical pixels. If your file is exactly 160 pixels wide, the screen has to invent the extra ones by interpolation, and interpolation is what blurry looks like.

The fix: export at twice the display size

Export the logo at exactly double the width you will display it, then set the display width explicitly in the markup. A logo shown at 160 pixels should be a 320-pixel file with width="160" on the image tag.

The screen then has two physical pixels of data for every CSS pixel and draws it sharp. On a standard-density screen the browser downsamples, which is a lossless-looking operation, so nothing is worse there.

Three times is available for the highest-density phone screens and is usually not worth the file size for a signature logo. Two is the right default.

Always set width and height

Beyond sharpness, the width and height attributes do two other jobs. They stop the message reflowing when the image finally loads, and they give the recipient's client a box to reserve when images are blocked, so the layout does not jump when the reader allows them.

Set them as HTML attributes, not only in CSS. Outlook's Word engine reads the attributes reliably and the CSS less so.

The format question

For a logo that is flat colour and text — which most wordmarks are — PNG with a reduced palette gives sharp edges at a small size. JPEG is the wrong choice for that content: its compression produces visible artefacts exactly around the high-contrast edges of letterforms, which reads as a different kind of blur.

SVG would be ideal and is not usable: Outlook and Gmail do not render it in email. WebP is supported in some clients and not others, so it is not safe for a signature that has to work everywhere.

Getting the size down

A 320-pixel-wide wordmark exported as PNG-8 with a palette of 32 colours is usually under 10 KB. If yours is much larger, the likely causes are an unnecessary alpha channel, embedded colour profiles and metadata, or an export at full colour depth for an image that uses four colours. Running the file through any PNG optimiser typically removes half the weight with no visible change.

Working out the display width first

Decide the display width before exporting, because the export depends on it. For a two-column signature with the logo beside the text, 70 to 90 pixels is the usual range — enough for a wordmark to be legible, narrow enough to leave room for the text on a phone. For a logo stacked above the text you have more room, up to about 200 pixels.

Then export at double that: 160 pixels for an 80-pixel display, 400 for a 200-pixel display.

The height attribute matters as much as the width

Setting only the width lets the client compute the height, and some clients compute it wrong before the image has loaded, which makes the layout jump. Set both, and set them to values with the same aspect ratio as the file — a mismatch stretches the logo in exactly the clients least likely to tell you.

A test that takes a minute

Send the signature to yourself and open it on a phone. Zoom in on the logo with a two-finger gesture. A correctly exported logo stays crisp well past the point where the text around it becomes uncomfortable to read; an under-exported one goes soft immediately. This is quicker and more conclusive than measuring anything.

Frequently asked questions