You probably already know how to use media-specific CSS to provide a suitable layout for the printed page.
But how great would it be to be able to go further and provide a better print alternative through the use of specific high-resolution images specifically for print? Awesome? Here’s how.
HTML image sizing#section2
HTML and CSS allow us to force images to display in a different size than their native dimensions. I recently began wondering whether higher resolution devices like printers might be able to use the pixels omitted by the relatively low resolutions intended for screen viewing.
So I began an experiment to compare the way resized images look on screen to their appearance in print.
I made the following images:
| 10×10 pixel anti-aliased GIF | 50×50 pixel anti-aliased GIF | 100×100 pixel anti-aliased GIF |
|---|---|---|
 |
 |
 |
Then I added these three images to an HTML page and used the img tag to force all three images display 10×10 pixels.
<img alt="" height="10" width="10" />This left three circles that, while the same size, all looked slightly different:
| 10×10 pixel GIF displayed at 10×10 pixels (file size 85 bytes) |
50×50 pixel GIF displayed at 10×10 pixels (file size 323 bytes) |
100×100 pixel GIF displayed at 10×10 pixels (file size 706 bytes) |
|---|---|---|
|
 |
 |
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 file sizes vary between the three images (85b to 706b). For simple GIFs like these, the real difference is negligible, but it is important to note that in larger JPEGs and PNGs the difference can be significant.
I printed the HTML page that contained the three images and discovered that the print results were actually the opposite of the screen results. The first circle appeared to be of the lowest quality, while the second and third circles looked better.
| 10×10 pixel GIF (file size 85 bytes) |
50×50 pixel GIF (file size 323 bytes) |
100×100 pixel GIF (file size 706 bytes) |
|---|---|---|
 |
 |
 |
This is happening because the image sizes are being forced down while their resolution (dpi) is being forced up. The first image is made up of 100 pixels (102), whereas the second crams in 2500 pixels (502), and the last a whopping 10,000 pixels (1002) into the same space. Printers can utilize these extra pixels to produce a higher quality image because print resolution typically ranges from 300dpi up to 1200dpi, while screen resolution is usually only 72dpi to 96dpi.
What this means#section3
While we can create images for use on screen, we can also create larger images and force their size down (and their dpi up) for use by printers. We can make hi-res logos and headings, 300dpi photos, and even images specifically needed for printed pages—and serve up these print-specific images using print-media CSS.
Putting it into practice#section4
We want to make a header for a website that includes a white logo on a dark background, but will print out as a solid black on white at a higher resolution.
We start by creating a lo-res/screen version of the logo (130×100px GIF at 3KB). We then make a special hi-res/print version of this logo by increasing the pixel count by five (650×500px GIF at 10KB).
We put both the screen version and print version on the page and set the size of the print version to be the same as the screen version. Then CSS allows us to hide the print version of the image when displaying the page on a screen and then use it to replace the screen version when the page is printed.
Hiding the print version without CSS#section5
We can also use HTML’s img element, together with its height and width attributes, to force resize any image—even a large, hi-res image—down to a 1×1px dot on a web page:
<img alt="" height="1" width="1" />We can then override these height and width settings in the print-media CSS:
img { height: 30px; width: 30px; } Even when CSS is turned off, the HTML height and width attributes we applied to the img element make that image easy to overlook. (After all, it’s only a one-pixel “dot” on the page.)
Note: Most browsers don’t resample an image if it is scaled—so that one pixel “dot” is actually a pixel selected directly from the original image. If you manage to locate this pixel and make it the same color as the page or background, then it is entirely invisible. For some headers, I might use the one-pixel dot as a “skip to content” link.
I have experimented with various image replacement (IR) techniques. The version I’m using here works as you would expect: include the image inside the HTML tag along with the text so that you can overpaint the usual background image that is the screen version. Depending on your needs and project requirements, you could integrate the technique with many other popular IR methods.
Caveat emptor#section6
Like many CSS techniques that extend web functionality, this approach can pose some problems. Depending on the demands of your project, you may find that including an extraneous image alongside the screen version is too much of a semantic compromise. You may also determine that it’s too much work for too little gain or take issue with the integration of screen and print content into a single document structure.
These are all valid points, and it’s up to you to decide if and when this technique will be useful for you. Some other technical aspects to consider:
- Resizing doesn’t work for CSS background images.
- “Hidden” images will show up with CSS turned off (unless you control the size in the
<img>tag). - Extra images will increase bandwidth usage.
On the plus side, I have yet to find a modern browser that this technique doesn’t work in. Any browser that understands CSS media types should be able to support this technique. Additionally, this technique is not doing anything like cloaking text or HTML elements with color or visibility in a way that is likely to look deceitful to search engines.
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.
Try it, you’ll like it#section7
Here’s a color logo that prints out as high-resolution black and white line-art (using image replacement in CSS):
Book Whitman—Antique Manuscripts#section8
And here’s a JPEG thumbnail that prints out as a high-resolution full color image (using two images):
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.
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:
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.
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.
“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).
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
Would it not be possible to just make the logo a background image, and specify a higher resolution image in the print css file?
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
(or would it need a 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![]()
construct for a very limited benefit.
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.
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?
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
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.
That was a very interesting article. I had no idea there was a difference when images are printed as opposed to viewed on screen.
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.
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.
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![]()
‘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.
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?
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.
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.
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.
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
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 1×1 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
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 1×1 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.
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.
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.
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!
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.
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?
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.
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.
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 😉
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 😀
Just a couple of updates
_Willem Jeffery_: Yup, I _do_ use display:none in the screen CSS, the 1×1 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.
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![]()
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
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.Question – can you rescale a background image with css? if so, it could be sensible to select an![]()
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?)
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.
…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/
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.
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.
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:
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.
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.
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.
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.
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.
You only get the better quality when you create the big, and print them small, as per example.
You can completely hide your the printable high resolution image too so why not use:
![]()
And in your print stylesheet add this:
img.printHiResImage {width:30px;heigth:30px}
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:
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}
Images of course have a src too:
To sum it all up:![]()
in Print Stylesheet
– preload the high resolution image with CSS, hide print image from view
– show
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:
should be:
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
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
useful
pls allow me download the image
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.
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…
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.