10 | Graphics

COM 366

Web Design & Production

• Native file format– Format native to software program– psd > PhotoShop default

• Preserves layers

– Use “Save for Web” to export as jpeg file

Graphic files

• Raster or bitmap graphics– Use pixels– PhotoShop

• Vector graphics– Use mathematical formulas– Combine lines, points, curves

• Fill with colors

GIF format

• Graphic interchange format

• GIF images use indexed color– Maximum of 256 colors

• Compressed– Reduce file size– “lossless” means image doesn’t lose any

quality by being compressed

• Biggest advantage is that one color can be transparent– Allow background color or pattern to show

thru

• Can be interlaced– Download in layers with each layer adding

more detail

Interlaced file displaying every 8th row; this is how the file first loads.

Interlaced file displaying all rows; this how the file appears after the entire graphic has loaded.

• Used for text or illustrations or cartoons

JPEG file

• Joint Photographic Experts Group

• Best used for photos

• Uses “lossy” compression scheme– Some detail is lost – Reduces file size

• Progressive JPEG– Similar to interlacing for GIF file– Downloads in waves or layers

• Big advantage of jpeg is that it can contain millions of colors

• Can choose from various compression levels– Low = more degradation– Higher the quality level, greater file size

• 0 > 12 usually

• Best used for photos

Anti-aliasing

• With text it creates a slight blurring at edges– So that edges of text look smooth

• Should set all text using anti-aliasing– Except small text (< 10 points)

anti-aliasedaliased

File sizes

• File sizes measured in bytes

• Bit smallest unit of measurement on computer– On / off, 1 or 0

• 8 bits equals 1 byte

• One byte equals about one letter “A”

• A 1,000 bytes = kilobyte (kB)

• A million bytes = megabyte (MB)

• A trillion bytes = gigabyte (GB)

• Lowercase b would mean bits– Mb

Image maps

• Graphic that has several links or hotspots on it

• Client-side image map– When user creates

Image maps• Adding hot shots in graphic

• Serve as links to other files

Hot spots

Alternative labels

• Used for graphics

• User can see type as page loads

• Helpful for visually impaired

Thumbnails

• Smaller version of image

• When click on thumbnail jump to another page with larger image– Significantly larger