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 WebinarOur proven method of increasing website leads by 400% or more using design psychology

That anyone can implement, even if you're not a designer or developer.

Join me on April 8th at 11:00am EST time and you'll learn:

  1. How to understand your target audience so you can excite them and drive them towards action
  2. How to capture prospects before they’re ready to reach out, so you can build a relationship and nurture them towards a sale
  3. How to avoid the #1 mistake on websites that causes lackluster results
  4. A step by step process to realign your website around your target audience’s psychology

Plus we'll provide downloadable templates and checklists so you can implement what you learn on your own!