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