Online Graphics

Introduction

File Formats

Inserting Images

Inserting Audio

Editing Images

Activities

Suggested Sites

Teaching Guide

 

Graphics

File Formats

File formats  define how the information and content of an image or document is stored and manipulated in memory as well as how it may be printed, transmitted, or viewed. 

The two most common file formats to be concerned with for Web page development are GIF and JPEG.  File formats can be very complicated, but the basic web formats and their uses and differences are as follows. 

1. JPEG - Joint Photographic Experts Group

Used for photographic (continuous tone) images. The difference from GIF files is that unlike, GIF, JPEG can use the full spectrum of colors that are available on your monitor. JPEG can take advantage of 16 million colors whereas GIF is limited to 256 colors. 
JPEG  also uses compression for smaller files and faster downloads but data is permanently lost once a file is saved. 

  • Use for continuous tone images like photos.


2. GIF-Graphics Interchange Format

These images use a fixed color palette (limited to 256 colors). The GIF format uses compression for smaller files and faster downloads. This format is best for images with solid color or areas of uniform color such as illustrations and logos. Some advantages of using a GIF file format over JPEG are as follows:

  • Transparency:  GIF allows the colors of your images to blend in with the background. 
  • Interlace: Different parts of the image will appear as the site is downloaded. 
  • Animation:  GIF formats allow  for animation. There are several sites where animated GIFS can be found, such as GIF Animation Expo.
  • Used for art drawings, logos, and screen captures.

3. PNG - Portable Network Graphics 

The Portable Network Graphics (PNG) format was designed to replace GIF format.

Advantages:

  • Variable transparency.
  • Gamma correction (cross-platform control of image brightness).
  • Two-dimensional interlacing (a method of progressive display). 
  • PNG  can compress 5 to 25% better than GIF.
  • Saving, restoring and re-saving an image will not degrade its quality, unlike standard JPEG.
Disadvantages:
  • PNG does not support animations.
  • For transmission of finished truecolor images, such as photographic images, JPEG is almost always a better choice.
  • JPEG images are smaller than PNG.
More information about PNG can be found at the Portable Network Graphics Home Site
 

For more information and examples of image formats, Chicago Public Schools has information and tutorials. 

The following are some examples of GIF and JPEG file formats. Again JPEG is used for images such as photos and GIF is used for images such as art drawings.


GIF IMAGE


JPEG IMAGE

For more examples and illustrations of JPEG and GIF formats see About.com graphics
For a more in-depth explanation of the difference between JPEG and GIF formats see 
Webmonkey GIF vs. JPEG

Additional Resources

For a simple explanation of various file formats the following sites are suggested. 

Beyond Filamentality Graphics Background Info

For tutorials, lessons, and general information on JPEG and GIF File Formats, see Graphics a la "the Web"

 

The contents of the Web Institute Web Site, including the On-Line Curriculum, Web Tank, and Session Notes, are Copyright 1999-2000, Graham School of General Studies, University of Chicago. No one may print, copy, or otherwise reproduce these materials without the express written permission of the Director of Education Programs at the Graham School. All rights reserved.

The chapters from Curriculum Webs: A Practical Guide to Weaving the Web into Teaching and Learning are Copyright 1999-2000, Craig A. Cunningham and Marty Billingsley. No one may print, copy, or otherwise reproduce these materials without the express written permission of the authors. All rights reserved.