When saving semi-transparent layers from Photoshop files (provided by designers) as PNGs for use on websites, I've found that the resulting PNGs don't quite render with the same opacity as the original Photoshop file.

They're in the ballpark, but they tend to be a little bit more opaque than the originals in Photoshop. I've noticed this when they've been positioned over photographic images.

Anyone noticed this? Anyone know any automated work-arounds? I've been having to adjust the opacity manually before saving, using trial and error to get the finished PNG looking the same as the Photoshop original.

3 answers

Guffa 316
3
points
This was chosen as the best answer

I don't know of any differences with the alpha channel, but there is differences in color reproduction, which of course also can affect the part of the image that is partly transparent.

Make sure that you are working in the color space sRGB when you are producing images for the web. If you have a different color space Photoshop will display the image with color correction, while the browser has no color space information and will assume that it is sRGB.

Use the "Save For Web" function to save the final images, and don't include color space information (not an option for PNG images anyway). As some browsers respect embeded color space information and others don't, you have to use sRGB anyway to get a consistent result, so including it in the file is just a waste of bandwith.

The PNG format doesn't have color space information, but it has a gamma correction value (which was an early attempt to fix color space differences). The gamma correction is however handled a bit different from browser to browser, so you will still have some slight color differences regardless of how careful you are creating the images.

Oh, and just to make sure - check that you haven't managed to display the same image twice on top of itself. That would of course affect the alpha opacity.

Answered almost 7 years ago by Guffa
  • The last tip is a good one - I spend hours trying to figure out why my PNGs were coming out "less transparent" and it was because I had three stacked on top of eachother. James King almost 7 years ago
danwellman 5600
1
point

Slightly related: if you get color-match issues when using PNGs and JPEGs on a site (they are both cut from the same PSD and should be the same colour but aren't) you can use a tool called PNG Optimizer which adjusts something in the PNG to correct color-match problems. It also shrinks the PNG filesize and is a great little tool :)

Answered almost 7 years ago by danwellman
  • Ah yes, Ive used [pngcrush](http://www.google.co.uk/url?sa=t&source=web&ct=res&cd=1&ved=0CAkQFjAA&url=http%3A%2F%2Fpmt.sourceforge.net%2Fpngcrush%2F&ei=8sEqS6vwC8Gy4QaxuoibCQ&usg=AFQjCNFGu4F1meVwkg4WsKZ8M_a4J7Ee_A&sig2=f9HV6l5b82q6mwMFaXXGYA) to do similar. Paul D. Waite almost 7 years ago
Rob 230
0
points

I was going to pull a great link out of my bookmarks showing the problem better explained but surprised I couldn't find it. Yes, Photoshop does PNGs wrong. The Gimp does things right. And that's all I remember. Maybe not helpful. Still searching. Read this while I do so.

Answered almost 7 years ago by Rob