Due to web images being optimized for on-screen display (let’s say 96 DPI), images on printed pages are usually blurry, but they don’t have to be:
- Start with a high-resolution image. E.g. 2000 x 1000.
- Save a version with dimensions that fit well in your printed layout when placed in an IMG element. E.g. 300 x 150.
- In your print CSS, fix the size of the IMG element in pixels to match the dimensions in (2).
- Using the original image, recreate the image file in (2) with significantly larger dimensions (identical width/height ratio). E.g. 600 x 300.
The Good News: The printed page will have an identical layout as in (2), but with a higher quality image. This is because–according to my testing–even browsers that use blocky “nearest neighbor” image scaling for screen will scale nicely for print.
The Bad News:Due to browser bugs and inefficiencies (IE, FF and Opera at least), there’s no way to prevent the large image from downloading. E.g. even if you set the IMG to display:none in your screen CSS, IE and FF will still download it. Opera will not download it at all, even when it should print it. You can still position the image off screen, or if you have a “print” button on the page, you can trigger for the print IMG to be inserted with its onload kicking off window.print(). You just have to be aware of the limitations these methods.
To see the difference in quality, here are the two sizes of images, first at native size, second scaled to the size of the first.
