---------------------------------------------------------------------Graphically Speaking 1:

Understanding Different Graphic File Types




Return to CMSMediaSpot: Graphic Resources

Two Ways to Grab Web Graphic Images from a Webpage

  1. Click, Hold, and Drag Image to Computer Desktop
  2. Create a PNG (Explained below): Apple+Shift+4 (Saves to Desktop)
  3. Note: When you cannot do any of the above....this is a strong indication that the creator of the website may have chosen NOT to allow the use of their graphics.

Web Graphic Image Basics

  • If using GIF or PNG, your final artwork should have no higher resolution that 72 dots (pixels) per inch
  • Try to keep individual graphics under 10K
  • Try to keep total page size under 30K.
  • When you publish on the web your page will look differently on different browsers. Be sure to view your page on different browsers before completing your work on the page.

Two Significant Categories of Graphic Image Files





  • Works with graphs using bitmaps or pixmaps (Density of dots = Resolution)
  • When enlarged images begin to show pixels. (See example.)



  • "Works with Geometric Description" or mathematical formulas
  • When enlarged retains smooth edging and clear shape. (See example.)


File Names

  • File names often indicate the program they are created to work based on the letters after the dot. (ex. .doc is a Word document)
  • Graphic file names indicate the type of file based on the letters after the dot. (ex. .gif is a GIF file)
  • Sometimes the number of letters after the dot may also indicate the computer system they were designed for. (ex. .XXX may indicate a PC computer file while a .XXXX may indicate an Apple computer file)
  • On both a PC and Apple file the label appears at the bottom of the icon. You can rename a file by clicking once on the label, wait a second for the words to highlight, then type the new name.
  • Your librarian recommends renaming files based on content or image or page to be placed on.

Determining File Size and Types

  • To determine a file size or type on an Apple Computer: highlight a file icon with one click, then Command+I (I for Information)
  • To determine a file size or type on a PC Computer: right click on a file icon and select "Properties"

Changing File Formats

  • On an Apple Computer:
  • When viewing a graphic in Preview you can "Save as" an alternative file type by choosing a file type in the pull down menu.
  • Double clicking a graphic file on an Apple Computer will in most cases launch Preview

Basic Graphic File Types

File Formats



Bit Map

  • Usually indicated a PC computer file (Microsoft)


Graphics Interchange Format

  • Supports 256 colors only
  • Very limited in use
  • Good for the web



Joint Photographics Expert Group

  • Format for most photographs
  • Small file size
  • Not best quality
  • Compressed
  • Good for printing on an inkjet printer


Portable Network Graphic

  • Supports 16 million different colors
  • Better quality
  • Does not support animation


Quick Time

  • Usually indicates an Apple computer graphic file



Tagged Image File Format

  • Format produced by most scanners
  • Compatible with both PC and Apple Computers
  • Better quality
  • CANNOT be viewed in an Internet Browser (ex. FireFox, Sarfari..)


  • Usually refers to high-end digital camera photographs
  • VERY large detailed files
  • Tooooooo big for most school projects.



  • Create Working Folder

  • Create a folder on the computer desktop (Click on Desktop then File>New Folder)
  • Rename the folder with your Hempfield Username (ex. 15 SmithB)


Independent Work Instructions:

  • Work with GraphSpeak1

  • Drag the GraphSpeak1 Image from the webpage to the desktop of the computer
  • View (Apple+I) information on GraphSpeak1 file
  • Complete the chart for this file.
  • Work with GraphSpeak2

  • Drag the GraphSpeak2 Image from the webpage to the desktop of the computer
  • Open up GraphSpeak2 Image in Preview (double click on file)
  • Skip: Change the resolution (Tools>Adjust size..) of this Image: Resolution of 500 pixels AND 1 inch wide (Height = 0.75)
  • Save this file (File>Save as) as a TIFF file (renamed GraphSpeak2Adjust) (Compression = None) to the Desktop
  • View information (Command+I) for this GraphSpeak2Adjust file
  • Complete the chart for GraphSpeak2Adjust on your worksheet
  • Work with GraphSpeak3

  • Drag GraphSpeak3 Image to the desktop of the computer
  • Open up GraphSpeak3 Image in Preview (double click)
  • Create a PNG file of just the cat in this image. (Command+Shift+4) (This will save as Picture1 on your computer desktop.)
  • View (Command+I) information for Picture1 file
  • Complete the chart for Picture1 on your worksheet
  • Clean Up

  • Drag all files you created to the trash or your folder
  • Do not empty trash!
  • Finish Work

  • Finish the rest of your worksheet
  • Time Permitting

  • Locate the "Legal to Use" graphic for your wiki page.

This webpage was created on: 22 March 2010
This webpage was last updated on: 30 March 2010
This webpage was created by: CMS Librarian
Contributions to are licensed under a Creative Commons Attribution Share-Alike 3.0 License. Creative Commons Attribution Share-Alike 3.0 License