Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Published byNeal Burke Modified over 9 years ago

Similar presentations

Presentation on theme: "Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Fundamentals of Web Imaging Instructor: Joseph DiVerdi, Ph.D., MBA."— Presentation transcript:

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

2 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,... File Formats –GIF, JPEG, PNG,...

3 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

4 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

5 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

6 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

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

8 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

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

10 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

11 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

12 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

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

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

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

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

17 Fundamentals of WWW Imaging Fort 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

18 Fundamentals of WWW Imaging Fort 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

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

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

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

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

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

24 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

25 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., 10000 byte Browser Continues Rendering Process – Tag Appears in HTML Without Size Info Browser Halts Rendering process...

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

27 Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Page Download & Rendering Every Tag –Must Contain Width & Height Attributes <IMGSRC="logo.gif" HEIGHT=50 WIDTH=250 ALT="XTR logo" >

28 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 a Time Server Delivers images, One at a Time Browser Fills in Empty Image Spaces...

29 Fundamentals of WWW Imaging Fort 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

30 Fundamentals of WWW Imaging Fort 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

31 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

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

Similar presentations

Multimedia Mr. Sanchez.

Multimedia Mr. Sanchez.
Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Colors & Backgrounds Instructor: Joseph DiVerdi,

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Colors & Backgrounds Instructor: Joseph DiVerdi,
A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.

A Digital Imaging Primer Nick Dvoracek Instructional Resources Center University of Wisconsin Oshkosh.
Color COM 366 Web Design & Production. RGB color Amount of light in each channel 0 - 255 Closer to 255, whiter color gets Every color has value for red,

Color COM 366 Web Design & Production. RGB color Amount of light in each channel Closer to 255, whiter color gets Every color has value for red,
ETT 429 Spring 2007 Digital Photography/Scanners.

ETT 429 Spring 2007 Digital Photography/Scanners.
Introduction to Computer Graphics

Introduction to Computer Graphics
Vector vs. Bitmap SciVis V104.03.

Vector vs. Bitmap SciVis V
Raster vs Vector and Image Resolution By Josh Gallagan.

Raster vs Vector and Image Resolution By Josh Gallagan.
File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.

File Formats The most common image file formats, the most important for cameras, printing, scanning, and internet use, are JPG, TIF, PNG, and GIF.
Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802

Photoshop: Designing Graphics for the Web Christine Vucinich & Vicki Weidler ITS Training Services 224 B Computer Building University Park, PA 16802
V Obtained from a summer workshop in Guildford County July, 2014

V Obtained from a summer workshop in Guildford County July, 2014
Digital Images. Scanned or digitally captured image Image created on computer using graphics software.

Digital Images. Scanned or digitally captured image Image created on computer using graphics software.
 Scanned or digitally captured image  Image created on computer using graphics software.

 Scanned or digitally captured image  Image created on computer using graphics software.
Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,

Russell Taylor Week 3. Image File Formats - TIF, JPG, PNG, GIF - which to use? The three most common and important image file formats for for printing,
Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.

Understanding Web Graphics Web Design Section 5-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.

WEB GRAPHICS. The Pixel Computer displays are comprised of rows and columns of pixels. Pixels are indivisible. Some common screen resolutions are:, 600.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.

File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Dean Pentcheff NHMLAC MBPC/Crustacea 17 April 2006.

Dean Pentcheff NHMLAC MBPC/Crustacea 17 April 2006.
Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no guarantee that people will see/experience your web pages.

Designing for the Unknown. Challenges of Web Design As frustrating as it may be – there is no guarantee that people will see/experience your web pages.
Graphic images for computers Stored in files of binary data - Binary blobs Software has to know the binary format to decode the file and render an image.

Graphic images for computers Stored in files of binary data - Binary blobs Software has to know the binary format to decode the file and render an image.

Similar presentations

Ads by Google