Introduction to Media on the Web John H. Krantz Hanover College APA Advanced Training Institute July 2005.

Introduction to Media on Introduction to Media on the Webthe WebJohn H. KrantzJohn H. Krantz

Hanover CollegeHanover College

APA Advanced Training InstituteAPA Advanced Training Institute

July 2005July 2005

OutlineOutline

BackgroundBackground How displays generate imagesHow displays generate images File TypesFile Types Visual Perceptual FactorsVisual Perceptual Factors

ImagesImages AcquiringAcquiring

The General BeastThe General Beast

Screen Mosaic Triad Screen Mosaic Triad ArrangementArrangement

Interlaced ProjectionInterlaced Projection

The Electron BeamThe Electron Beam

0

0.1

0.2

0.3

0.4

0.5

-6 -4 -2 0 2 4 6

Seeing the FlickerSeeing the Flicker

Flicker and Apparent Motion are different phenoFlicker and Apparent Motion are different phenomena!mena!

Graphics vs. ImagesGraphics vs. Images

Some definitions: mine for clarity here:Some definitions: mine for clarity here: Graphics Def: computer generated or drawn Graphics Def: computer generated or drawn

by you.by you. Image: scanned, captured, take photograph Image: scanned, captured, take photograph

or an graphic file not generated by you.or an graphic file not generated by you. Difference: Difference:

In a graphic, you can directly manipulate the In a graphic, you can directly manipulate the elements because you drew them – Spriteselements because you drew them – Sprites

In an image, you can manipulate pixels but not In an image, you can manipulate pixels but not directly the elements. This has a great impact.directly the elements. This has a great impact.

Images or Graphics on the ScreenImages or Graphics on the Screen

Pixels: smallest picture elementPixels: smallest picture element Pixels are not screen dots!!!Pixels are not screen dots!!! Several dots (at least three, one of each color) make Several dots (at least three, one of each color) make

up each pixel)up each pixel)

Bitmat: An array of information that contains the Bitmat: An array of information that contains the information for the image.information for the image. It is a 3 dimensional arrayIt is a 3 dimensional array Width x Height x 24 (8 for each color)Width x Height x 24 (8 for each color) So can be hugeSo can be huge (.bmp and .tif or .tiff are most common bitmaps)(.bmp and .tif or .tiff are most common bitmaps)

Graphic and Image FormatsGraphic and Image Formats

Bitmap (bmp, PCT, Tiff) – big, not good for Bitmap (bmp, PCT, Tiff) – big, not good for webweb

Graphic Interchange Format (Gif) can animate Graphic Interchange Format (Gif) can animate 8 bits of color – palette or lookup table or LUT – 8 bits of color – palette or lookup table or LUT –

no loss of spatial informationno loss of spatial information Can be some legal issues – make sure the Can be some legal issues – make sure the

generator legally can generate GIF’sgenerator legally can generate GIF’s Generally best compression for simple graphics – Generally best compression for simple graphics –

bad for photosbad for photos Can generate transparent regionsCan generate transparent regions Can AnimateCan Animate

Graphics and Image FormatsGraphics and Image Formats

JPGJPG Generally better for images and photosGenerally better for images and photos Spatial not color compression, can distort image Spatial not color compression, can distort image

spatially and more loss with each savespatially and more loss with each save Now can animate as well.Now can animate as well.

Example JPGExample JPG

BMP vs JPEG File SizesBMP vs JPEG File SizesBoth images are the same relative size.

.BMP900kb

.JPEG High Quality ~700kb

ImageJImageJ

Free at: Free at: http://rsb.info.nih.gov/ij/index.htmlhttp://rsb.info.nih.gov/ij/index.html OverviewOverview

Java programJava program Interface a bit awkward because it is freeInterface a bit awkward because it is free Expandable via plug-insExpandable via plug-ins

Covers all basic editing and many advanced - Covers all basic editing and many advanced - very advanced very advanced

Scientific quality image editorScientific quality image editor Used in many technical applicationsUsed in many technical applications

Chromatic IssuesChromatic IssuesThe The TrichromaticTrichromatic Theory TheoryColor Opponent TheoryColor Opponent Theory

Color PickerColor PickerThe Color GamutThe Color Gamut

GlareGlareColor BlindnessColor Blindness

The CIE Color SystemThe CIE Color System

A set of Equations that A set of Equations that allow predictions ofallow predictions ofmatching.matching.

Used in photo printing,Used in photo printing,TV and film.TV and film.

Wyszecki & StilesWyszecki & Stiles(1967)(1967)

The Color GamutThe Color Gamut The range of colors The range of colors

reproducible by any reproducible by any systemsystem

The Effect of Illuminance on The Effect of Illuminance on GamutGamut

0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

0 0.2 0.4 0.6 0.8

x

y

In DarkWith Lights onWith Lights on and 30% Luminance Level

One Color StudyOne Color Study

0.00

20.00

40.00

60.00

80.00

100.00

120.00

140.00

160.00

180.00

200.00

Color

Per

ceiv

ed C

olor

Tem

p

IlluminanceIlluminance

Agostini & Bruno (1996)Agostini & Bruno (1996) Accuracy of the perceived stimulus is affected Accuracy of the perceived stimulus is affected

by the amount of illuminance.by the amount of illuminance. D. F. Neri (1990)D. F. Neri (1990)

Combination of light and gamut changed Combination of light and gamut changed chromaticitychromaticity

Request close windows and turn off Request close windows and turn off unnecessary light unnecessary light

Do not use subtle color differencesDo not use subtle color differences

Color BlindnessColor BlindnessDescription

Color BlindnessColor Blindness

Color BlindnessColor Blindness

Color BlindnessColor Blindness

How to handleHow to handle

Screening questions?Screening questions? Large sample and random assignmentLarge sample and random assignment Pre-test on color blindPre-test on color blind

AliasingAliasing

Technical definition:Technical definition: When an image contains frequencies beyond the When an image contains frequencies beyond the

range of the sampling matrix, the wrap-around and range of the sampling matrix, the wrap-around and occur as lower frequencies, distorting the imageoccur as lower frequencies, distorting the image

AliasingAliasing

Description of aliasingDescription of aliasing Generally try to draw and image that has Generally try to draw and image that has

too fine of detail or sharp edgestoo fine of detail or sharp edges Causes “jaggies”Causes “jaggies” And pixel artifactsAnd pixel artifacts

That is you can notice the pixels That is you can notice the pixels

Aliasing and Pixel Aliasing and Pixel EffectsEffects

Putting a Graphic in a WebpagePutting a Graphic in a Webpage

<p align="center"><img border="0" <p align="center"><img border="0" src=“imagename.gif" width="170" src=“imagename.gif" width="170" height="238“ alt = “ATI Image”></p>height="238“ alt = “ATI Image”></p>

AcquiringAcquiring

ScanningScanning Flatbed gives best quality.Flatbed gives best quality. Use 35 MM film for pictures – best resolutionUse 35 MM film for pictures – best resolution Scan at a high level and sample down laterScan at a high level and sample down later Any model seems good this day.Any model seems good this day.

Scanned ImageScanned Image

Digital CamerasDigital Cameras

No loss in ScanningNo loss in Scanning CCDCCD 3.1 Megapixel at least if need photo quality 3.1 Megapixel at least if need photo quality

and largerand larger They can get huge these daysThey can get huge these days Can use lower image if only need webCan use lower image if only need web

But do not sacrifice image qualityBut do not sacrifice image quality

Easy to downloadEasy to download Can be good in low lightCan be good in low light

Low Light Digital ImageLow Light Digital Image

Taking Photos DigitallyTaking Photos Digitally Focusing: Automatic and ManualFocusing: Automatic and Manual

Regular focus Regular focus Macro – allows focusing up closeMacro – allows focusing up close Spot Focus: focus is determined by pointSpot Focus: focus is determined by point

Shutter SpeedShutter Speed Zoom: Zoom:

Do not use digital zoom – if need more zoom, do Do not use digital zoom – if need more zoom, do it on computer laterit on computer later

On my camera: default is digital zoom off except On my camera: default is digital zoom off except for moviesfor movies

Taking Pictures (cont.)Taking Pictures (cont.)

White Balance, controls for our color White Balance, controls for our color constancyconstancy Effect of the IlluminantEffect of the Illuminant

Flash: Flash: often I keep it off.often I keep it off.

Image Size: Image Size: I keep at standard (full pixel density, some I keep at standard (full pixel density, some

JPG compression). Balance between image JPG compression). Balance between image quality and ability to store on disk ~ 1 quality and ability to store on disk ~ 1 Meg/pictureMeg/picture

Use of FlashUse of FlashFlash No Flash

Watch for reflections. Can get inexpensive table camera tripods.

Brightness and ContrastBrightness and Contrast

Visual MeasuresVisual Measures Visually separate but tied together on computerVisually separate but tied together on computer

AssignmentAssignment

Take series of images that you might want Take series of images that you might want shown in sequences as part of a studyshown in sequences as part of a study