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, your website should look okay. But one area where it may still look lackluster is the images.
It’s 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 – likely at least 300dpi. Your images, however, won’t have enough information to print out at 300dpi or higher. Instead, because the browser and printer know how much space (vertically and horizontally) the image is supposed to take up, they’ll 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.
Back in 2005, an article by Ross Howard appeared on A List Apart describing a way around this problem. It solves a real problem with a viable solution, but the author doesn’t give a lot of practical information on how to implant the solution. So here’s my take on that technique.
