Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Fundamentals of Web...
-
Upload
neal-burke -
Category
Documents
-
view
216 -
download
0
Transcript of 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
Fundamentals of WWW ImagingFort 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, ...
• File Formats– GIF, JPEG, PNG, ...
Fundamentals of WWW ImagingFort 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 ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Raster Examples
Magnified View ofTV or Monitor Screen
Magnified View ofPrinted Magazine
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Raster Examples
Magnified View of Image ofTV or Monitor Screen
Notice the Effectsof a Limited Number
of Pixels
Fundamentals of WWW ImagingFort 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 ImagingFort 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 ImagingFort 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 ImagingFort 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 ImagingFort 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 ImagingFort Collins, CO
Copyright © XTR Systems, LLC
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
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
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
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Image Artifacts
Saved as JPEG Saved as GIF
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Image Artifacts
Saved as JPEGSaved as GIF
6.3 kByte 4.0 kByte
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Image Artifacts
Saved as JPEGSaved as GIF
6.3 kByte 25.8 kByte
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
GIF Storage Issues
5.2 kByte
2.6 kByte
Fundamentals of WWW ImagingFort 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 ImagingFort Collins, CO
Copyright © XTR Systems, LLC
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...
Fundamentals of WWW ImagingFort 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 ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Page Download & Rendering
• Every <IMG> Tag – Must Contain Width & Height Attributes
<IMG SRC="logo.gif"
HEIGHT=50
WIDTH=250
ALT="XTR logo"
>
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Page Download & Rendering
• 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...
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
Page Download & Rendering
• 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
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
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
Fundamentals of WWW ImagingFort Collins, CO
Copyright © XTR Systems, LLC
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