This tutorial takes a look at various types of graphic images that can be used in printed publications, presentations, and web pages. It examines sources for graphic images, major file types, image compression, and tips and techniques for working with graphic images. A list of many resource links for graphic image-related web sites is given.

Graphic Image Basics

When used effectively, graphic images can greatly enhance printed and electronic publications. Graphic images can be used to help organize information, attract attention, improve aesthetics, provide visual information, and make information more interesting to reader. A poor use of graphics can create an unprofessional image.

Sources for Graphic Images

Online Sources:

  • Public domain or royalty free graphics web sites - Many public domain or royalty free graphics web sites provide a large selection of graphics that are available for download for free use.
  • Subscription graphics online services - Subscription graphics online services charge a membership fee for unlimited graphics downloads and rights to use the downloaded graphics by members. Some of these services will sell individual graphic downloads with user rights for individual graphics to non-members.
  • Software Clip Art/Image Galleries - Many software programs include a built-in clip art/image gallery containing a collection of clip art, photographs, animations, sounds, video clips, and audio clips for their licensed users.
  • Graphics Software Programs - Many graphics software programs can be used for graphic image creation.
  • Charts and Graphs from Other Software Programs - Charts and graphs can be imported from other software programs, such as Excel or PowerPoint.
  • Digital Cameras - Photographs taken by digital cameras are stored in JPG format, so they can be used as graphic images.
  • Scanners - Photographs and images can be scanned and saved in many graphic file formats.
  • Clip Art CDs - Clip art collections are available for purchase on CDs.Prices generally correspond to quality. Graphics software programs can be used to customize clip art to meet particular needs.
  • Screen Captures - A copy of what is on a computer screen at any specific time is called a screen capture. Character Fonts - Character fonts are small illustrations stored as fonts.

Downloading Graphic Images from the Internet

Just about any graphic image can be downloaded from the Internet. Before you download a file, you need to determine whether it is legal for you to use the image. (See Copyright Issues.) Downloaded files can be saved and inserted into documents, web pages, and presentations.

To Download a Graphic Image from the Internet:

1. Locate the image you want to download.

2. Using your mouse, right-click on the image. A pop down menu will then appear.

3. Select Save Picture As... Locate the drive and folder where you want to save your image. You may change the file name, if you want. Be sure to note the name of the file and its location.

4. Use the image as you would any other type of graphic.

Types of Graphic Images

Major File Types

  • JPEG Files - JPEG or .jpg (Joint Photographic Experts Group) files are a format developed by a committee of the same name for images such as photographs and graphics that contain gradual color changes. This format provides the smoothest transition between colors. Images that have visual textures, such as background patterns, are typically saved in JPEG format. JPEG should not be used for cartoons (cartoons contain only a few colors) or black and white line drawings. JPEG images use a lossy compression scheme which means some of the detail is lost each time a file is saved in JPEG format. This means detail will be lost with each save. Most image-editors allow users to choose the amount of JPEG file compression. JPEG files can be used by both Windows and Macintosh computers.
  • GIF Files - GIF (Graphics Interchange Format) files are compressed digitized images that use a standard defined in 1987 by CompuServe for the online delivery of graphics. The GIF file format uses a color palette of up to 256 colors per image. It works best for graphics composed of relatively few colors, such as solid color graphics, logos, cartoon-like illustrations, and line art. Black and white images should be saved in GIF format. Avoid using the GIF format for photographs because it can result in a grainy or chunky appearance. GIF files can be saved in a transparent format, so that a background color or pattern will show through the transparent areas. To reduce file size, reduce the number of colors to as few as possible. GIF files cannot be used by professional printers for professional printing.
  • Animated GIF Files - Animated GIF files can be used the same way GIF image files are used. They basically add animated motion to a graphic file. Millions of animated GIF files are available on the web. Original animated GIF files can be created using many graphics software programs. The GIF animations consist of multiple static images that play continuously, creating an illusion of motion. Animated GIFs can be created by many shareware and commercial software programs. Interlaced GIF Files - Interlaced GIF files load quickly then gradually improve in quality as other content loads on a web page. They work well for large images and slower Internet connection speeds.
  • PNG Files - PNG (Portable Network Graphics) files are a format that was designed specifically for the web. PNG files were originally intended to be used as an alternative to GIF files, so their format is similar. Files in this format cannot be viewed with some older version browsers. Viewing of PNG files on newer browsers may require a special plug-in (an extra file that adds additional features to a browser).
  • TIFF Files - TIFF (Tagged Image File Format) are extremely flexible. Almost all image-editing and paint programs can save files in TIFF format and almost every other application can import them. TIFF images are not compressed and are generally too large to use on web pages. Web browsers do not support their use. Because TIFF images do not lose detail to compression, this is a good format to use for the storing of original images.
  • BMP Files - BMP (Windows Bitmap) format was originally developed for use in Windows. It is primarily for desktop wallpapers. BMP files do not resize well. Bitmapped images use dots (on paper) and pixels (on a monitor) to compose images. JPEG and GIF files are both bitmap formats, since both are made up of images formed by a grid of small dots, or pixels. JPEG, GIF, and PNG are the formats used for the web. All of these formats compress graphic data to reduce file size. Smaller is better for web images due to faster downloading times.

Graphic Image Tips and Techniques

General Tips

  • For a graphic with a transparent background, use the GIF format. JPEG format does not support transparency.
  • Many web users have 28.8K and 56K modems and because of this, graphic size is vital to web page design and usability. Professional web designers aim for a page size of 35KB or under for everything on a single web page, including images, HTML, scripts, and text.
  • Use animated GIF images to draw attention to important content. Too many animated GIF images on a web page can be distracting and sometimes aggravating.
  • To perform a screen capture of the image of your computer screen: For Windows, press PrtScn on your keyboard (for Macintosh, press Cmd+Shift+3), open a graphics program and select Edit, Paste. The screen capture of your computer screen should appear. Size the image as needed and save it in GIF format.
  • Character fonts can be used in many ways. They are commonly used for bullets and can be used as an alternative to graphic image files. If a large image of a character font is needed, increase the point size of the font.

Compressing Graphics

The size of a graphic image depends on its physical size (pixel width by pixel height) and its bit depth (the number of colors). The larger the physical size and the greater the bit depth, the longer it will take for the graphic to load on a web page. This is why file compression is vital for web graphics. Many professional web designers try to limit the total size of a web page to 35 KB.

To maximize file compression:

For JPEG files:

  • Use the smallest quality setting you can get away with for JPEG files. Many times, a high level of compression (which means faster web display) can be used at a lower quality setting without affecting the quality of the image. Image-editing software programs generally allow users to specify compression levels for JPEG files.
  • Every time you save an image in JPEG format, the file compresses to make the file size smaller. Each time the file loses some quality from the original image. After resaving a graphic as a JPEG file several times, you will notice a very obvious deterioration in image quality, similar to what you see when you copy a photocopy of a photocopy of a photocopy.
  • If you need to save multiple copies of a JPEG image, copy the original and save it under another name to prevent file deterioration from saving a file multiple time in JPEG format.

For GIF files:

  • The fewer colors used, the smaller the file will be.
  • A process called dithering can be used for GIF files. Dithering allows a computer to combine little dots of two different colors to create a new fake color. Dither only when necessary because dithering can increase file size.
  • Stick with standard, browser-safe colors when possible.
  • Charts and graphs from software programs, such as Excel, are usually saved in GIF format because they are line art and have a limited number of colors.

Clip Art and Animations

A-1 Graphics Archive
http://www.free-graphics.com

Clipart.com
http://www.clipart.com

Animated GIF Builders

Fireworks
http://www.adobe.com

GIF Animator
http://www.ulead.com

Graphics Editing Software Programs

Adobe Photoshop
http://www.adobe.com

Adobe Photoshop Elements
http://www.adobe.com

Williams, R. (1994). The non-designer's design book. Berkeley, CA: Peachpit Press.

Williams R. & Tollett, J. (2000). The non-designer's web book. Berkeley, CA: PeachPit Press.

 

Disclaimer | Copyright © 2002 Tuscaloosa City Schools and The College of Education, The University of Alabama
This site is best viewed with Internet Explorer.