![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/printfriendly-400.gif\" "\\"printfriendly-400\\"")
<\/p>\n<\/p>\n
In certain instances, not everyone views every portion of your website online: eventually, someone is going to print parts of it. In many cases, this is perfectly fine: if you have a print style sheet that takes care of your worst sins,<\/a> your website should look okay. But one area where it may still look lackluster is the images.<\/p>\n It\u2019s a simple problem of resolution. Images are always displayed on the web at 72dpi (dots per inch). However, nearly all printers can handle resolutions far higher than this. What that means is the text of your printed web page will be printed at a high resolution \u2013 likely at least 300dpi. Your images, however, won\u2019t have enough information to print out at 300dpi or higher. Instead, because the browser and printer know how much space<\/em> (vertically and horizontally) the image is supposed to take up, they\u2019ll up-sample the image, doubling and tripling the number of pixels in the image via crude pixel duplication algorithms until the image is the correct size. The result is a fuzzy image with jagged edges.<\/p>\n Back in 2005, an article by Ross Howard appeared on A List Apart<\/a> describing a way around this problem. It solves a real problem with a viable solution, but the author doesn\u2019t give a lot of practical information on how to implant the solution. So here\u2019s my take on that technique.<\/p>\n The trick is this: send a low-resolution version of your image to the screen, and a high-resolution version to the printer. It\u2019s a fairly simple trick, but it does have a few problems. For one, it requires a bit of extra XHTML to pull it off. For another, the end user has to download both<\/em> version of the image when they view the page, and the high-res image is bound to use up significantly more bandwidth. As such, I would recommend only using this technique for smaller images, and when a crisp, clean image is vitally important. A company logo would be an excellent example of this.<\/p>\n So here\u2019s how it\u2019s done. First off, we\u2019ll have to make our logo. I built an example up quick in Photoshop:<\/p>\n Before you actually start building the logo, it\u2019d be a good idea to know what size you want your large and small versions to be. I decided that I wanted my screen-size logo to be 150 pixels wide by 75 tall. However, I built my high-res version to be 600×300 pixels: four times the size (and thus, the final resolution) of the screen version. This will give me a final resolution four times the original, or 288dpi, which I\u2019ve decided is sufficient for my aims. Your wants and needs may necessitate a larger image.<\/p>\n Once I have my logo designed, I just save a large version, and then downsample a smaller version for the screen. I used the Save For Web feature of Photoshop to create a small version quickly, without having to mess with the original. I saved this version in color as well, but if you wanted, you could make the printer-friendly version grayscale so as to save on color ink. Again, it\u2019s your call.<\/p>\n Once we have the image, we can start in on the XHTML:<\/p>\n Simple, right? It bears explanation, though. The image inside our span is the printer-friendly, high resolution version of our image. However, the width and the height we\u2019ve set are based on the low-resolution<\/em> 72dpi version. This is so our span takes up the correct amount of space on the screen.<\/p>\n Now, we just have to hide the printer-friendly version and show the screen version:<\/p>\n The CSS above would go in your screen CSS file. It hides the image inside your span and displays a background image instead. The background image takes up the same number of pixels as the original, but it is scaled for 72dpi and displays perfectly on the screen.<\/p>\n Now, all you have to do is either ensure the rules above do not<\/strong> exist in your print CSS file, or negate them in your print CSS with something like this:<\/p>\n And you should be set! When shown on the screen, the printer-friendly logo will be hidden with the \u201cdisplay: none\u201d rule, and the background image will be shown instead. But when printed, the background image won\u2019t show, and the larger image will be displayed. Because we\u2019ve forced it to display at a size of 150px by 75px, our image has an effective resolution of 72 x 4 = 288dpi, which will result in a much cleaner printed logo. And if the user has CSS disabled for any reason, the worst that will happen is they\u2019ll see the compressed high-res version on the screen instead of its low-res counterpart. The result will be a slightly jagged logo on the screen as the browser down-samples the original, but that is probably a small crime in the grand scheme of things.<\/p>\n If you\u2019d like to see this in action, view the example page.<\/a> The first version has no fancy CSS image replacement going on. If you print the page, the logo should look fairly blurry. However, if you click through to the second version<\/a> and print that page, you should see a noticeable difference in the printed result, but no real difference on the screen.<\/p>\n![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/printfriendly1.gif\")
<\/p>\n![\"\"](\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2008\/07\/printfriendly2.gif\")
<\/p>\n<div id="logo">\n\t<img src="images\/logo-print.gif" width="150" height="75" \/>\n<\/div><\/pre>\n
#logo {\n\tbackground: #fff url(images\/logo-screen.gif) no-repeat;\n\twidth: 150px;\n\theight: 75px; }\n#logo img {\n\tdisplay: none; }<\/pre>\n#logo {\n\tbackground: none; }\n#logo img {\n\tdisplay: block; }<\/pre>\n