Many times when we print the web page it produces crisp and easy to read text while pictures are blurred and/or pixelated. This tutorial will show you how to fix that issue.

HTML high quality image printing should be implemented for any web site where documents may end up on the paper.

Concept:

Computer screen and paper are two completely different creatures. We will show you how to provide two (different) contents to fit the requirements of each media, while keeping our website visually untouched.

Quick and dirty:

Complete the design of your documents in HTML and print them. Once on the paper look for the images that need to look crisp. In many cases that would be logos or charts. Grab a ruler and measure the images. Write down dimensions as decimals with highest precision.  We will use TranslationPerfect.com's logo as an example.

Actual dimensions are 265 x 21 pixels, which roughly translates into 2.625" x 0.205" on the paper. In your case dimensions will be different.  Now go back to your image editing application and get the original (source) file. Remember that printer copy starts to look good at 300 dpi (dots per inch). You will need to create another copy of your image multiplying the dimensions from the paper by 300. In our case that would be 300 x 2.625 = 787.5 (we will round this up to 788. Second dimension is 300 x 0.205 = 61.5 (we will round this up to 62).  Now you know the precise dimensions of the file you need to create.  It will be exactly the same image you already have in your HTML, just a bit bigger. Export that image into your favorite format and upload it next to your HTML image. Here is our enlarged copy of the logo with the same attributes width="265" height="21" applied to it.  It looks bad on the screen but will sure look good on the paper.

Now the only thing we need to do is to hide HTML image when we print the page and hide the Print quality one when we look at the page in our browser. For that there is a CSS trick.  In CSS file add the following lines.

@media screen {
    img.print { display: none; }
    img.screen { display: inline; }

} 

@media print {

    img.print { display: inline; }
    img.screen { display: none; }

} 

With two extra classes you can change the way your document will look on the screen and on the paper.  Put two images right next to each other and add "print" class to the one you need to print and "screen" to the one you need to show in the browser.  Here is our sample code:

<img xsrc="/images/stories/labs/tp-300dpiGS.gif" width="265" height="21" class="print" />

<img xsrc="/images/stories/labs/tp-265x21.gif" width="265" height="21" class="screen" />

Enjoy.

P.S. There is a more complex way of applying very specific dimension in inches for print copy.  Usually it is not required unless you are creating magazine in HTML and know for sure it will be printed.

P.P.S. If you are using high resolution inkjet printer you can substitute 300 with whatever number your printer supports.  There are some printers that can print at 1440dpi and above.  The only issue is how fast your server can send that image to the browser.