Making Print Versions of Web Pages and Logos

We often get requests to ensure that print versions of our sites look just as good as the web version.

One of the challenges we routinely face is ensuring the company logo is printed crisp and clear.

We originally thought that by making a very high resolution image (300dpi) and sizing it exactly our printer would create a high quality image upon printing. Oddly this was not the case and the printer output a grainy quality logo.

After a few hours of searching we finally found a solution by coming across this article that explained the image needed to be made at 72 dpi but at a very large size then scaled to our required size using CSS width and height attributes.

When a print request is made we simply swap in the high quality logo for the low quality and the printer handles the rest. The only negative here is that we are adding another image download to the page.

Our general practice for laying out all other text copy on our pages is to strip away all colour content and formatting so the visitor can ensure the print copy flows nicely in to their printer. Long gone are the days of printing a web page that hangs over across two pages and is printed in full colour wasting expensive toner - well at least they are with our sites!