High-Resolution Image Printing

by Ross Howard

56 Reader Comments

Back to the Article
  1. Speaking of print style sheets, when I do a print preview of this article in Firefox, the content moves across the page to the right on each successive page. If I increase the scale from “shrink to fit” to, say “100%” the content starts to go off the page at the right hand side. Is anyone else noticing this problem, and does it actually occur when you print the article out? I’m not attached to a printer so can’t check myself.
    Copy & paste the code below to embed this comment.
  2. bq. One question that still intrigues me is whether all browsers download image files that are referenced in a print style sheet but not in the screen style sheet or in the markup? The limited number of browsers I’ve tested do appear to download the images whether the user prints the page or not. The problem is that the image file _is_ referenced in the markup. The browser can’t tell if there might be some JavaScript that later makes the image not-hidden. The browser dutifully requests the image from the server just as the markup tells it. In my opinion, this is another argument for the content property to be allowed in places other than :before and :after. If you had the following markup: example.jpg adding the following to your print stylesheet would do what you want:   #example { content: url(“example_hi-res.jpg”); } Unfortunately, that doesn’t currently work. I think I suggested a similar approach way back when FIR was big news. I guess this is more for a W3C list than ALA, though.
    Copy & paste the code below to embed this comment.
  3. Another method is making a separate printerfriendly html-version (alongside a printerfriendly css file on the actual page).
    Then you can place images with a larger resolution that will only be downloaded if the user deceides to print the page. This technique has been working fine for years, that’s to say: if your pages are rendered from a dB.
    Copy & paste the code below to embed this comment.
  4. “Greg Pfeil’s proposal”:http://www.alistapart.com/comments/hiresprinting?page=1#3 would work in Opera 8 (and I guess Opera 7 too). Another solution would be using content on :after and then position it absolutely to hide the low quality image (but that would not work on Gecko yet).
    Copy & paste the code below to embed this comment.
  5. This article seems to be missing a few paragraphs - the ones that tell us how to actually _do_ this image swapping trick. Sure he tells us what we need to do, and shows that the hires image can be shrunk down to an unobtrusive dot. Apparently he’s “experimented with various image replacement (IR) techniques” and found one that works in every modern browser - which is nice. Unfortunately, he doesn’t set out what that technique is. We have to go picking through the source of the page and ALA’s (as yet non-existant) print stylesheet to see how it works (if, indeed, it does - Firefox print preview seems totally confused by the whole page right now). Some more code snippets would have been helpful, as would putting the examples on a seperate page, with minimal content and the CSS in a <style> element to keep everything together.
    Copy & paste the code below to embed this comment.
  6. Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file?
    Copy & paste the code below to embed this comment.
  7. bq. Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file? That might work OK for a logo that is always in the same place on every page, but it would be more problematic for pictures scattered throughout the document. One option might be to use an empty <div id=“pic1”></div> (or would it need a &nbsp; in to stop it collapsing?), set the height and width of the div in the CSS, and then give it a different background image in each of the screen and print stylesheets. I don’t know how much I like this idea - it seems to be subverting the perfectly good and semantically correct <img> construct for a very limited benefit.
    Copy & paste the code below to embed this comment.
  8. Hmmm…Including a few 300dpi photos that will print if the user prints but still has to download when he/she first comes to the web page? That could slow a modem user down to 3 or 4 minutes for a page to load. I know you say to use it only if you think it’s neccessary but I wouldnt want every user to have to sit there through that when only maybe 5% would print. I’d probably just have a link to a page that includes the high-res photos and give them warning ahead of time. Nice article though, some useful info.
    Copy & paste the code below to embed this comment.
  9. so,
    - having the images in the html increases the download volume,
    - setting it as background-picture makes it less likely to print(as you can turn off printing of backgrounds, isn’t that even a default setting?)
    - :after {content:...} is, so far, not working everywhere.
    I like the idea, but can you use it in a commercial environment?  Is it possible to detect the display-medium, i.e. via Javascript? If JS worked, couldn’t you simply replace it? I guess that would be the straight forward way, so I must assume it doesn’t work, otherwise it would’ve been suggested before?! So, is the solution without downsides to wait for IE7 and use :after?
    Copy & paste the code below to embed this comment.
  10. I’m curious why the article mentioned using height=“1” width=“1” instead of setting height and width to zero. I’ve been using this technique for about a year to create print-style letterhead for web pages, and as these are usually fairly light on file size, I have not been concerned. Including large images and then crunching them down with the height and width attributes was always one of the first lessons taught in beginning HTML classes, and I’m not sure broadband is proliffic (or effective) enough to change that wisdom. I have read that previous versions of Netscape would not download an image set to display:none, although preliminary testing has shown this is not the case in Safari 2 or Firefox 1.0.6. Do any modern browsers still do this? Also, regarding using a <div></div> and CSS to do the job, lets not forget that most browsers _do not_ print background images by default, so unless you’re dealing with a very web-savvy user base, you’re going to get some complaints.
    Copy & paste the code below to embed this comment.
  11. That was a very interesting article. I had no idea there was a difference when images are printed as opposed to viewed on screen.
    Copy & paste the code below to embed this comment.
  12. I wrote about “creating great looking logos with a print stylesheet”:http://www.juicedthoughts.com/archives/creating_great_looking_logos_for_your_print_stylesheet.cfm back in July of 2004. It really is a nice effect. ALA definitly wrote up a nice summary of how to accomplish relatively the same effect. The process of how to do it has been around a while, just not many people knew about it.
    Copy & paste the code below to embed this comment.
  13. I agree with an earlier comment that this would bog down the loading of a web page. If I’m loading a low-res 10k image and its high-res counterpart that is 100k then hiding the high-res image aren’t I just adding weight to the page? Wouldn’t it be easier to preload the hi-res image into cache with JavaScript and then use a separate print style sheet to replace the low-res image with the hi? Imagine this concept put to use on a gallery page. It would work fine in our little broadband world, but those still exiled to 56k land would browse away.
    Copy & paste the code below to embed this comment.
  14. Personally it seems to me to be a lot of overhead, however, I can see this technique being wildly useful in select cases where the users would want to print the page. ie: Invoices, receipts, menus, and other pages which are, generally speaking, relatively light pages. I’m curious as to whether or not you could use a little handy JavaScript to keep loadtimes down. Add a link to the page, when pressed it changes the <img>‘s “src” attribute from image_name to image_name_hi, or whatnot. Not exceedingly accessable, but dumb enough JS that most browsers can handle it, and those that can’t are only missing the fun little extra bits.
    Copy & paste the code below to embed this comment.
  15. Alan wrote: ??Wouldn’t it be easier to preload the hi-res image into cache with JavaScript and then use a separate print style sheet to replace the low-res image with the hi?? How would this reduce the weight of the page? The larger image is still downloaded isn’t it?
    Copy & paste the code below to embed this comment.
  16. It’s a silly and possibly dangerous idea.
    Someone recently got a top job in the UK Health Service using a faked degree certificate on which he had used a university logo taken from their web site. The logo was clearly fake but if had been a hi-res job…
    (Source: The Weekly Telegraph, Issue 753, page 10)
    Anyway, I am of the opinion that Web and Print are related but significantly different media and constantly referring back to printing conventions restricts what the web can and should do… not to mention the bandwidth issue (because others already have).
    There are too many graphic designers and not enough information technologists in web design. Stick to glossy mags.
    Copy & paste the code below to embed this comment.
  17. Come on, Mike. If people want to be deceptive, they will do it. That’s why it’s called _deception_. There are plenty of places to find “high-res/vector logos”:http://www.brandsoftheworld.com/ for companies online. It’s not the role of designers or information technologists to police people on the internet.
    Copy & paste the code below to embed this comment.
  18. bq. It’s a silly and possibly dangerous idea. Someone recently got a top job in the UK Health Service using a faked degree certificate on which he had used a university logo taken from their web site. It would seem that the solution would be to call the university to verify the degree, not to be afraid of posting logos. As Jason points out, there are plenty available.  A good graphic artist could forge their own high res logo if they wished.
    Copy & paste the code below to embed this comment.
  19. Thanks for all of your comments. _Greg Pfeil_: Your content proposal looks like the best solution. Another option would be to allow a background image size to be specified in CSS. That way browsers that are smart enough will only download images specified in the print media CSS when someone hits ‘print’. Also it would be nice is background images specified in print media CSS were printed by default - as they have been deliberately included for print. _Niek Emmen_: Yup, this is a good idea. It’s how I would expect to allow users to see and print a hi-res photograph for instance. You could open a new window with only the image resized to work for print resolution. _Chris Hunt_: Sorry, it might have been good to demonstrate this more :) I was using the FARK method, and simply including the image inside the <h1> tag. Hide the image in the screen css, and show it in the print one. _Susan Ottwell, Stephen Down_: Unfortunately, we can’t use CSS to set the size of a background image to crunch it down. That is why we have to rely on regular IMG’s which we can resize to work as opposed to CSS background-images which we can’t. _David Ross, Alan Marchman_: Yup, I agree. I still use dialup at home and I certainly hope someone wouldn’t employ this approach to do that. I hope they would allow me to click on a link to a “hi-res printable version” or something if I wish. _Matthias Willerich_: I’m not sure if you could intercept a client side print request with javascript and download and swap the necessary files. _Ryan Cannon_: In IE5/IE6 even when an image is set to 0 it still occupies 1x1 pixels. Firefox is smart enough to know what to do. I vaguely recall testing on Netscape that at 0x0 it just ignored the size and went fullsize. But I will need to do some more investigation into this. _Bryan K_: Good for you :) I had no doubt that it had been done before. I didn’t see the need to wrap the IMG in another DIV as you suggest though. Was there a reason you didn’t just rely on the ID of the IMG? The borders perhaps? _Mike Stone_: Your reservations are interesting. Would that not also rule out SVG and PDF as well? I don’t actually regard the web as a medium as such. I think it is more a mode - a method of delivering different media - whether it be an online article such as this, an application such as Gmail, or even an animation like Homestar. I’m not suggesting or promoting burdening every page with hi-res versions of images, I’m merely discussing the techical approaches to delivering better printable documents when needed. I for one, have printed many pages off the web and think this approach has it’s uses. Cheers
    Copy & paste the code below to embed this comment.
  20. I’ve used this technique very successfully a couple months ago on a commercial website where part of the functionality involved printing a specific page that, among other things, contained the logo. I noticed how out of the current crop of mainstream browsers (IE/Win, Firefox/Mozilla, Opera 7/8, safari, IE/Mac) Safari was the only browser that resampled the shrunken image. I also think that setting the high-res image to a 1x1 pixel size is a bit kludgy. One is better off setting the image to display:none; in which case you have the added benefit that (some) browsers don’t download or render the image. If the browser downloads the none-displayed image, you win by not having a pixel on which your design may trip; if the browser ignores the image, you win by not creating pointless overhead. Anyway, the special printed page of aforementioned website looked very sharp and I highly recommend the technique, although browsers downloading images whether the image is used or not may make it less practical for all pages.
    Copy & paste the code below to embed this comment.
  21. I’m not sure wether the “hidden” images does or does not load when the display is set to none. If it does download it is an unaxceptable technique for me. We have been talking about saving 10kb by using css instead of tables for the layout. Hurray. And now we are going to put in 5mb 300dpi images? I guess I’m not. And offering all graphics is two resolutions will be a lot of extra work. I guess the user is used to the result of printed web pages. Maybe not all users will inderstand the difference but in my opinion it’s a different medium with different technical specifications. If you have high res pictures to offer (press or download center) it’s fair to use them. But people will know the difference. The presented technique might be usefull though to print a header or footer above every content page you print. To “brand” the output from your site. But then you would not need all this fuss. It can be done simpler. So the idea is nice, offering the user a high res print, but to me it seems a litle too far fetched at the moment.
    Copy & paste the code below to embed this comment.
  22. The article states _"The first circle looks a little nicer than the other two due to anti-aliasing. The other two images are anti-aliased, but because of the browser’s rather brutal pixel-culling when scaling, they look jagged_”. The 3 circles look exactly the same to me on Opera 8.02/XP. Lastly, when going to Print Preview in Opera 8, the sample images at the bottom do not show. I just see boxes with the ALT text in them. I can confirm that printing the page doesn’t show any images either. So the technique fails in Opera 8.
    Copy & paste the code below to embed this comment.
  23. Wait - I had “Print page background” turned off. But then it only shows the top image (the Book Whitman logo). _And_ it is low-res. The Manuscript example remains blank. The author’s photo prints fine!
    Copy & paste the code below to embed this comment.
  24. One approach I’ve used in the past for site logos has sprung from image replacement. Create both print and screen quality logos, using the print version in your markup. In the screen CSS size your logo as needed, but rather than displaying that to the user give the logo container dimensions and overflow:hidden. Then knock the logo out of the visible area. We now have an essentially blank area where the logo should be, but the logo itself remains in the semantic flow of the document. Now we can apply the screen logo as a background to our logo container. For the print CSS we simply allow the print logo to show again and switch off the background image to make sure it doesn’t display in those cases where backgrounds are switched on. This technique gets round the semantic problem of including both resolutions of image in the markup as well as background display on print. It also has the added advantage of allowing us to switch the screen logo in situations where greater contrast is required between itself and its background. For example if background colours change between site sections we can ensure our logo is still sufficiently visible. This is perhaps only really suitable for logos and other predictable site elements rather than content images and the like. I’m even happy with knocking the actual logo out of the visible area, but would be interested to know if anyone has any strong objections to that particular aspect.
    Copy & paste the code below to embed this comment.
  25. I have the problem that the downsizing width=“1” and height=“1” for the print-image is completely ignored by Firefox (1.0.6 on WinXP) if I turn off styles. Instead the print-image is shown in it’s full size. This happens as well if I look at this article (the “Book Whitman” logo) with styles turned off, as also if I do this with my website, where I tried this.
    Anyone with the same problem?
    Copy & paste the code below to embed this comment.
  26. bq. The 3 circles look exactly the same to me on Opera 8.02/XP. Opera resamples images. I wasn’t aware of this and thought Safari was the only one. To see the mentioned effect, try it in Firefox or IE.
    Copy & paste the code below to embed this comment.
  27. bq. Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file? I tried doing it this way but the hi-res image is still downloaded with the page. It also had the side effect of not actually printing either the low-res or hi-res images. I’m using Mac Firefox 1.0.4 Ideally what is needed is a solution where the hi-res replacement image is not downloaded until it has to be printed. So far, a separate print-friendly version of the page seems the best answer.
    Copy & paste the code below to embed this comment.
  28. Glad my little comment brought some responses. Yes, Jason, some people are into deception. So why make it easier for them?
    Anyway, other contributors have given many good technical reasons why this idea is silly. Mainly that it does not seem to be very cross-browser, IMO that is because implementation of print style sheets is fairly abysmal at the moment, and, of course, the bandwidth issue.
    Some have said that it’s OK with browsers that do not download images set to display:none.
    This behaviour is wrong. It is the browsers duty to replace all replaced content in the mark-up and then decide what to do with it according to style rules and image attributes. Otherwise you think that the page has downloaded when it hasn’t and for dial-up users, still the majority I think, and others who like to work off-line, that is very annoying. Until recently Safari was an offender but now it behaves correctly.
    Base Point: The purpose of the internet and the web is the dissemination and interchange of information and stuff that gets in the way, eg pretty pictures, should be kept to a minimum. (Unless the purpose of your site is to let people steal your wonderful graphics, of course ;)
    Copy & paste the code below to embed this comment.
  29. You do realize that “information” is not limited to just text, right? So called “pretty pictures” also fall into the category of information. You sound very bitter towards designers, have you been hurt before? Come on Mike, let the hate out and let the love in :D
    Copy & paste the code below to embed this comment.
  30. Just a couple of updates _Willem Jeffery_: Yup, I _do_ use display:none in the screen CSS, the 1x1 pixel is in the HTML to try and hide the image when CSS is turned off. _Chris Hester and Helmar Rudolph_: Thanks for your feedback on Opera 8. This shows that Opera 8 does actually nicely resample images on screen when scaling them down, so the 3 dots in Exhibit B look identical. Which means that in some cases you needn’t bother with the screen res version at all. I’ll look into my FARK based Book Whitman header and see how I can resolve that to render correctly in Opera. _Will Howat_: That is a great idea - it means only one logo in the markup, and removes any issue with background images and printing. I take it you “knock-out” the img by placing it in a padded DIV like the FARK method? _Keith Tait_: Just to re-iterate _you can’t use the high-res as a background image_ because you can’t scale a background image’s size CSS. Likewise browsers will download all files in the markup straight away, so this approach is not a good idea to replace all the images on a page unless they are very small. This approach is best used when wanting to replace selected images with hi-res versions. I’d say that with caching and re-using images, the download size might actually be smaller than having the user download new pages every time they want to print. _Mike Stone_: I can’t seem to find any contributions which give any “good technical reasons why this is idea is silly”. Many contributors issues have been due to misunderstandings in the approach. It works on _all browsers_, Opera 8 is not behaving with the IR example I’ve used, but this is likely an issue with my IR implementation, as opposed to the high-res image work (which afterall is just an IMG). This is precisely why sites like ALA exist. For new ideas to be floated and for other users to provide helpful feedback on their experiences to help with refinement. Print CSS _does_ have some way to go, and we can help develop it through the very ideas we are discussing here. I do recognize and agree with your issue about people using this approach in a sensible way - as noted in my earlier post it’s best suited to specific images, and hi-res photos on demand.
    Copy & paste the code below to embed this comment.
  31. 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.
  32. 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.
  33. 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.
  34. ...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.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 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 1x1 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.
  40. 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.
  41. 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.
  42. 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.
  43. 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.
  44. 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.
  45. 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.
  46. 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.
  47. 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.
  48. 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.
  49. <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.
  50. 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.
  51. 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.
  52. useful
    Copy & paste the code below to embed this comment.
  53. pls allow me download the image
    Copy & paste the code below to embed this comment.
  54. 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.
  55. 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.
  56. 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.