Web Image Basics

Comp 140December 2

Vector Graphics

• Can be repositioned or resized– Will not diminish output quality

• Typically stored in AI, EPS, PICT or WMF formats– Only SVG is supported by browsers– Check out www.w3cschools.com/svg

Raster Graphics

• Used primarily by web designers• Built from pixels (picture elements)– Perfectly square– All same size– Display only one color at a time

Resolution

• Expression of image quality measured in the number of pixels that fit in one inch (ppi)

• Don’t have to be above 72 ppi• At least 300 ppi for printing• Size– The larger the image, the more pixels needed– Full size images for web pages not found too often

Color

• Monochrome– 1 bit color

• Black or white

– 4 bit color• Upto 16 colors• Dithering intersperses and juxtoposes available color to create an

illusion of more color

– 8 bit color uses upto 256 colors or 256 shades of gray• Websafe colors included

– 16 bit - 65,000 colors– 24 bit – 16.7 million colors– ?

Raster Images

• JPG, GIF, PNG• GIF (Graphical Interchange Format)

– 256 colors – 72 ppi

• JPEG ( Joint Photographic Experts Group)– Famous for its patented selectable image compression algorithm– May damage image quality

• PNG (portable network graphic)– Supports unlimited resolution, 32 bit color and full alpha and

index transparency– Alpha transparency less of a concern as newer browsers can

handle it