bbb Home

IMAGE ISSUES

IMAGE TYPES

• GIF (Graphics Interchange Format)
  • Generally for simple graphics and line art
  • Supports 8-bit color - Maximum of 256 colors
  • Can have transparency to make irregular shaped images
• JPG (Joint Photographic Experts Group)
  • Best for photographs and images with continuous tones
  • Supports 24-bit color - Allow almost 17 million colors
  • When compressed, they lose quality
• PNG (Portable Network Graphics)
  • Created for web
  • Supports 8-bit and 24-bit color
  • Generally not used for photographs

Comparison of GIF and JPG

Cutting Image Size

COLOR FUNDAMENTALS

• Monitors display colors by mixing red, green, and blue
• Each color can be expressed in different level of intensity from 0 to 255. (256*256*256 is approx. 17 million colors)
• Some monitors can display all colors; others can only display 256 colors
• When all colors can not be displayed, browser must approximate colors other than the 256.
  • Color mixing = dithering
  • Dithering is most apparent in gradients and feathered edges
• Use Web Safe colors to avoid dithering for GIF's and PNG's

Color Fundamentals

Web Safe Colors

GRAPHICS PROGRAMS

• Many are available including
  • Adobe Photoshop or Illustrator
  • Macromedia Fireworks
• Online logo maker at CoolText.com

PRACTICE

1. Experiment with a graphics program.

1. Create a simple image.
2. Save the image in different formats - bmp, png, gif, jpg. Experiment with the settings to minimize file size and still look acceptable. If you are using Paint, your options are minimal.
3. Create a web page and add the four images to the web page.
4. List the size of each image file under each image on the page.
5. Which file type is the smallest? Which file type looks the best?

2. Save the picture to your machine and experiment with a graphics program such as Paint.

1. Save the photograph as a gif, bmp, and png file.  It is already a jpg file.
2. Create a web page and add the four images to it. 
3. List the size of each image file under each image on the page. 
4. Which file type is the smallest?  Which file type looks the best?

SELF-QUIZ