High-Resolution Image Printing

by Ross Howard

56 Reader Comments

Back to the Article
  1. We used the same method as Will Howat on a recent project. It’s great for logos and other repeating page elements, and gets the double whammy of a) only putting the image in the html once and b) avoiding background-images-off-when-printing embarrassments.

    To knock-out the image we used negative positioning rather than display: none; on the <img> in the screen stylesheet to shove it out of view while still keeping the alt attribue available to screen readers (e.g. position:relative; left:-500px). 

    I’m sure the technique could be adapted for content images fairly simply – either by adding styles to the <head> area to control images on a specific page, or by some scripting jiggery-pokery to right the relevant dimensions and background image url for each image.

    Copy & paste the code below to embed this comment.
  2. Question – can you rescale a background image with css?  if so, it could be sensible to select an <img> background image based on the src attribute (or something else) and apply the appropriate rez image, one rule in each the print and screen stylesheet (you did set a media type, right?)

    Copy & paste the code below to embed this comment.
  3. I was thinking, why use this method at all, since it’s still downloading both hi and low res images? Why not just use a higher quality/res (10-12 image quality at 100-150dpi same size width/height in ps) image in your screen/print stylesheet? You’ll save on bytes and it’s just one image now, no need to hide the hi res image. Am i right?

    Cheers for coming up with this discussion and article though.

    Copy & paste the code below to embed this comment.
  4. …to send a page to the priner, and at the same time provide the user with a preview of what’s actually going to be printed – which can be adopted to substitute a higher resolution image as well. I am, however, using JavaScript to reconfigure page for printing, this way the big (and it is big) image is ignored, unless the user decides to print the page…
    “sample page”:http://www.gerasimenko.com/design/printimage/

    Copy & paste the code below to embed this comment.
  5. I have noticed problem with this method in Firefox. If I use big downscaled image sometimes it looks broken on print. Have no idea why… but this is may be first time, when Explorer did his job better then Firefox.

    Copy & paste the code below to embed this comment.
  6. Using a single high-resolution image and resampling it for screen rendition seems to be a viable option for some images, such as photos, but can generate an unacceptably poor result for other images, especially line art (unless the image is viewed in Opera 8, which has an excellent resampling engine). I don’t understand the comments which refer to resampling not taking place in the browser. Perhaps this has something to do with the operating system as well as the browser brand and version number? (I’m testing on WinXP and Win98.)

    To avoid seeing two images in unstyled html, another technique is to overlay a background image for screen on top of a foreground image for print, by means of a single transparent pixel:

    <img id=‘image-for-screen’ src=“i/single-transparent-pixel.gif” alt=”” />

    …in the html, along with…
    #image-for-screen {width:100px;height:100px;background:#f6eabb url(i/image-for-screen.gif) no-repeat}

    …in the screen css.

    Sometimes it’s better to get the print image off the screen altogether. Unfortunately, print images are not reliably uploaded by Opera 8 (or Opera 7.5, or both — I can’t remember) if display:none is set on the print image in the screen css. Or at least, they’re not reliably uploaded under some circumstances. To avoid this problem, and to avoid the gap that can result from position:relative (if one wants to avoid the gap), I’ve been using:

    .hidden-off-screen {position:absolute;left:-999px;top:-999px;width:1px;height:1px}

    …for the print image in the screen css.

    I enjoyed the article, and particularly like the idea described by Will Howat and Sophie Dennis (for situations where it’s suitable). As I haven’t posted on A List Apart before, I’d like to add the I really appreciate the magazine, and love the new layout. I’d welcome more articles on the topic of styling web pages for print, as I consider print rendition to be as important as screen rendition, and — as a neophyte DIY web developer who hasn’t even got a website online yet — I’ve found this area quite challenging.

    Copy & paste the code below to embed this comment.
  7. Woops. A trap for new players. I notice that Dmitry and I have entered some of the characters in our posts as html entities. Unfortunately, the Comment Preview renders these as characters, whereas the post itself shows them as entities.

    My line above:

    <img id=‘image-for-screen’ src=”?i/single-transparent-pixel.gif”? alt=”?”? />

    should read:

    ?i/single-transparent-pixel.gif

    Copy & paste the code below to embed this comment.
  8. This is kind of related, and may come in handy. In case you ever need to create and image, that’s design for a specific print-size, you should set the image resolution to 96 dpi.

    For example, if you have a site that generates a shipping label, with the barcode that the post office uses, you’ll need that barcode print out to a very specific size. So go into Photoshop, create your 1” by 1” barcode at 96 dpi, and place in your webpage. Now, whenever someone prints that page, and 1” by 1” image of that barcode will print out, no matter what browser you use.

    It took me some time to find that info, so hopefully it helps someone else.

    Copy & paste the code below to embed this comment.
  9. I’ve been using this method to provide better print header images on some pages like “this one”:http://www.alzonline.net/en/reading/driving.php. It got me out of creating PDFs!

    The “top print image”:http://www.alzonline.net/images/publication/print_header.png is positioned offscreen and made 1×1 by screen CSS, the print CSS scales it to about a third of its original size so it prints at roughly 96*3=288 dpi.  The “logo”:http://www.alzonline.net/images/publication/print_logo.png at the bottom is a bit higher quality.  I think the key to keeping file size down is to use small-palette PNGs or GIFs.

    Copy & paste the code below to embed this comment.
  10. 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.
  11. 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.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. <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.
  20. 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.
  21. 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.
  22. useful

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

    Copy & paste the code below to embed this comment.
  24. 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.
  25. 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.
  26. 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.