A Slight Change in Plans

1
A Slight Change in Plans

• Today
• Graphic formats (Kreuz)
• Psychology Internet resources (Whitten, DiPaolo)
• Database software FileMaker (Durrence)
• Digital photography (Klettke)

2
Coming Attractions

• Next week (July 28th)
• MEL (Weeks)
• Acrobat and PDF files (DiPaolo)
• Browser plug-ins (Durrence)
• In two weeks (August 4th)
• SuperLab vs. PsyScope (Yetman, Marineau)
• Dreamweaver (Stewart)
• Getting the most from search engines (Link)

3
Why Use Graphics?

• Logos and illustrations
• Replacements for bullets and horizontal rules
• Alternative to text links
• Backgrounds for text pages

4
Where to get Graphics

• On-line resources (clip art, backgrounds,
  royalty-free images)
• Pictures from digital cameras (Klettke)
• Scanned photographs (Klettke)
• Text-based graphics can be created in WordArt
  (Word and PowerPoint), and exported to a graphics
  format

5
Graphic Formats

• Web Browsers understand graphics files saved in
  two formats
• (1) GIFs (Graphic Interchange Format)
• Not pronounced like the peanut butter!
• (2) JPEGs (Joint Photographics Experts Group)
• Pronounced JAY-pegs
• Different capabilities and uses

6
(1) GIFs

• Originally developed by CompuServe
• The most popular and versatile format for color
  images on the Web
• Any image can be saved as a GIF
• Best for images with large amounts of flat color
• Completely platform independent

7
GIFs II

• Can contain a maximum of 8-bit color information
  (up to 256 colors)
• Use lossless compression
• No picture information is lost in compression
• Decompressed images are identical to original

8
GIFs III

• GIFs make use of LZW (Lempel-Zev-Welch)
  compression
• Extremely efficient at compressing rows of pixels
  of identical color
• So this is the best format for images with large
  areas of flat color (logos, line art, icons,
  cartoon illustrations, etc).

9
GIFs IV

• Also the format to use for partly trans-parent
  images
• A good choice for simple animation on a Web page
• Animated GIFs create illusory motion by showing
  a succession of images
• Easier than using plug-ins or Java

10
Working with GIFs

• Industry standard
• Photoshop (Adobe) PC, Mac
• Other choices
• Fireworks (Macromedia) PC, Mac
• ImageReady (Adobe) PC, Mac
• Much cheaper
• PaintShop Pro (JASC) PC

11
Sounds great! Any down side?

• With only 256 colors, GIFs arent good for
  photographic images (no gradients)
• File size can be relatively large
• So how do I show the world pictures of my dog
  Spotty??
• For that, we turn to

12
(2) JPEGs

• Like GIFs, JPEGs are platform independent
• JPEGs contain 24-bit RGB color information
  (millions of colors grayscale images)
• So JPEGs have high image quality, and are capable
  of rich and subtle color variations

13
JPEGs II

• JPEGs use lossy compression some information
  is permanently lost in the conversion process
• However, the lost information is typically not
  detectable
• Allows 101 to 201 data compression without
  visible loss in quality
• JPEG images are typically 2-3 times smaller than
  GIFs

14
Variable Compression

• Programs that create JPEGs allow you to control
  how compressed the file will be
• Inverse relationship between image quality and
  file size
• The goal create the smallest file that has
  acceptable image quality

15
Working with JPEGs

• Format supported by all the popular graphics
  tools
• Photoshop (Adobe)
• ImageReady (Adobe)
• Paintshop Pro (JASC)
• Fireworks (Macromedia)

16
Things to Keep in Mind

• Since the JPEG format is lossy, you degrade the
  image each time you resave it during editing
• So always start with the original image each time
  any changes are made
• Name the file with the suffix .jpg or .jpeg so
  browsers recognize it properly

17
On the Horizon

• PNG (Portable Network Format)
• Pronounced ping
• Developed in early 1995 as an alternative to
  GIFs, because
• Unisys threatened to enforce its patent on LZW
  compression, and collect licensing fees from
  program developers

18
PNG II

• Features
• Up to 48-bit RGB color support
• Lossless compression
• Better compression than GIFs
• Best format for highly detailed images where data
  loss is unacceptable (e.g., medical images)
• Not supported by all browser yet (but supported
  by the Big Tw0)