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

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

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 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

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 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

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 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

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 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

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 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

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 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

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 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

Comparing Images True color image example Dithered image example Color substitution image example True color image example Dithered image example Color substitution image example

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 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

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

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 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

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 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

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 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

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 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

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 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

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 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

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 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

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

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 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

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 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

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 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

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 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

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 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

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 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

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 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

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 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

more discussion…