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 Web a pipeline… Low bandwidth… 16. kbps 28.8 kbps 56. kbps.. High bandwidth… Dsl Cable…. Isdn c c c c DSL Cable 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 X X 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 800X600 Actually 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 qualityFile 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 Compression 2 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 Compression 2 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.