save for web produces blurry png's with white tracing


I'm having an issue that I can't seem to get around. I wouldn't call myself a graphic designer, as I only use photoshop and illustrator in relation to web design, so I know enough to be dangerous. I've had an issue numerous times in the past when I use save for web and save an image as a png-24, it comes out blurry, and often has a white tracing along the inside edge of parts of the image. I'm not sure if that makes sense, but you can see it in action with the logo here:

Notice the gray aircraft in the background has a faint white tracing. Believe it or not, this is one of the better ones as I've been doing a lot of reading on here and trying various things. The latest thing I tried was to make the original image 4x the size of what I wanted, and made sure it would scale down exactly with no half pixels. No luck.

In the save for web dialog everything looks crisp and no white tracing, and if I click the "preview" button, the resulting image is perfectly crisp.

If I open the image from the website in another tab, the text looks clearer, but the white lines on the aircraft are still there. So I'm guessing Wordpress is causing some of this, but I'm unsure of how to fix it. I've also tried uploading the image in the size I want to use, which is 120px in height.

Does anyone have any tips?

posting screenshot as requested, but its barely visible here:

enter image description here

5/28/2014 1:11:00 PM

Accepted Answer

This sounds like a browser rendering problem rather than the method you're using to export the image from Photoshop (the image looks perfect in Chrome).

Does your PNG actually need a transparent background? You can Save for Web with the Transparent checkbox unticked for a solid white background.

Finally because your source image is identical size, you can use the original uploaded version of the logo (Synergy-316_120.png) instead of the Wordpress-resized image (Synergy-316_120-316x120.png). There's a possibility that Wordpress has done a bad job of compressing your image during the upload/resize/compress process.

5/28/2014 12:29:00 PM