PNG Transparency and Printing Grief
March 29, 2006 – 9:48 amI’m having trouble printing PNG images with (supposedly)
transparent backgrounds, and I’m hoping one of this blog’s readers can
help. Here’s one of the images from the Software Carpentry course:
[image not available]
If I open it with the Windows Photo Printing Wizard (on XP), it
shows up as dark blue lines on a faint blue background; when I print
it on a black & white printer, it comes out as black lines on a
white background.
Open it directly in Firefox 1.5.0.1 (also on XP), and it displays
as dark blue on white. When I print it from Firefox, though, I get
dark gray on near-black—sort of, but not quite, a negative image of
what I actually want.
If I create a vanilla HTML page:
<html> <body> <img xsrc="http://www.third-bit.com/swc2/lec/img/py02/negative_indices.292x83.png" mce_src="http://www.third-bit.com/swc2/lec/img/py02/negative_indices.292x83.png"/> </body> </html>
and open that in Firefox, I get the same behavior. Open that page
in Internet Explorer 6.0.2900, however, and I get dark blue lines on a
faint blue background; printing from IE gives me dark lines on a faint
gray background.
So, what am I doing wrong?
3 Responses to “PNG Transparency and Printing Grief”
While PNG is a great format some of it’s features can produce odd results.
I’m guessing that these problems are caused by two things:
1) The background color of the PNG. You can embed a background color inside a PNG that is used when the system rendering it can not cope with alpha transparency. I know that IE6 will render onto this color unless you use the direct-x hack to get full alpha channel support for the page.
2) Gamma chunk. While a great idea it’s implementation is a complete disaster. The decoder used by Windows seems to over compensate and make images too bright and even libpng isn’t used correctly in most cases.
The best thing to do with both of these is to turn them off. Loading the image into The Gimp and using ‘Save As’ to disable Gamma and background color (or setting it to a more sensible color) usually fix these problems.
By Russ on Mar 29, 2006
I had a similar problem when I added transparent PNG files to a website I was working on. Transparency worked fine for FireFox, but not in IE. I used irfanview to convert the files to transparent gifs. Problem solved.
By James Gray on Mar 30, 2006
I just came across this post. Of course you can do this in Photoshop, too. In the “save for web” dialog (File -> Save For Web & Devices) you set the “Matte” value to white.
By Max on Jan 29, 2008