Web Graphics For Beginners: Part 2

Home > Build > Graphics > Web Graphics for Beginners

Screen vs. Print

As alluded to before, a graphic that appears fine on a computer screen does not necessarily mean that the same graphic will appear fine on the printed page. Computer monitors only require 72 dots per inch to display correctly, which is simply not enough on the printed page. A printed graphic should have at least 200 dots per inch, preferrably more, and most high end printing is done at 600 dots per inch or higher. Also, the more dots per inch, the larger the graphics file size would be. If the graphic above were created at 600 dots per inch, you might still be downloading it.

With most graphics programs, such as Adobe's Photoshop, one can control how many dots per inch are used in the graphic. For the computer screen (or the web), anything more than 72 dots per inch is a waste of space. That just means a longer download for the same quality.

Pixels

You've probably heard this term before. A pixel is simply a standardized unit of measure, like an inch or a meter. A pixel is essentially a dot, hence the term dots per inch (dpi). The number of dots is actually the number of pixels. The higher the dpi, the more pixels that are used, and vise versa. The more pixels, the larger the file.

Pixels are also used in determining screen resolutions. If you've been working on the web or with computers for awhile, you are probably already familar with screen resolutions. The default for most operating systems is 640 pixels wide by 480 pixels tall (640 x 480). The most common resolution is 800 x 600. Larger monitors may use 1024 x 768 or higher.

Don't be confused by the term resolution. In the web world, there are two defnitions. One is the resolution of a graphic. This is measured in dots per inch or dpi. The higher the dpi, the higher (clearer) the resolution. This term is also mentioned in relation to screen size, or screen resolution. A user's screen resolution is simply the pixel dimensions their screen is set to. The former should just about always be 72 dpi for web use. The former varies on the user. An experienced web designer should understand how to make their pages viewable at all possible screen resolutions.

HTML elements are also measured in pixels. Tables can be specified to be 800 pixels wide, so that users at the 800 x 600 resolution will have a full screen view. Images can also be sized in HTML using pixels, but for several reasons is considered poor practice.

For more information on how HTML and Graphics work together, see the Beginner's HTML Tutorial.

Web Graphics For Beginners

Part 3: Scaling and Sizing Graphics