Web Authoring | Guide to FrontPage | Site Home
Related page: GIF and JPG formats
Computer screens of most users display graphics at 72-96 dpi (dots per inch--also described as ppi or pixels per inch.) This is much less than the resolution of many printers (from 300 to 1600 dpi or higher). In a computer graphics program you need to control settings based on how you will publish the graphic (the output). Graphics for the web are intended to be viewed on the screen, not printed.
Many photo editing programs give you options for compressing files that define your output: email, web display, or document for printing.
Consider a 3" x 4" graphic like the illustration at right. If it is scanned at 300 dpi (dots per inch), the computer treats it as simple a 900 x 1200 grid of dots. Thus, if this file is printed on a 300 dpi printer, it will come out the original 3" x 4" size graphic.
However, if we publish this same graphic on the web which displays at 72 dpi, the image will be much larger. The 900 dots across the width will be expanded because only 72 are used for each inch. The width will be 900/72 which is over a foot wide, and the height will be 1200/72 ---over 16 inches.
Note: the graphic displayed here was created for the web; in a photo editing program you can check its properties: 96 dpi, 280 x 288 pixels. In the IE browser, right click on an image to see dimensions and file size.
Determine the resolution (dpi) by your intended output: how will you publish or display the image? Remember that scanning at 300 dpi will multiply both the width and height by 4 if the image is used on the web. If you scan at 150 dpi (or close to that) you will double the width and height. So you may choose to create two files: one at a high resolution for printing, and one which is compressed at 72 dpi for display on the web.
In considering a size for display, keep in mind the dimensions and possible settings of monitors: a 15-inch screen may be set for 800 x 600 or 1024 x 768 pixels and a 17-inch might be set at 1152 x 864 or higher. (You can set the resolution in Windows by accessing Control Panel>Display tab>Screen resolution.) Web authors should plan for users having only a 72 dpi resolution. Also pay attention to how the file size affects download time for the user. Generally keep graphics to 250K or less, depending on how many images are displayed on a single page, and use the web editing software to check each page's download time. For file format, see below.
This photo is about 4 by 6 inches; it was originally scanned at 300 dpi, then converted and compressed as JPG at 72 dpi for display here. What size would it appear in the browser if compressed at 150 dpi?
See the answer.
File compression also limits download time: the original of the photo at left was a 5MB Photoshop file and was reduced to the 47K JPG file shown.
Here are points to consider:
Most graphics used on the web are in one of two formats GIF (Compuserve Graphics Interchange format) or JPEG (Joint Photographic Experts Group).
For digital photos, JPEG is the best choice. For solid color, line art, or logos GIF is acceptable.
GIF is used for special effects like animations. An animated GIF file--as the one shown--contains a sequence of frames with timing information. JPEG cannot be used for this.
For an explanation of the differences in these formats, see GIF and JPG.
These are all proprietary formats for graphics, meaning you need the
program that created the file to edit it. BMP is a Microsoft invention and not a
useful one. PSD and PSP are also proprietary formats. PSD is the extension
for Photoshop, and PSP is for Paint Shop Pro. These formats are best when you
edit images in the software because only these proprietary formats offer all
the editing power, such as use of layers. However, it's best to save your photo
files--as digital cameras do--as standard JPG so that you can view them in a few years when your
software has changed.
Top of page | Web Authoring | Student Writer's Web