File Format

Every file on a computer has a specific file format. When saving and naming a file the computer automatically adds a three or four letter extension to the end of the file name to designate which program was used to create the file. This extension is often invisible but its presence still determines which application launches to open the file. For instance, when a word processing document is created in Microsoft Word, it is saved with a .doc extension. The computer knows that all files with this extension should be opened with Microsoft Word.

Web browsers like Internet Explorer will automatically open web pages because they have either a .htm or .html extension. This is because web pages are created in a type of computer code called HTML or Hypertext Markup Language. You can usually look at the address bar in a web browser to see this extension when you are viewing a web page like this one. Just like the web page itself, the images used in web pages also have file formats. Web browsers are able to read images that have .jpg or .gif extensions. Unlike a word processing document, these images cannot be simply copied and pasted into the web page. They must be linked to each web page. This can make the process of working with images seem more complex although many programs like Macromedia Dreamweaver and Fireworks make the process quite simple and allow the web designer a great deal of control over how web pages look and how quickly they download. Other programs like Microsoft Word, PowerPoint, and Publisher have wizards that allow documents to be saved as web pages. These wizards automatically create linked image files in separate folders. While they take a lot of guess work out of the process they may not always produce web pages that can be viewed well in all browsers and on different types of computers. Regardless of the program used to create web pages, it is still important to gain an understanding of the various image formats and when they should be used.

GIF - Graphic Interchange Format (pronounced "giff" or "jiff")

Images can be created and edited in most any graphics program like Photoshop Elements or Fireworks and saved in this format. GIF images allow for the use of 256 colors and can include transparent areas. They may also be used to create animations. GIF format use compression to make files smaller and quicker to download. Because of the way this compression works, GIF is not recommended for use with images containing gradient colors. Photographs will tend to look choppy if saved as GIFs. This format works best with images that contain flat colors like those shown in the sample above.

JPEG or JPG - Joint Photographic Experts Group (pronounced "jay peg" )

JPEG images are also easily created in most graphics programs. They are suitable for web use because they too are compressed for file size and quick downloading. The different type of compression used in this format adapts very well for use with photographs and images having subtle color changes produced by lighting effects and gradations of color. Unfortunately JPEG images are often larger than GIFs and they do not support transparency or animation. Because JPEG compression throws away information about an image each and every time it is edited and re-saved, this format can quickly result in image deteriorization. A format that loses resolution in this manner is said to be "lossy". A simple solution for preventing the loss in resolution is to save a copy of each JPEG file in a different format that supports gradients and does not utilize this type of compression. See the sample JPEG image below:

PNG - Portable Network Graphics (pronounced "ping").

This new format shows great promise on the web. Like GIF it provides compression without loss of resolution and supports advanced transparency, and animation. Like JPEG it works well with photographic images. It also supports the use of layers making it ideal for repeated editing. Unfortunately it has not yet been fully adopted and therefore cannot be used with all web browsers. Currently it is used primarily for saving copies of image files so that they can be edited without loss due to compression. In the future it is expected to become a standard on the web which may eventually replace both GIF and JPEG formats.

Image Dimensions and File Size

Images have length, width and resolution. Of course, length and width refers to the outer measurements of the image but resolution describes the number of pixels that are squeezed into each square inch. Resolution is also related to bit depth or color quality. Length, width and resolution determine the actual file size or memory requirements for the storage of the image on the computer. Larger dimensions and higher resolutions usually result in clearer printing but they result in large file sizes that are undesireable in images created for the web. To facilitate quick viewing and downloading, web page images should always be kept small. Since they will be viewed using screen resolutions they should never be saved at a resolution that is higher than 72 ppi (pixels per inch) and because most web pages are less than 700 X 500 pixels they should be sized appropriately to fit within the space provided on the page. Images that are larger can result in a web page that takes such a long time to download that visitors may be tempted to leave the site. To assist you with the development of images for your web page and site please note the tips listed below.

Image and Web Page Tips

• Save flat images as GIFs
• Save photographs as JPEGs
• Save extra copies of JPEGs as PNGs if possible for later editing
• Save all GIFs and JPEGs at 72 ppi resolution
• Scan photos to the approximate size and resolution needed for each web page
• Save scanned images in TIFF or PNG format for conversion to GIF or JPEG
• Crop and resize all digital photos to the correct dimensions and resolution
• A single web image should not be any larger than 30K
• An entire web page should be no more than 60K in file size
• Suggested web page size dimensions are 700 X 500 pixels

For more information:

• Web Graphic Basics
• The PNG Format
• Web Tricks