web graphics

1. webgraphics Discussion Session August 16, 2000

2. Starting Points • Web Graphics Fundamentals • Color Space • Color Depth • Dithering and Antialiasing • Color Matching and Gamma Correction • Raster vs. Vector • True vs. Web Image Formats

3. Color Space • Model for representing colors numerically –Color space • Most common color space –RGB • Every instance of color identified by three numbers – Channels • Intensity of red, green, and blue specified as number – 0 (dark) to 255 (full intensity)

4. RGB Color Space Combinations • Channel intensity variations create individual colors on your monitor • Combinations like these produce pure, bright hues

5. RGB Color Space Combinations • Increasing all channels at once adds white – creates a pale tint • Reducing the strongest colors adds black – creates a dark shade • Doing both adds gray – creates a muted tone

6. Color Depth • RGB measures each channel from 0 to 255 – range from 8 bits of data • Color depth is amount of data used to represent a color • Color depth is important in two respects • Color depth of hardware – monitor, video adapter, software drivers • File color depth – file storage format

7. True-Color Depth • Three RGB 8-bit channels = 24-bit color depth = true-color • True-color monitors display every pixel color exactly • Shown as millions of colors in monitor settings • 16,777,216 RGB combinations • True-color image files record the full range of colors precisely

8. High-Color Depth • True color allows more hues than the eye can distinguish • Operating systems offer 16-bit high color – thousands of colors • Monitor displays only 32 levels of red, 32 of blue, and 64 of green • Reducing color depth to 16 bits per pixel boosts video performance • Data rounded off only on display – files unaffected – few 16-bit formats

9. Indexed Color Depth • Older hardware and certain file formats can display only 8 bits per pixel • 8-bit environments use indexed color • The system or image file maintains a color table, or palette, of up to 256 colors • Indexed color lets 8-bit displays and images simulate true color

10. Dithering and Antialiasing • Images may have more colors than the monitor can show or details too small for the pixels to render • Solutions to these problems are dithering and antialiasing

11. Dithering • Creates illusion of more colors by creating a diffuse pattern of pixels approximating the desired color • Display applications, like web browsers, dither images running on 8-bit display systems • Image editors use dithering to convert true-color images to indexed colors • Alternative to dithering is color substitution – uses the closest color on the palette

12. ComparingImages • True color image example • Dithered image example • Color substitution image example

13. Antialiasing • Regardless of color depth computers render pixels in a grid • Creates problems for non-grid shaped images • Strict division between pixels is called alias • Applications use antialiasing to smooth out these divisions

14. Antialiasing Example • Antialiasing interpolates colors creating the illusion of smooth non-horizontal or non-vertical boundaries Aliased type Antialiased type

15. Antialiasing • Antialiased type appears smoother and more legible than pixilated aliased type • Antialiased images typically look less blocky and more professional • Antialiased images tend to require more colors increasing file size

16. Color Matching and Gamma Correction • The RGB color model measures color relative to the hardware being used at the time • Graphics developed on one platform don't look the same on another • An image that looks great on a PC may appear pale or washed out on a Macintosh

17. Color Matching and Gamma Correction • The relation between RGB values and the actual color displayed on the screen is almost never linear • A red channel set to 200 should theoretically be twice as bright as a red channel set to 100 • The actual relation, called gamma, varies from computer to computer

18. Color Matching and Gamma Correction • Color management is a problem with many computer peripherals • Gamma correction solves color management for Web graphics • Portable Network Graphics (PNG) format includes gamma values • Web browsers and graphics applications have only recently begun to support PNG

19. Raster Images • Image data format determines your options for changing it • Raster image-file formats record images in pixels • Edited only by altering the pixels directly with a bitmap editor • Tools include apps like Photoshop and Paint Shop Pro

20. Vector Images • Vector image files record images descriptively, in terms of geometric shapes • Vector shapes are converted to bitmaps for display • Vector images are easier to modify than raster images • Components can be moved, resized, rotated, or deleted independently

21. Vector Images • Flash is closest to a standard vector format for Web graphics • Scalable Vector Graphics (SVG) is the only W3C-supported vector format – still under development • Tools include apps like Illustrator, Freehand, and CorelDRAW

22. Raster vs. Vector • Raster images are usually more lifelike and realistic • Vector images are usually smaller and animate well on the Web

23. True vs. Web Image Formats • Choice of image format is based on a variety of factors • Future editing • Smallest possible file for downloading over the Web • Image editing tools available

24. True Image Formats • Accurately stores an image for future editing • Dozens – if not hundreds – of existing true image formats • Every major computer operating system has its own native image format – BMP, PICT, XWD • All of these formats support full 24-bit color depth

25. True Image Formats • TIFF (Tagged Information File Format) is intended for cross-platform use • PNG is the most promising loss-free format for cross-platform use • Accurately compresses 24- or even 32-bit color images (24 + 8bit alpha) • Intended to be a Web format

26. Web Image Format: GIF • CompuServe's GIF (Graphics Interchange Format) compresses images in two ways • Uses Lempel-Ziv encoding which counts rows of like-colored pixels as a single unit • Limits itself to indexed color • GIF can have 256 colors or less • Ideal for simple line art

27. Web Image Format: GIF • GIF has a couple of unique and useful features • Files can contain several images and a duration value for each one to produce animations • Files can have limited transparency – one color in an image's palette

28. Web Image Format: JPEG • JPEG (Joint Photographic Experts Group) format supports full 24-bit color • Compresses images by accurately recording the brightness of each pixel but averaging out the hues • Records a description of an image, not the actual image itself

29. Web Image Format: JPEG • Web browser or graphics application decodes this description into a bitmap that looks more or less like the original image • Accuracy of the reconstructed image depends on how much compression is applied

30. Web Image Format: JPEG • Works very well for photographic images with gradual color changes and no sharp edges • JPEGs are notoriously difficult to edit – modifying interpreted bitmap rather than the JPEG data itself • Resaving as a JPEG will put the interpreted bitmap, defects and all, back through the encoding process resulting in further image degradation

31. morediscussion…