I have a corporate site where schedulers upload employee doctor's notes that where scanned in PDF format to their email. The PDF is converted to PNG's using PHP Imagick. I currently have the images at 300 DPI (Imagick). When they are printed from the browser they are way to big for a single sheet of paper. The images where originally scanned in at 8.5x11.
I would like to keep the quality of the images as best as possible. How can I keep the quality without having the image print on more than a single 8.5x11? I know I can reduce the DPI, but is this my only option? Is there a way with HTML5, CSS3, and/or Imagick to force the size of the image to be in Inches instead of Pixels?
Thanks
The width and height attributes of the img element should be set to the size of the image in 96ths of an inch (multiply by 0.32), yet you should continue to serve the 300 dpi image. The browser will scale down the image for presentation on-screen if necessary.
For printing, I'm not sure whether IE 9 will use the extra resolution if it's available, yet it's worth a try. At least users of the newest Apple Macs and iPads can benefit.
For example, your letter-sized page might be 2550x3300 pixels in 300 dpi, yet on a 96 dpi screen, it would only be 816x1056 pixels. So use the latter set of dimensions in the img element:
<img src="page1-300dpi.png" width="816" height="1056" alt="">
You might also be interested in how to change IE's paper margin setting, how to get the CSS pixel / device pixel ratio, and how IE supports high DPI settings.