Lesson 3- "Types of Images"

Lesson Objective: Students will learn about different types of images, and the size of these images.



Lesson vocabulary
GIF, JPEG, Resolution, DPI, Compression,
Back button Home Button

Image types

Current web browsers support two different image types, GIF and JPEG. There are certain advantages to using one type over the other, the differences or significant enough be aware of them, but not significant enough to ever go to great lengths to change from one format to the other. Here are the differences:

GIF (Graphic Interchange Format) -- A common format for image files, especially suitable for images containing large areas of the same color. GIF format files of simple images are often smaller than the same file would be if stored in JPEG format, but GIF format does not store photographic images as well as JPEG.

a GIF image
a "GIF"

JPEG or JPG ( Joint Photographic Experts Group) --File format for full-color and black-and-white graphic images. JPEG images allow for more colors than GIF images but are usually larger in size.

a JPEG image
a "JPEG" or "JPG"


By right clicking on an image, and scrolling down to properties, you can check both the file size, dimensions and type. Check the properties of each of the two files above and compare theses three things to see which graphic is bigger.

Return to top

Resolution and File Sizes

Many digital cameras have resolution settings such as "Large", "Medium", or "Small". Check your manual to determine the specific resolutions these terms represent. Depending on the type and quality of camera, the resolution settings can range from 72 dpi (dots per inch) to 300 dpi. If you are going to view an image on a computer monitor (ex: you are using the image in a web page), then 72 dpi is acceptable. If the image is going to be printed out, you probably want the 300 dpi resolution.

Below is a table which compares the file sizes of digital photographs taken at different resolutions and compressions.

Resolution
Compression
Superfine
Fine
Normal
L (2048 x 1536)
1722 KB
943KB
468 KB
M (1024 x 768)
591 KB
329 KB
174 KB
S (640 x 480)
273 KB
156 KB
88 KB

The two pictures below were taken at the same resolution but with different compressions. You cannot tell by looking at the photographs which is bigger, because the maximum resolution of the screen is 72 dpi. If you right-click on the pictures and go to the properties tab, you can tell which has the higher resolution by observing the file size.

A high resolution image
A low resolution image

You will probably notice that the picture on the left was shot under high resolution and the picture on the right was shot under medium resolution.

If you are planning to use these images in a website or a PowerPoint presentation, consider the following:

  • Keep your graphics as small as possible while still conveying the message that you want the graphic to convey
  • Make sure that your graphic is not more than 72 DPI.
  • If you are given the option, save photo quality images s JPEG's and line art as GIF's. If you aren't given the choice, save them as either.
  • Don't confuse image dimensions with file size.
  • The dimensions of an image are the physical measurements of that image (3 inches by five inches, or 300 pixels by 500 pixels).
  • The file size of an image is the amount of memory that the image takes up on your hard drive. (This also affects the speed in which the image is downloaded by your browser.)


Tip!!!

If you plan on using lot of graphics, it is good idea to become familiar with a graphic editing program. Such a program will help you to create, edit, and resize your graphics. Fireworks is an excellent program. Photoshop is another high end graphic editing program which you may have in your school. Paint Shop Pro would be an excellent third option.

 

Back button Home Button

 

Last Modified: Tuesday, July 8, 2003 1:40 PM