Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Fundamentals of Web Imaging Instructor: Joseph DiVerdi, Ph.D., MBA

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Core Imaging Concepts Graphics Models –Raster vs. Vector Image Types –“Photograph” vs. “Cartoon” Color Models –Black-White, Grayscale, RGB, HSL, HSB,...

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC 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

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Raster Examples Magnified View of TV or Monitor Screen Magnified View of Printed Magazine

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Raster Examples Magnified View of Image of TV or Monitor Screen Notice the Effects of a Limited Number of Pixels

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC 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

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Importance of Resolution

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC 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

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Vector Examples

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC 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

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Image Types “Pictures” –Continuous gradations of color –Note progression of color across the arms –Think photographs

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC 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

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Color Models - Color Wheel

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC RGB Colors

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Color Models - HSL

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Color Models

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Storage Formats

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Image Artifacts Saved as JPEGSaved as GIF

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Image Artifacts Saved as JPEGSaved as GIF

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Image Artifacts Saved as JPEGSaved as GIF 6.3 kByte 25.8 kByte

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Image Artifacts Saved as JPEGSaved as GIF 6.3 kByte4.0 kByte

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC GIF Storage Issues 5.2 kByte 2.6 kByte

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC 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

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Page Download & Rendering Browser requests HTML Server delivers HTML, e.g.,1000 byte Browser begins rendering process – tag appears in HTML without size info Browser halts rendering process Browser requests image Server delivers image, e.g., byte Browser continues rendering process – tag appears in HTML without size info Browser halts rendering process...

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Page Download & Rendering During this process –What does the viewer see? Partial (at best) page Nothing –What does the viewer think? *&#$^*!!! This is very easy to prevent...

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Page Download & Rendering Every tag must contain width & height attributes

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Page Download & Rendering Browser requests HTML Server delivers HTML Browser begins rendering process – 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 at time Server delivers images, one at at time Browser fills in empty image spaces...

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Page Download & Rendering During this process –What does the viewer see? Text appears quite quickly Spaces are left open for images Images slowly fill in the spaces –What does the viewer think? Viewer is too busy reading your most excellent content to think

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Image-Related Tasks Tasks That You Will Often Perform –Scanning and Conversion from Scanned Format –Download and 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

Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Working Format Image Size Color Model.PSD Format Layers Working Format Image Size Color Model.PSD Format Layers Scanned Images On-Line Images On-Line Images “Homemade” Art “Homemade” Art On-Line Images On-Line Images