* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download web_graphicst - Multimediaarts.net
Survey
Document related concepts
Tektronix 4010 wikipedia , lookup
Color vision wikipedia , lookup
Waveform graphics wikipedia , lookup
MOS Technology VIC-II wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Framebuffer wikipedia , lookup
Apple II graphics wikipedia , lookup
Color Graphics Adapter wikipedia , lookup
Stereoscopy wikipedia , lookup
Image editing wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Stereo display wikipedia , lookup
Hold-And-Modify wikipedia , lookup
BSAVE (bitmap format) wikipedia , lookup
Transcript
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.. 16 28.8 56 c • • • • DSL c High bandwidth… Dsl Cable…. Isdn Cable c ISDN c 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 For 800X600 Actually use 740X550 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…. 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 File size… Image quality • Image file size … • Must be balanced with… • Image quality • One must find the acceptable level of depreciation • Compromise between two… Hi Balance 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.