High-Resolution Image Printing

by Ross Howard

56 Reader Comments

Back to the Article
  1. I mentioned something like that last year in my Weblog: “Print a logo”:http://jeenaparadies.net/weblog/2004/aug/print-logo I think my approach suits website logos, which also are almost always links, better.

    The article is in German, but there are the HTML and CSS too, so you should understand how it works.

    Copy & paste the code below to embed this comment.
  2. I have found previously that images such as logos (i.e. better suited to GIF files) work much better when printed if they are NOT anti-aliased. You get much better edge quality without any fuzziness.

    Copy & paste the code below to embed this comment.
  3. You only get the better quality when you create the big, and print them small, as per example.

    Copy & paste the code below to embed this comment.
  4. You can completely hide your the printable high resolution image too so why not use:
    <img class=“printHiResImage” height=“0” width=“0” alt=”“>
    And in your print stylesheet add this:

    img.printHiResImage {width:30px;heigth:30px}

    Copy & paste the code below to embed this comment.
  5. If need to preload a high resolution (eg 150dpi – 300dpi)
    You can always preload the image with CSS.

    Print Styles:
    /* preload print image */
    div#Print {background:transparent url(’../images/printHiResImage.gif’) no-repeat -1000em -1000em;}
    /* set width and heigth of print image */
    img.printHiResImage {width:30px;heigth:30px}

    The HTML:

    <div id=“Print”>
    <img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>

    Copy & paste the code below to embed this comment.
  6. One thing more is needed though:

    Set div#Print {display:none} in the normal stylesheet


    And in the print stylesheet (I guess this stylesheet with the media attribute , media=“print”, is only downloaded when printing actually something ??)

    div#Print {display:block}

    Copy & paste the code below to embed this comment.
  7. Images of course have a src too:

    <img class=”?printHiResImage” src=“images/printHiResImage.gif” height=”?0” width=”?0” alt=”?”

    Copy & paste the code below to embed this comment.
  8. To sum it all up:
    – preload the high resolution image with CSS, hide print image from view
    – show <img> in Print Stylesheet

    In your normal Stylesheet:

    div#Print {
      background:transparent url(’../images/printHiResImage.gif’)
      no-repeat -1000em -1000em;
      display:none;
      }

    In your Print Stylesheet:

    img.printHiResImage {width:30px;heigth:30px}
    div#Print {display:block}

    HTML:

    <div id=”?Print”?> <img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>

     

    Copy & paste the code below to embed this comment.
  9. <div id=”?Print”?> <img class=”?printHiResImage” height=”?0” width=”?0” alt=”?”>

    should be:

    <img class=”?printHiResImage” src=”?images/printHiResImage.gif” height=”?0” width=”?0” alt=”?”

    Copy & paste the code below to embed this comment.
  10. Hi

    Please can any one help me to manage a stick up footer on the website for IE 5.0 +.

    As you can see 1 on http://www.bmw.co.uk

    thanks

    Imran Hashmi

    Copy & paste the code below to embed this comment.
  11. Hi

    Please can any one help me to manage a stick up footer on the website for IE 5.0 +.

    As you can see 1 on http://www.bmw.co.uk

    thanks

    Imran Hashmi

    Copy & paste the code below to embed this comment.
  12. useful

    Copy & paste the code below to embed this comment.
  13. pls allow me download the image

    Copy & paste the code below to embed this comment.
  14. I use low-resolution and clickable thumbs for accessing the high-resolution images.
    There http://www.phpclasses.org/ are a lot of good gallery-scripts that make it automatically.

    Copy & paste the code below to embed this comment.
  15. I so needed this.

    I’ve built an app that does quotes, and people really need to be able to print. The images I put up at first look great on the site then as soon as you go to print it is crap…

    Using 300 & 150dpi images has fixed all the issues. As this is an application and the same 7 images are used over and over again, I’ve simply added a preload js function. Works great.

    Now all I need is to get IE7 to print Transparent PNGs…

    Copy & paste the code below to embed this comment.
  16. I suggest you turn off antialiasing to produce B/W print images.

    The circles in the example are antialiased, so the printer will use patterns/hatches where the pixels are gray. Using high resolution jagged images improves the sharpness of the borders (barcode readers will thank you too).

    Just test and see.
    Cheers.

    Copy & paste the code below to embed this comment.