0

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

Improve this question
4
  • could you post an actual screenshot with the problem visible? On my W7, Firefox 29.0.1, the logo is on a white bg, rendering the tracing invisble.
    – Vincent
    May 28, 2014 at 11:54
  • i added a screenshot, but the tracing is actually on the gray part of the aircraft in the background. It's like an inner tracing, for lack of a better word. Its a faint white line just inside the edge of the aircraft.
    – hyphen
    May 28, 2014 at 12:00
  • Are you using Save For Web from Illustrator? And if so, does your logo have a transparent background?
    – Chris Langford
    May 28, 2014 at 12:28
  • I've tried using save for web from illustrator, but the version that's there now is from the save for web function in photoshop. I got similar results with both. and it does have a transparent background.
    – hyphen
    May 28, 2014 at 12:32

1 Answer 1

Reset to default
3

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.

Improve this answer
2
  • that's weird, because I'm using Chrome, but I did pull it up in firefox, and it looks great there. UGH! I don't actually need a transparent background, so I saved as a png without transparency and the aircraft doesn't have the white tracing anymore. It's still blurry in chrome though, so I've gotta get that figured out. As far as the resized image, I think my theme is doing that even though the image I uploaded is the desired size. I'm going to have to dig into that.
    – hyphen
    May 28, 2014 at 12:42
  • ok, I created a much larger version in photoshop, and then reduced the size in the save for web dialog and removed the transparency. Now it looks crisp in chrome and firefox. Thanks for your help!
    – hyphen
    May 28, 2014 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.