PNG has jagged edges

The logo and some of the other icons on the page at 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.
Who is Participating?
lherrouConnect With a Mentor Commented:

When the PNG was originally output, I am guessing there was not a colored background, so there's no 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.

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.

All Courses

From novice to tech pro — start learning today.