webgraphicswebgraphics

Discussion SessionAugust 16, 2000

Discussion SessionAugust 16, 2000

Starting PointsStarting 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 SpaceColor 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 CombinationsRGB 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 CombinationsRGB 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 DepthColor 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 DepthTrue-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 DepthHigh-Color DepthTrue color allows more hues than the eye can distinguish Operating systems offer 16-bit high color – thousands of colorsMonitor displays only 32 levels of red, 32 of blue, and 64 of greenReducing color depth to 16 bits per pixel boosts video performanceData 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 colorsMonitor displays only 32 levels of red, 32 of blue, and 64 of greenReducing color depth to 16 bits per pixel boosts video performanceData rounded off only on display – files unaffected – few 16-bit formats

Indexed Color DepthIndexed 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 AntialiasingDithering 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

DitheringDitheringCreates illusion of more colors by creating a diffuse pattern of pixels approximating the desired colorDisplay applications, like web browsers, dither images running on 8-bit display systemsImage editors use dithering to convert true-color images to indexed colorsAlternative 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 colorDisplay applications, like web browsers, dither images running on 8-bit display systemsImage editors use dithering to convert true-color images to indexed colorsAlternative to dithering is color substitution – uses the closest color on the palette

ComparingImagesComparingImages

True color image example

Dithered image example

Color substitution image example

True color image example

Dithered image example

Color substitution image example

AntialiasingAntialiasing

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

Antialiasing interpolates colors creating the illusion of smooth non-horizontal or non-vertical boundaries

Antialiasing interpolates colors creating the illusion of smooth non-horizontal or non-vertical boundaries

Aliased type Antialiased type

AntialiasingAntialiasing

Antialiased type appears smoother and more legible than pixilated aliased typeAntialiased images typically look less blocky and more professionalAntialiased images tend to require more colors increasing file size

Antialiased type appears smoother and more legible than pixilated aliased typeAntialiased images typically look less blocky and more professionalAntialiased images tend to require more colors increasing file size

Color Matching and Gamma CorrectionColor Matching and Gamma Correction

The RGB color model measures color relative to the hardware being used at the timeGraphics developed on one platform don't look the same on anotherAn 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 timeGraphics developed on one platform don't look the same on anotherAn image that looks great on a PC may appear pale or washed out on a Macintosh

Color Matching and Gamma CorrectionColor Matching and Gamma Correction

The relation between RGB values and the actual color displayed on the screen is almost never linearA red channel set to 200 should theoretically be twice as bright as a red channel set to 100The 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 linearA red channel set to 200 should theoretically be twice as bright as a red channel set to 100The actual relation, called gamma, varies from computer to computer

Color Matching and Gamma CorrectionColor Matching and Gamma Correction

Color management is a problem with many computer peripheralsGamma correction solves color management for Web graphicsPortable Network Graphics (PNG) format includes gamma valuesWeb browsers and graphics applications have only recently begun to support PNG

Color management is a problem with many computer peripheralsGamma correction solves color management for Web graphicsPortable Network Graphics (PNG) format includes gamma valuesWeb browsers and graphics applications have only recently begun to support PNG

Raster Images 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 ImagesVector Images

Vector image files record images descriptively, in terms of geometric shapesVector shapes are converted to bitmaps for displayVector 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 shapesVector shapes are converted to bitmaps for displayVector images are easier to modify than raster images

Components can be moved, resized, rotated, or deleted independently

Vector ImagesVector 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 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 FormatsTrue 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 FormatsTrue Image Formats

Accurately stores an image for future editingDozens – if not hundreds – of existing true image formatsEvery major computer operating system has its own native image format – BMP, PICT, XWDAll of these formats support full 24-bit color depth

Accurately stores an image for future editingDozens – if not hundreds – of existing true image formatsEvery major computer operating system has its own native image format – BMP, PICT, XWDAll of these formats support full 24-bit color depth

True Image FormatsTrue 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: GIFWeb 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 unitLimits itself to indexed color

GIF can have 256 colors or lessIdeal 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 unitLimits itself to indexed color

GIF can have 256 colors or lessIdeal for simple line art

Web Image Format: GIFWeb 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 Web Image Format: JPEG

JPEG (Joint Photographic Experts Group) format supports full 24-bit colorCompresses images by accurately recording the brightness of each pixel but averaging out the huesRecords a description of an image, not the actual image itself

JPEG (Joint Photographic Experts Group) format supports full 24-bit colorCompresses images by accurately recording the brightness of each pixel but averaging out the huesRecords a description of an image, not the actual image itself

Web Image Format: JPEG 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 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

morediscussion…morediscussion…