How to Fix Blurry, Pixelated or Fuzzy Email Signature Images

blurry-pixelated-email-signature-images

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 the scaling settings on your PC are not set to 100%, or they can be pixelated if you have background transparency in your images. 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.

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, like the ones below:

<img height=”143″ width=”142″ 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:

  1. Right click on an empty part of your desktop and click Display Settings.
  2. Under Scale and Layout, change the scaling settings to 100%.
scaling-settings-windows

How to Change Scaling Settings in Apple Mac

To change the scaling settings in Apple Mac:

  1. Go to System Preferences.
  2. Click on Displays and then on the Display tab, under Resolution, select “Default for display”.
scaling-settings-apple-mac

Set Your Images to 96 DPI (Dots Per Inch)

Outlook uses the image’s DPI value to scale the image. By default, Outlook wants all images to be at 96 DPI. This is why it’s important to have the DPI value for all images in your email signature set to 96 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.

  1. Right click on the image in Windows Explorer and click Properties.
  2. 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.
checking-dpi-settings-windows

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.

  1. Open the image in Photoshop.
  2. Click on Image from the top menu, then click “Image Size…”. From there set the resolution to be 96 and ensure the measurement unit is “Pixels/Inch”. Also, ensure that Resample is ticked and set to Automatic.
  3. Save the image.
changing-dpi-settings-photoshop

Pixelated Email Signature Images

Avoid Using PNG Images with Transparent Backgrounds

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 Outlook. This is because Outlook converts all images in email signatures to GIF format, and GIF’s don’t support alpha channels.

png-image-transparent-background

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=”143″ width=”142″ 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.

Leave a Reply

Your email address will not be published. Required fields are marked *