Digital Learning > Digital Image Basics
Understanding Digital Image Terminology and Technology
Digital Image Web and Monitor Display Basics
Images are often shared and displayed on a monitor as an email attachment, or as an image within a website or a photo gallery. Captured image pixels are produced on a monitor very differently than on printed paper.
Compared to printed images, monitors require considerably fewer pixels per inch of image information to display what we consider a quality and distinguishable image. This is the case since a monitor is capable of representing millions of colors directly from digital pixel information. On the other hand, a high quality paper print requires the overlapping and visual blending of a limited number of ink colors available to the printer to produce a good visual quality image. This printer color overlapping and blending process requires more pixels per inch of image information in order smooth the color transitions and develop a high quality printed image.
Monitors vary in resolution settings available, and monitor resolution settings can usually be adjusted to accommodate individual preferences. Regardless, most monitors are set to display between 74 and 96 pixels per inch of screen surface. This PPI resolution can produce a good quality representation on the monitor, but this PPI resolution in a printed image would typically be considered of poor quality.
Another major difference in how our pixels get used in web and monitor display is how the pixels get distributed. In the case of printing, you have the ability to increase or decrease the number of pixels that you want to place within an inch of printed output. In the case of monitor/web display, the pixels per inch are fixed based on the monitor settings, and the thing that changes with the number of pixels is the size of the image on the screen.
For example, if you are starting with a 2,400 pixel by 3,600 pixel scanned image (our 4" x 6" scan at 600 PPI scan resolution), you would need a monitor set at 94 pixels per inch to be roughly 25.5" x 38.3" in order to display the entire image.
Fortunately, many software programs will automatically reduce the pixel size of "large" images (typically by re-sizing / re-sampling the image) for the intended monitor display use it detects. Whether or not you are using software that automatically detects a necessary resizing, it is useful to understand how to better control the process and to make your own decisions.
For example, in website design, it is most likely that someone made a very conscious decision about the size and placement of each and every image you see in the website.
The photo to the left started out as a 3" x 5" original. The Photo was scanned at a 600 PPI scanner resolution. This resulted in a 5.4 megapixel image and an uncompressed Jpeg file of 16.2 megabytes. The pixel width of the scan was 3,000 pixels, and the height was 1,800 pixels, much too big for monitor display and insertion in the website.
In Photoshop Elements, the image was resized / re-sampled to a specified image pixel size of 300 x 180 pixels, by indicating a width of 300 pixels and by constraining proportions. The picture width of 300 pixels was selected to be 3/8 of the specified 800 pixel width of the display area of this website.
