Difference between Bitmap.Height and VerticalResolution

Question

What is difference in between the b.Height and b.Width properties and the b.HorizontalResolution and b.VerticalResolution in C#?

Bitmap b = new Bitmap(@"foo.bmp");

For my sample, Height = 65, Width = 375, HorizontalResolution = VerticalResolution = 150.01239 . MSDN says height and width are in pixels, but the HorizontalResolution and the VerticalResolution are pixel per inch. So, does that mean that is the dpi at which this image was scanned from a scanner for example? Or is this something else?

The context of the question is the following: I would like to scan a signature and show in it on an asp.net page as an image in a form. The form is a standard government form with clearly defined space for the siganture. What considerations should I take into account when I scan the image so that it displays without any fuzziness when I see it in the browser and when I print the web-page.

What I don't understand is if all image formats store (a) the pixel size of the image (height/width) that the browser will display/resize in the image tag and (b) some other dpi equivalent that the printer will use to print? If not what determines the image size on a printed paper?

Answer 1

The dots-per-inch property is important when you want to make sure that an image is displayed on an output device with the same physical size as when it was created. The best example is an image you create with Microsoft Paint. While you work on it, you use your monitor. Which typically has a resolution of 96 pixels per inch. So a 960 x 960 image will display as (roughly) a 10 x 10 inch image on your monitor.

Now you print it. Printers are high resolution devices, 600 dots per inch is pretty normal. Which means that your 960 x 960 pixel image will be printed as a 960 / 600 = 1.6 x 1.6 inch image on paper. Your nice design turned into a postage stamp.

Clearly that's not desirable, the image needs to be rescaled to look similar on paper as it does on the monitor. The dots-per-inch property of the image lets you do this. The Image.Horizontal/VerticalResolution properties tell you 96, the printer's Graphics.DpiX/Y tell you 600, you know you have to rescale by 600/96 to get the same size image.

Do note that there's a side-effect. Every one pixel you drew in Microsoft Paint is turned into a 6 x 6 blob on paper due to the rescaling. The pixels on the paper are very small though so the image is likely to look the same. As long as the image has smooth transitions, like a photo. What does not work well is text, especially the anti-aliased kind. Which is otherwise why screen-shots look so much poorer compared to a report that was generated for a printer.