previous next
 

Resolution

Image Resolution
A Bitmap file is an image produced by many pixels. A pixel is a unit of measure in computer graphics. It can be thought of as a dot of color. Computer images are often measured by the number of dots used to create them. This measurement has given us the term dots-per-inch (dpi).

Computer monitors require only 72 dpi to display an image correctly. Most graphics programs (programs like Photoshop, Fireworks, PaintShop Pro) can control how many dots-per-inch are used in an image. Image files can be in 72 dpi, 100 dpi, 300 dpi, and so on. The larger the number of dots the higher the image resolution and the larger the file size. For use on the Internet (remember that, with rare exception, all images are displayed on 72 dpi computer screens) any image with more than 72 dpi is a waste of space.

Two JPG files of different resolutions.

Figure 2. 72 dpi
(5k)
Figure 1. 150 dpi (13k)  
Figure 1 was scanned at 150 dpi. then converted to 72 dpi to create Figure 2. Using a higher resolution file on the web will only create a larger image, not a better quality image, because images on the web can only be displayed at 72 dpi.

Screen Image vs. Print Image
A good way to begin understanding resolution is to print a web page. A graphic that appears fine on a computer screen will likely appear somewhat grainy or pixilated when printed. 72 dpi (the resolution at which web images are displayed on a computer) is simply not high enough resolution for the printed page. Printers require higher resolution images to produce "clean" images.

Screen Resolution and Image Dimensions
Screen resolution is the pixel dimension of a computer screen. Where web image resolution is almost always 72 dpi, screen resolutions can vary depending on user settings and the capability of the computer. 800x600 pixels is the most common screen resolution. Large monitors (and computers with higher-end graphics cards) may use 1024x768 and higher.

These screen shots illustrate how 4 users, each running a different screen resolution, may view a web page (this web page is 720 pixels wide).
1152x864 1024x768
800x600 640x480
Here you see where the 720 pixel wide web page is larger than the screen area.

Screen resolution is all about real estate. The higher the resolution the more real estate can be displayed on the monitor. People often use high resolution to display more windows or programs on their monitors.

Since the most commonly used screen resolution setting is 800x600, in general it is a good idea that any graphic you make for computer display not exceed the width of 800 pixels or the user will have to horizontally scroll to see all of the image.

 

  top of page | next