updated: January 5th, 2007 / Ross Johnson / 0 Comments

Dealing with Transparent PNG’s and Printing?

I came across an interesting situation today, where the background of transparent background of PNG’s and printing became an issue. The client being a developer had hired an incredible artist/architect to draw some beautiful renderings of the building based on the plans and the master plan.

The Problem

Due to the gradient background I had to use transparent PNG’s to achieve the watercolor effect that matched the renderings themselves. However the artist, Stephen Trendov noticed that when printed the background of the transparent images becomes black. Not only is this a waste of ink, but it looks rather ugly. Because it is rather hard to read large bodies of text on screen, especially the older you become, many users opt to print out pages. Needless to say a clean (even if not perfect) printed solution is necessary.

The Solution

Racking my brain with a worthwhile solution that fit somewhere between giving the graphic a background and trying to fiddle through absolute positioning to make it fit correctly, it suddenly hit me.

Simply have a print only image, which has a background and is hidden in the screen style sheet but visible in the print. Then with the default image, do vice-versa.

The Drawbacks

Of course there are drawbacks, and many browsers will download that image even if it is set to display:none in the stylesheet. This is no problem for us on broadband, but many users are still on dial up connections and that is obnoxious. The best solution I can think of is to use extra compression or convert the image to a GIF for the printer version. That way the content is still obvious, even if it doesn’t produce a print quality piece (and how many websites really do?)

The other option is to use a DIV that has a background image in the print stylesheet, but not in the screen stylesheet. However many browsers (such as IE) have “print background images” set to off by default – where you might as well simply turn off the images for printing.

Have any other ideas?

Print style sheets are not exciting enough to get tons of coverage, so the options out there are still pretty limited. I am open to any suggestions on better methods!

FREE CASE STUDY: 100% INCREASE IN LEADSHow we increased our clients leads by 1000% by using design psychology

Using a process that anyone can use for any industry