Image Resolution for the
Video Monitor Screen
For images viewed on computer screens, scan resolution merely determines image size. The bottom line is that dpi or ppi means pixels per inch, which means that if you scan 6 inches at 100 dpi (or 1 inch at 600 dpi), you will create 600 pixels, which will display on any screen as 600 pixels in size.
We think of greater resolution as showing more detail, and while that’s generally true (within reasonable limits), it’s because it makes the image larger. But we are always greatly limited by our output device, and often cannot take advantage of maximum resolution. The images are huge, and our screens are simply not large enough.
If you don’t know your screen size, then the Windows – Start – Settings – Control Panel – Display icon – Settings tab will show or change it. Or on the Macintosh, at the Apple Monitor Control Panel. Screen size settings for LCD monitors should match the actual hardware native size.
Popular CRT video screen size settings historically have been:
640×480 or 800×600 pixels for 14 inch monitors
800×600 or 1024×768 pixels fosr 15 inch monitors
1024×768 or 1152×864 pixels for 17 inch monitors
1152×864 or 1280×1024 pixels for 19 inch monitors
Newer LCD monitors are wide screen, and commonly up to 1920×1080 pixels now. Larger pixel heights typically make the text appear smaller, but we can specify larger text size in Windows (which does not affect image sizes).
Necessary updates: (techie stuff, about images we see on video monitors now)Times have changed after much of this was written. But explanations are not so simple now.
- Today’s browsers also zoom the images when we zoom the text size, to keep the page layout consistent, relative to text size. So today, a 500×200 pixel image is not always shown at 500×200 size, depending on your zoomed text size.
- Smart phones are a new factor. Fitting the full web page width to the small screen makes the text too small to be readable. So a new logical CSS Pixel Ratio factor was added, basically a multiplier generally from 1 to 3, a difference in logical pixels and actual device pixels – which causes the phones to begin zoomed in some, to enlarge the text.
- The web page can specify a viewport size to specify other starting zoom instructions for the small phones.
- Now some sites (this site is trying too) try to present “responsive image sizes” to tiny screens, smaller so they will better fit on the screen. That too may change the size of the image that you might see.
- There are also differences in browsers too. Speaking of a Reset 100% Zoom view, then…Firefox (desktop) specifies a Pixel Ratio equal to the Windows text size enlargement (120% Windows text size is 1.2 Pixel Ratio in Firefox). So in the browser, the initial showing enlarges the whole page, both text and images (Windows only enlarges the text). Plus browser zoom is added to it.Chrome and MS IE (desktop) initially report a Pixel Ratio enlargement factor of 1, regardless of Windows text size (but it also adds browser zoom size). Chrome is different than the others, it always reports screen size to be hardware size, instead of cropped zoomed size of full screen.On this page (a directive sets viewport to device settings), then iPhone always reports screen size to be viewport size, which is fixed, independent of actual window size. iPhone 4 and 5 and iPad 4 and Air report a Pixel Ratio (enlargement factor) of 2, initially enlarging the whole page screen to show page and text larger. However, web page “meta viewport” size can tell the mobile browser other starting instructions.
But of course, manually zooming any browser affects the whole page. Browsers do zoom the whole page, including the images, when we zoom the page away from 100% zoom size, but (except for Firefox) NOT when we only set a larger text size in Windows, which only applies to text.
So on video monitors, we don’t all see the same size of things. Screens are different sizes, in inches, in pixels (resolution), and any browser zooming does affect the whole page, including image size.
(FWIW, if interested in the BigNoseBird Survey cgi script, here are replacements for five functions to instead output error free HTML5 and CSS.)
But note there ARE situations today when the 500 pixel wide image is NOT shown at 500 pixel width.
- If you have zoomed your browser to show text larger, the image will be zoomed larger too, correspondingly.
- If your phone screen is small, so that the 500 pixel width cannot actually fit, hopefully this site reduces the image size so that it does fit. It will be shown smaller than 500 pixels in that case.
Our monitor screens show pixels directly. Images are dimensioned in pixels, and screens are dimensioned in pixels, and video systems show pixels directly, one for one. Bottom line, if we have a 500×200 pixel image, scaled to 100 dpi to print 5×2 inches on paper, on the screen it will still simply show as 500×200 pixels. Zoom certainly is a complication (showing different New resampled pixels then, but still one for one), but 100% Actual size is very obvious. The point is, it’s very important, because it’s how it works, and it’s good to know that.
You do need to realize that each of us will see this 500 pixel image width at a different apparent size on our different monitor screens. We don’t necessarily see the same thing. On a desktop video screen, we may see the 500 pixel image anywhere between 4 and 8 inches wide, depending on our screen size and settings.
- a 19 inch 1280×1024 pixel LCD screen shows it as 5.8 inches wide.
- a 20 inch 1680×1050 pixel LCD screen shows it as 5 inches wide.
- a 23 inch 1920×1080 pixel LCD screen (110% text size) shows it as 5.75 inches wide.
- a 19 inch 1280×960 pixel CRT screen shows this image as 5.6 inches wide.
- a 17 inch 1024×768 pixel CRT monitor shows it 6.0 inches wide.
- an iPhone 5S shows it 3 inches wide (if held in horizontal orientation).
But different browsers can show it differently too.
Most desktop monitors will be in this general ballpark (almost 6 inches), but a 15 inch monitor set to 640×480 pixels may see it at 8 inches wide, or more. A laptop with 1600×1200 pixel display may see it at 4 inches wide, or less. So that’s a very wide size range for the same image on different screens, and it shows that there is no concept of exact size in inches on the screen. We don’t all see the same size on the screen. Screens show pixels directly as a dot of color, and their size depends on monitor size and resolution. If the screen is set to show 1680×1050 pixels, then it WILL show 1680×1050 pixels.
So it will be quite necessary to forget about inches on the screen, because video only shows pixels, and screens differ in size. The only one correct answer possible about video image size is that every screen will always see 500 pixels as exactly 500 pixels (assuming we view images at 100% Actual size, otherwise it is about other different pixels). Images are dimensioned in pixels, and screens are dimensioned in pixels, and these 500 pixels will fill 500 pixels on any screen, but those same 500 pixels will fill a different area in inches on different size screens.
Inches simply have no meaning on the computer screen, we all see something different. Inches are not defined in the video system. There is no concept of dpi in the video system either. The way video works is that when you set your video settings to say 1024×768 pixels, then that 1024×768 pixels of memory on your video board defines your video system. The programs you use will copy your pixels directly into that 1024×768 pixel video memory. One image pixel goes into one video board pixel memory location, one for one. A 500×200 pixel image fills 500×200 of those 1024×768 pixels. Those 1024×768 pixels are output to your screen, regardless of the size of the glass tube attached. Video is only about those 1024×768 pixels (or whatever the current setting is).
Unfortunately, we frequently hear how 72 dpi or 96 dpi images are somehow important for the video screen, but that’s totally wrong. Video simply doesn’t work that way. Video systems have no concept of inches or dpi. No matter what dpi value may be stored in your image file (like 300 dpi for printing), your video system totally ignores it, and always just shows the pixels directly. The truth of this should be clearly apparent if you simply watch what it does.
Watch what it does, but be aware of the special cases that can confuse what we think we see.About what we see:
Your photo editor program normally automatically resamples a too-large image to be smaller so it will fit into the program’s window size. Then we only see the smaller copy on the screen, new different pixels, not the original pixels. It also provides a View or Zoom menu, we can create the copy any size we wish, without affecting the original data. The window title bar will show the size reduction ratio, as warning that this screen copy is not the real image data. For example, the title bar might indicate we are viewing a copy at 33% size, or it might say 1:3 ratio of real size (1:3 is also 33% size). We only see the actual original pixels when it says 100% or 1:1 size.
A second situation is Page Layout programs (like MS Word, Publisher, Acrobat, InDesign, PageMaker, Quark). These handle images differently than a photo editor. The very least a photo editor can create is a one-pixel image, its purpose is to create images. But these page layout programs have the one purpose to design and print paper documents. The very least that a page layout program can create is a blank page, which at minimum specifies a paper page dimension in inches. This is very different, it is totally about that page of paper (but people get confused about this). We add text and images to that document to fill inches of printed paper. Page layout programs necessarily do show our document on the video screen, but what we see is an image replica of that page of paper. It may have other embedded images filling areas on that paper page, which are resampled very small to fit their allotted space in the image of the full page we see on the screen. Again, we have a Zoom menu to show that image of the page any size we wish.
In both of these cases, we only see the smaller image copy on the screen (different new pixels), but we print the larger image data using the original pixels. Both cases provide a View or Zoom menu, we can show the images at any size we wish on the screen without affecting the original data. The point is that these are not exceptions, because the video system shows these new resampled pixels in the only way it can, directly, one for one. However, the new image size in pixels is not normally specified to us. Every dimension number we see still pertains to the original size data, (or the size on printed paper), but that is not necessarily about the image pixels we see on the screen (unless we view 100% Actual size).
It also means that when you want to evaluate your image critically, be sure to view the image at 100% Actual size (even if you must scroll around on it), so you are seeing the genuine image pixels that will print, and not a rough resampled temporary copy.
The screen is typically larger than our photographs, so enlargement is often used to show a snapshot photo. We often scan at higher resolutions to fill more of the screen. When we increase scan resolution, we get more pixels, so it increases the image size. But a little goes a long way, and there’s no advantage in wrestling with overly huge images just to discard most of the pixels when we display them. So don’t scan at 300 dpi or 600 dpi when there’s no purpose for it.
