fundamentals of www imaging fort collins, co copyright © xtr systems, llc fundamentals of web...

Fundamentals of WWW ImagingFort Collins, CO

Copyright © XTR Systems, LLC

Fundamentalsof

Web ImagingInstructor: Joseph DiVerdi, Ph.D., MBA



Core Imaging Concepts

• Graphics Models– Raster vs. Vector

• Image Types– “Photograph” vs. “Cartoon”

• Color Models– Black-White, Grayscale, RGB, HSL, HSB, ...

• File Formats– GIF, JPEG, PNG, ...



Graphics Models

• Raster Environment– Space Is Defined Using a Fixed Number of Points

Called Pixels Which Possess a Color• Images Are Made up of Arrays of Pixels• Adobe PhotoShop



Raster Examples

Magnified View ofTV or Monitor Screen

Magnified View ofPrinted Magazine



Raster Examples

Magnified View of Image ofTV or Monitor Screen

Notice the Effectsof a Limited Number

of Pixels



Importance of Image Size

• On the Web:– Number of Pixels Is the Coin of the Realm

• Web Browsers Will Render Images at a Resolution Fixed by the OS & Selected by the Viewer

• Typical Values for Desktop Computers:– Windows: 96 dpi– Mac: 72 dpi

• Images You Create & Use Will Have a Pixel Size Which Determines Their Rendered Size



Importance of Resolution



Graphics Models

• Vector Environment– Objects Are Defined Using Mathematical

Operations• line: start_point, end_point• patch: top_left_point, bottom_right_point, color• Adobe Illustrator, PostScript



Vector Examples



Graphics Models

• Vector Environment– Requires Considerable Processing Power to

Render or Display Image– Objects Can Be Manipulated at Any Time– Image Is Scalable, Always Rendered at the Output

Device’s Resolution

• Raster Environment– Images Have Intrinsic Resolution– Objects Do Not Exist– Data Size Depends on Pixel Count– WWW Is Primarily but Not Exclusively Raster



Image Types

• Pictures– Continuous Gradations

of Color– Note Progression of

Color Across the Arms– Think Photographs



Image Types

• Cartoons– Relatively Large Patches

of Constant Color– Notice the Colors on the

Cat's Neck and Underside

– Gradients Can Be Simulated or Approximated

– Notice the Patches on the Guitar's Surface

– Think Cartoons



Color Models - Color Wheel



RGB Colors



Color Models - HSL



Color Models



Storage Size

• The Size of an Image File Depends On– The Number of Pixels in It– The Color Mode– The Amount of Compression Applied to It



Color Modes

• B/W– One Bit Per Pixel

• Grayscale– One Byte Per Pixel

• RBG– One Byte Per Pixel

• Three Colors• One Byte Per Color Per Pixel

• Palette– 8-Bit Palette -> One Byte Per Pixel

• 16-Bit Palette -> Two Bytes Per Pixel



Storage Formats



Image Artifacts

Saved as JPEG Saved as GIF



Image Artifacts

Saved as JPEGSaved as GIF

6.3 kByte 4.0 kByte



Image Artifacts

Saved as JPEGSaved as GIF

6.3 kByte 25.8 kByte



GIF Storage Issues

5.2 kByte

2.6 kByte



Web Page Size Guideline

• For Viewers with Slow Connections:– Lowest Common Denominator Approach– Limit Total Page Size to 25 kByte is Best– Limit Total Page Size to 50 kByte is OK– That includes:

• HTML• All Images on Page (Add Them All up & Don't Cheat)

• Violate This Only If You Can Justify It– Consider Using More Smaller Pages



Page Download & Rendering

• Browser Requests HTML• Server Delivers HTML, e.g.,1000 byte• Browser Begins Rendering Process

– <IMG> Tag Appears in HTML Without Size Info

• Browser Halts Rendering Process• Browser Requests Image• Server Delivers image, e.g., 10000 byte• Browser Continues Rendering Process

– <IMG> Tag Appears in HTML Without Size Info

• Browser Halts Rendering process...




• During This Process– What Does the Viewer See?

• Partial (at Best) Page• Nothing

– What Does the Viewer Think?• *&#$^*!!!

• This is Very Easy to Prevent...




• Every <IMG> Tag – Must Contain Width & Height Attributes

<IMG SRC="logo.gif"

HEIGHT=50

WIDTH=250

ALT="XTR logo"

>




• Browser Requests HTML• Server Delivers HTML• Browser Begins Rendering Process

– <IMG> Tag Appears in HTML With Size Info

• Browser Reserves Space on Page• Browser Continues Rendering Process• Browser Finishes Rendering HTML• Browser Requests Images, One at a Time• Server Delivers images, One at a Time• Browser Fills in Empty Image Spaces...




• During This Process– What Does the Viewer See?

• Text Appears Quickly• Spaces are Left Open for Images• Images Fill in the Spaces

– What Does the Viewer Think?• Viewer is Too Busy Reading Your Most Excellent

Content to Think



Image-Related Tasks

• Tasks That You Will Often Perform– Scanning & Conversion From Scanned Format– Download & Conversion From On-line Format

• Don’t Forget Copyright Issues!

– Creation of New Image Elements• Now You’re on the Other Side of the Copyright Issue

– Modification in Working Format• Image Editing & Composing

– Reduction to On-line Format• Size, Format, & Composition



Working Format

Working Format

Image Size

Color Model

.PSD Format

Layers

Working Format

Image Size

Color Model

.PSD Format

Layers

Scanned ImagesScanned Images

On-LineImagesOn-LineImages

“Homemade”Art

“Homemade”Art

On-LineImagesOn-LineImages

fundamentals of www imaging fort collins, co copyright © xtr systems, llc fundamentals of web...

Documents

copyright xtr systems

raster slide

llc color models hsl

postscript slide

mba slide

llc raster examples

llc vector examples

llc importance of image