Web Authoring | Guide to FrontPage | Site Home

Related page: GIF and JPG formats

Using photos and images on the Web...

• How do computer screens display graphics?
• How do I save the image---what resolution and size?
• What about resizing the image in web authoring software?
• What file format should I use?  GIF or JPEG?
• What about other formats such as BMP, PSD, PSP?

How do computer screens display graphics?

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.

Example 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.

How do I save the image---what resolution and 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.

Another example...

What about resizing the image in web authoring software?

Here are points to consider:

• Avoid resizing in a web authoring program. When you drag size handles you probably won’t change the actual size of the picture, only how large the Web browser will display it. Use a graphic editing program to resize, and consult its help menu to learn how resizing alters image data.  
• Decreasing size
  If the original image is quite large, say 800K to 1 Megabyte, then you should reduce the size in a graphic editing program to limit the download time (the page weight) before publishing to the web. Pay attention to both the resolution (use 72-96) and the dimensions in pixels. Plan for the lowest common pixel resolution for monitors and remember that web browsers have menus that reduce the window display. Users prefer not to scroll to see a full image.
• Increasing size
  If you increase the size of an image created for the web, the result is often poor since the dots are spread out on the screen. Web graphic files at 72 dpi should be displayed with original dimensions or smaller, but any change in size may cause a poorer output.
  An example:   
  The original 29 by 34 file    The file displayed as 39 by 46

What file format should I use?  GIF or JPEG?

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.

What about other formats? BMP, PSD, PSP

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