1 / 31

web graphics

web graphics. Discussion Session August 16, 2000. 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. Color Space.

theodora-xena
Télécharger la présentation

web graphics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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…

More Related