Create a HTML email signature in Photoshop

Hi there,

I have created an email signature design for a client in photoshop and have a working HTML file that appears perfectly in all web browsers and in apple Mail, however when the client goes to install in Outlook (have tried multiple install methods here) the HTML image is splitting with white lines appearing between the sliced elements.

I have looked around a lot online and this seems to be a common issue with Outlook html file rendering, however I am still stumped as to how to fix the code so that this issue is resolved.

I’d love any help here. Thanks in advance

You can’t fix it.

Outlook will convert the image on sending the email anyway.

Make a basic jpeg version for Outlook.
With basic text.

Graphical email signatures are an ill-fated pursuit. As you’ve already discovered, you’ll get varied results you can’t control in different clients, not to mention web-based and mobile apps. And, the added weight is a disservice to recipients of your client’s emails.

Not only that but our email filter removes image links. I’m sure we’re not alone in this.
Make a sig that’s an image only and unless I choose to hit the “Download Images” button, you are pretty much anonymous. And your contact information is invisible.

I’ve avoided responding to this question because the only reasonable way to fix the issue is not to create something subject to it occurring.

Using HTML in email is a matter of catering to the lowest common denominator, and in this case, it’s Outlook — one of the most popular email clients.

This is the heart of your problem. You’ve created a graphically complicated signature that relies on sliced image hacks that Outlook doesn’t handle well. Why Microsoft has never fixed this problem, I don’t know. But I suspect their reasoning is something along the lines of Outlook being an email client and not a web browser.

When I have clients who ask for complicated email signatures, I tell them anything more complex than a simple logo accompanied by some text is a mistake. As PrintDriver mentioned, lots of companies strip out email images. Some email clients have settings that enable their users to do the same or require an extra step to display the images.

A signature with nothing more than a logo and text might have the logo stripped out, but the text will still appear. In other words, it will degrade gracefully to something that still retains the critical elements of what an email signature is supposed to do — supply contact information.

Much the same is true for HTML email marketing in general. You avoid doing things that won’t degrade gracefully. For example, if you throw in some CSS to fine-tune something for Gmail, that CSS better not be critical because some email clients will ignore it.

1 Like

Thanks so much for your responses - as frustrating as it is i’m relieved to know it wasn’t just a simple fix that I was missing in all the research around the issue.

I’m finding even when I create a basic jpeg it is still resizing after install in Outlook (gets smaller). It’s a 550 x 180 pixel doc and the DPI is 96. The artwork is also blurry due to being such a small image size. I’m still baffled as to why I can’t seem to create an artwork in photoshop that isn’t pixelated (particularly the text even after changing anti-alias settings to smooth)? I understand that im working with less pixels in such a small doc etc, but I’m sure I have seen it work for others.

Any advice here?

Thanks again.

As I said at the start - Outlook converts the image to jpg on sending the email.
Design as simple as possible JPEG 72ppi.
Basic text underneath the logo.
Alt text for the Logo etc.

1 Like