• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 193
  • Last Modified:

PNG has jagged edges

The logo and some of the other icons on the page at http://fellowtip.codeyoda.us have jagged edges.  My developer asked for .png files with no background and that's what he's using.  He can't figure out what the problem is so I'm hoping you can help.
0
Iamageorgiabulldog
Asked:
Iamageorgiabulldog
1 Solution
 
lherrouCommented:
Iamageorgiabulldog,

When the PNG was originally output, I am guessing there was not a colored background, so there's no anti-aliasing (http://en.wikipedia.org/wiki/Anti-aliasing) applied (since there's no background, the graphics program doesn't know what color to shade to). The solution is to have a background layer in the color you think you're going to use (or at least close), and then make that background layer invisible.

In addition, your PNG is more than twice as big in pixels as the area where it's being used, so it's being scaled by the browser. This can enhance the jaggies. I took your PNG and, in Photoshop, added a white background layer, then re-sized to 200 px wide, hide the background, and saved for web as a new PNG. The result is below, you can see it's nice and smooth by comparison.

Cheers,
LHerrou
fourseasons-logo-sm.png
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now