Are your email signature images looking blurry, pixelated or fuzzy? Are they not looking crisp and clear like they should be? Well, you’re definitely not alone. This issue haunts many people, and today we’ll explain how you can easily fix these issues.
Most of the time, email signature images are blurry because their resolution is too low and you’re viewing them on a device that uses display scaling. Also, they can be pixelated if you have background transparency in your images and use an older version of Outlook (2016 and earlier). The easiest way to fix blurry images is to use high-resolution images and scale them down in HTML so they still look good when viewed on retina displays such as mobile devices.
We’ve been making email signatures for over 10 years, and have compiled a list of common reasons that images in your email signature might look blurry, pixelated or just fuzzy.
Keep reading to find out how to fix the most common image problems with email signatures.
Blurry Email Signature Images
Use a High-Resolution Image
If you’re viewing the email signature through a mobile phone, tablet, or a newer PC (with scaling enabled), chances are your images look blurry.
The quickest way to fix this is to use a higher resolution image in your email signature, and scale the image down using the HTML height and width attributes. For example, if the resolution of your image is 360 x 360 pixels, you should use 1/3 of that resolution in the height and width attributes.
<img height="120" width="120" src="https://your-image-host.com/img.png">
This way, if the device upscales the email signature, it will have a higher resolution image that it can use, and it won’t look blurry anymore.
Check Scaling Settings
The most common reason images in email signatures become blurry is because of the scaling settings on your mobile device. When referring to mobile devices, I am not only talking about iPhones, Androids and iPads but also smaller laptops such as Microsoft Surface Pro’s and any newer laptops which have a high resolution.
If your images are blurry, ensure your scaling is set to 100%. With mobile phones, its not possible to change the scaling settings. However, with Windows or Apple Mac computers, you can adjust the scaling settings.
What is scaling?
Scaling is essentially zooming. So, when your computer’s scaling settings are set to 200%, it means you have effectively zoomed in at 2x the normal size. There is no problem doing this when everything on the computer is vector based (in laymen terms, the resolution can grow and shrink) because the elements simply increase in size and the resolution of them still remains crisp looking because they are vector based.
However, if you have an image of your logo, that image is rasterized. When an image is rasterized, the resolution is limited to the number of pixels in the image and it cannot grow or shrink dynamically like a vector based image. This is where the problem happens. If you have an image with a set resolution, and your scaling is set to 200%, the image must be stretched in order to be the same size as the elements around it that have been scaled up. This results in each pixel having to cover more area, and this creates a blurry image.
How to Change Scaling Settings in Windows
To change the scaling settings in Windows:
- Right click on an empty part of your desktop and click Display Settings.
- Under Scale and Layout, change the scaling settings to 100%.
How to Change Scaling Settings in Apple Mac
To change the scaling settings in Apple Mac:
- Go to System Preferences.
- Click on Displays and then on the Display tab, under Resolution, select “Default for display”.
Set Your Images to 72 DPI (Dots Per Inch)
Outlook and Apple Mail use the image’s DPI value to scale the image. By default, most email clients want images to be 72 DPI. Except for older versions of Outlook (2016 and earlier) which want images to be 96 DPI.
This is why it’s important to have the DPI value for all images in your email signature set to 72 DPI. If it’s set to anything else, you may experience blurry images.
How to View the DPI Value of an Image in Windows
To view the DPI value of an image in Windows, follow the below instructions.
Note: With some image types such as PNG, you won’t be able to see the DPI value of the image in Windows without using photo editing software.
- Right click on the image in Windows Explorer and click Properties.
- Click on the Details tab and scroll down until you can see the Image heading and in there you will see Vertical Resolution and Horizontal Resolution. The value in here is the DPI value of the image.
How to Change the DPI Value of an Image in Adobe Photoshop
To change the DPI value of an image in Photoshop, follow the below instructions.
- Open the image in Photoshop.
- Click on Image from the top menu, then click “Image Size…”. From there set the resolution to be 72 and ensure the measurement unit is “Pixels/Inch”. Also, ensure that Resample is ticked and set to Automatic.
- Save the image.
Pixelated Email Signature Images
Avoid Using PNG Images With Transparent Backgrounds in Older Versions of Outlook (2016 and Earlier)
Because PNG’s support alpha channels, this makes them a great choice when you want to have a transparent background for your image. However, this can become a problem if you use them for email signatures.
If you use a PNG with a transparent background for your email signature, you will likely find that the image will look really pixelated and grainy when you use it with older versions of Outlook. This is because older versions of Outlook convert all images in email signatures to GIF format, and GIF’s don’t support alpha channels.
Don’t Resize GIF Images Using HTML Attributes
When you resize GIF images using HTML attributes, it can cause the image to look pixelated. If you need to adjust the image scaling or dimensions, use photo editing software instead.
This is not to say that you shouldn’t have image height and width attributes in your <img> element. You definitely should, but make sure that the image height and width attributes are the same as the actual image height and width.
<img height="120" width="120" src="https://your-image-host.com/img.png">
Wrap Up
Email signatures can be a tough nut to crack at times, simply because there are tons of compatibility issues between email clients.
Something as simple as using the wrong image type can cause your email signature to look completely unprofessional.
If you’re stuck, and just want an email signature that works out of the box, feel free to try our free email signature generator.
Hi. I am trying to create a picture from a paper copy of a black and white photo. It is from an email and when I try to use photoshop, it is extremely low resolution and highly pixelated. The file is only 113 kb. Is there a way to decompress the file to get more resolution? PLEASE HELP! I am doing it for my Aunt who is 102 years old.
Hi Lois, Unfortunately, it’s not possible to add extra resolution to an image after the photo has been taken. The resolution of a photo is determined by the device that is taking the photo (camera).
Hi Gordon
I’ve been checking out Gimmio and love your videos. Thanks for what you have up.
I have two questions that I hope you can assist with:
1. Are the fonts clickable in a Gimmio designed signature? I.e if a receiver of my email were to click the text, would they be able to copy and paste (e.g my telephone number)?
2. Would the signature that I design through Gimmio be one that I can have as html from my own server or is it up on yours?
3. I use MAC/APPLE MAIL and had stored my logo up on my server, but for some reason it won’t refresh/update to reveal the new logo in new composed messaged. Is there a way to clear the mail cache? It just kept showing the old logo… My work-around so far is to have a completely new filename on my server rather that using the same existing filename.
Thank you for your help. I will most likely be using Gimmio for a different purpose across multiple volunteers of one group.
Hi Damien,
Thanks for the awesome feedback 🙂
1. Yes, you can make the text clickable with the use of a hyperlink. You can either make it go to a website, skype chat, click-to-call (where it calls the mobile number you specify) or other uses. They will be able to copy the text in your signature.
2. Once you’ve created your signature, you copy it and paste it into your email client to use. However, the images are hosted on our server.
3. This sounds like server-side caching. Meaning, when you upload the new logo to your server, it is still serving the old logo as it’s cached it because it has the same filename. This is especially true if you’re using WordPress. The best way is to use another filename for the image when uploading it. There are some plugins around to clear cache, but I don’t know what they are off the top of my head.
Hi Gordon
Thanks so much for your reply. It’s all really helpful.
I’m just wondering if it means that we only have access to our signature on Gimmio for as long as we have a subscription?
Thanks again,
Have a great weekend.
Damien.
Hi Damien,
Thanks for your message. In order to give you an accurate answer, we will need to take a look at your account. If you wouldn’t mind, please send an email to support@gimm.io with the question and one of our team will get back to you.
Hi Gordan,
My email signature is getting squashed when gmail inserts my image into the signature field. My PNG has dimensions of 200px by 90px so I’m not sure what to do in this instance 🙁 Please help!
Hi Catherine,
Did you create the signature in HTML, or did you create it in Gmail itself? If you created it in Gmail, sometimes I have seen images change size like you describe. Your best bet would be to create an HTML email signature and then paste it into Gmail. That way, images shouldn’t change sizes. Here’s a link to our generator: https://gimm.io/en_US/email-signature-generator
Did you ever try this?
https://answers.microsoft.com/en-us/msoffice/forum/all/image-in-email-signature-blurry-solved/695ea500-24bf-4786-b0a9-7002d5990851
In case you cannot add HTML manually, this may work as a workaround!
Regards