[FIXED] How to avoid aliasing when you place a GIF image over a PNG image?

Issue

I have two images. The background image is in png format and the second image on top is in latex gif format. When I place the second image on top of the first image, it causes the first image to be blur.

The image looks like this when combined, (1/5 is actually an image here):

How to avoid the blur in the second image when I place the second image on top of the first image?

Solution

It isnt blur. Pixels on gif / 8 bits png are 100% transparent or 100% solid. So, to let the transparency softer, photoshop simulates 1-99% alpha with half tone pixels.

In a example, if you have a black image that is going to be on a white webpage (matte color), photoshop produces grey pixels to let the transparency softer. It works good in this scenario but it becomes a mess when you use this same image on a different background.

When you're at photoshop with your original transparent image, click on "save for a web", then do one of the following:

1- Save it as a png 24 bits (with transparency box checked) and it will be ok no matter the background where you'll put it on (deep transparency, no worries).

2- If you want a smaller file size and choose gif or png 8 bits, you must select a matte (color that will be at the background on your website). The result isnt perfect over multi-color/textured backgrounds; anyway, in your sample the matte is "#ca7e29".

Answered By - L777

Answer Checked By - Marilyn (PHPFixing Volunteer)