Web Graphics

Web graphics

• Bandwidth is king

• Graphics must load quickly

• Graphics must be optimized

• All other components except for text, gif and jpg are plugin devices

Factors for web graphics…

• Monitor settings…

• Screen resolution of web page

• Screen resolution of end users monitor

• Bandwidth of graphics

• Bandwidth of end users connection…

• Number of colors

• 72 dpi…

Bandwidth for Weba pipeline…

• Low bandwidth…

• 16. kbps

• 28.8 kbps

• 56. kbps..

• High bandwidth…• Dsl• Cable….• Isdn

c c c c16 28.8 56

DSLCable ISDN

For instance…

• a file size of about 50 k

• On a 56.k modem

• Would take 9 seconds to download….

Monitor Settings and Resolution

• 640 x 480

• 800X600

• 1024X 768

If your design settings are smaller than the users screen, page will appear in small area of screen….

If your design settings are larger than the users screen, only a portion of the page will appear, user will have to scroll to see the whole page….

For 800X600Actually use 740X550

Color

• The more colors, the more robust the image…

• Also the longer it will display….

• The fewer colors, the faster the image will take to display, but fewer colors make an image unattractive….

Color Depth

• 32 bit…16.7 million colors + alpha channel

• 24 bit…16.7 million colors

• 16 bit… 65 thousand colors

• 8 bit… 256 colors (index palette.)

Color Depth…cont.• 8 bit…256 colors• 7 bit… 128 colors • 6 bit… 64 colors • 5 bit…32 colors• 4 bit…16 colors• 8 bit… 3 colors• 4 bit… 2 colors• 2 bit…1 color

Image /Quality Balance

• Image file size …• Must be balanced

with…• Image quality• One must find the

acceptable level of depreciation

• Compromise between two…

Image quality File size…

Balance

Hi

Low

Gif, Jpg and sometimes Png

• Basically three file formats for web display

• Gif

• Jpg

• Png special considerations (use for Flash…)

Image Compression2 types

• Lossy… compress image data by removing detail… once image has been compressed and then decompressed it is not identical to the original.

• A higher level of compression results in lower image quality.

• A lower level of compression results in better image quality

Image Compression2 types

• Lossless…compress image data without removing detail…

• Image is edited using a color table…

Gif• Graphical interchange format (created by

CompuServe….• 8 bit file format (maximum of 256 colors…)• Use for images with flat colors, web components,

banners, buttons etc…• Can be animated…• Can hold a transparency…• File compression, uses lossless…discards color

info• Specific palette

Gif• Uses a compression scheme that allows the

user to edit the number of colors in the color table or index of the image….

Jpeg• Joint photographic experts group

• 24 bit file format

• Use for continuous tone images I.E. Photos, gradients or photo realistic images with subtle gradations of color

• File compression, uses lossy…(retains color info…)

Jpeg• Uses a compression scheme that effectively

reduces file size by identifying and discarding extra data not essential to the display of the image.

• Opening a jpg automatically decompresses it…

Png• Created as an alternative to gif• Lossless compression no data lost • Two types…• Png 8 and Png 24• Png 8 similar to gif, but has transparency superior

to gif…no animated Png…• Png 24 more similar to jpg. But larger comparable

file sizes…• Not supported by native browsers must be used as

plugin, but can be used natively in flash…

Golden rules for creating web images

• Type of image determines which file format to use… flat color or continuous tone

• Use an image as low and small in pixel size as is practical (think screen area and screen resolution)

• Try to reduce the number of colors in the images color table.

• Or if jpg reduce the quality as much as possible…• View and preview images in browser setting…• Check download time of images…

Types of images used on web…

• Banners…

• Background images

• Buttons

• Image maps

• Navigation bars

• Contextual images

Graphic components… Dreamweaver

• Not a graphics editor must insert…

• Rollover button

• Image map

• Navigation bar

• Flash buttons and text…

Graphic components… Photoshop/Imageready

• Graphics editor/ creator

• Optimization tools

• Rollover button

• Image map

• Slice tool

• Export images and html table…

Color palettes

• Perceptual…

• Selective…

• Adaptive…

• Web…

Web safe palette

• Generates a color table by shifting image colors to colors that are available in the standard Web-safe palette. (in order to create a palette that works on both platforms, since the Windows and Mac browser palettes share only 216 out of 256 possible colors, the palette contains only 216 colors.)

• This choice produces the least number of colors and thus the smallest files size, but not necessarily the best image quality.