Introduction to Media for Web-based Research John H. Krantz Hanover College Workshop on Web Research Centre for Affective Sciences, May 2008
Outline • Background • Graphics and Images • Video • Color and Lighting
The General Beast CRT LCD (Flat Panel)
Background • Screen formats are changing • Original: 4 x 3 (Width is 4 to Height's 3) • New (driven by HDTV) is 16 x 9
Graphics vs. Images • Some definitions: mine for clarity here: • Graphics Def: computer generated or drawn by you. • Image: scanned, captured, take photograph or an graphic file not generated by you. • Difference: • In a graphic, you can directly manipulate the elements because you drew them – Sprites • In an image, you can manipulate pixels but not directly the elements. This has a great impact.
Images or Graphics on the Screen • Pixels: smallest picture element • Pixels are not screen dots!!! • Several dots (at least three, one of each color) make up each pixel) • Bitmat: An array of information that contains the information for the image. • It is a 3 dimensional array • Width x Height x 24 (8 for each color) • So can be huge • (.bmp and .tif or .tiff are most common bitmaps)
Graphic and Image Formats • Bitmap (bmp, PCT, Tiff) – big, not good for web • Graphic Interchange Format (Gif) can animate • 8 bits of color – palette or lookup table or LUT – no loss of spatial information • Can be some legal issues – make sure the generator legally can generate GIF’s • Generally best compression for simple graphics – bad for photos • Can generate transparent regions • Can Animate
Graphics and Image Formats • JPG • Generally better for images and photos • Spatial not color compression, can distort image spatially and more loss with each save • Now can animate as well.
Bitmapped vs. JPEG File Sizes Both images are the same relative size. 900kb .JPEG High Quality ~700kb
ImageJ • Free at: http://rsb.info.nih.gov/ij/index.html • Overview • Java program • Interface a bit awkward because it is free • Expandable via plug-ins • Covers all basic editing and many advanced - very advanced • Scientific quality image editor • Used in many technical applications • Plugins!
Gimp • Freeware photo editor that rivals Photoshop • Works with Layers, allows reediting • Download: http://gimp-win.sourceforge.net/stable.html
Dynamic Media • Slideshows • Why • Presenting Using Redirects • Video • Background • Delivering in a Webpage
Why Slideshows • Example 1; Example 2 • Indicate sequence of events • Carries sense of change • Sense of momentum in photo • Original Loftus Eye Witness testimony was done this way • How? • One easy way – use redirects
Code for redirect <html> <head> <title>Image Sequence</title> <META HTTP-EQUIV="refresh" CONTENT="3; URL=page01.html"> • Number is number of seconds before redirect </head> <body> <p> This will change in 3 seconds, about</p> <p align = "center"> <img border="0" src="Bobby0000.jpg" width="512" height="384"></p> </body> </html>
Video • YouTube has changed internet video • Flash video (FLV) has become the default standard. • Example 1; Example 2
Flash Video • The format has evolved over time • It is getting better and files are getting smaller • Moving to an open source compression • But later videos formats have less reach • Create and Edit with Adobe Flash (http://www.adobe.com/products/flash/)
Motion Reproduction • Frame rates of monitors far exceed what is needed for movement update • NTSC video: 30 updates per second • Movies: 24 updates per second • Most web video 10 to 15 but can be up to 30 frames/sec (and variable)
Computer Video • Effect of update rate 10 fps 15 fps 24 fps Probably not enough for speech and subtle facialexpressions.
Flicker • Critical threshold of flicker rates is about 60 Hz in the fovea • But gets higher for larger stimuli • Recommended flicker rates between 66 Hz and 120 Hz (Bridgeman, 1998) • Most monitors are adequate in this value • Notice difference between flicker and frame update rate. • Wagon wheel effect.
Pixel Duration • Pixels are not on continuously during a frame • In part this is necessary for clean motion • Typical CRT phosphors last about 4 msec. (Bridgeman, 1998) • On LCD and other technologies, persistence is longer • Makes motion less clean but flicker less noticeable
Differences in Persistence Fast motion will be less clean on an LCD screen
Questions to Ask Yourself • Is video the only way to do this study? • How does lighting interact with the stimulus? • How do the variations in the human visual system interact with the stimulus? • If the video is interrupted how is the video degraded? • Does the increase in sample generality offset the loss of control?
General Video Issues • Image size • Keep it small • 320 x 240 is not uncommon • Image color depth • Normally full color • Video Length • The shorter the better • People may not stay • Network more likely to cause problems
Techniques • Option 1 • Buy Adobe Flash • Option 2 • Use .AVI, .MOV, .WMV, and .MPG format, whichever is convenient, and upload to YouTube or other service • Use other format and editors • Note reduced reach and, thus, loss of participants
Editing: with QuickTime Pro • Inexpensive addition QuickTime Player • Basics • Opens MOV, mpg, avi, mp3, etc. • Get Movie Information on Movie Menu (ctrl-j in Windows) • Tracks: separate slices of information: played at same time as other tracks • Look under the Edit menu
How to deliver Progressive Download Streaming Only stream is sent, it is never whole file Better for longer Also for security • Will play when enough has been downloaded • Okay for small • Or not large number of videos
Saving for Web • Format: • You must compress • Uncompressed files will be very large • Lead very slow download • Recent algorithm • Duration • For same reason, keep videos short
Chromatic Issues The Trichromatic Theory Color Opponent Theory Color Picker The Color Gamut Glare Color Blindness
The CIE Color System • A set of Equations that allow predictions of matching. • Used in photo printing, TV and film. • Wyszecki & Stiles(1967) • The Color Gamut • The range of colors reproducible by any system
The Effect of Illuminance on Gamut In Dark With Lights on With Lights on and 30% Luminance Level
Illuminance: Example: Dark CRT LCD
Illuminance: Direct Room Light CRT LCD
Another Color Study Laugwitz, 2001
Illuminance • Agostini & Bruno (1996) • Accuracy of the perceived stimulus is affected by the amount of illuminance. • D. F. Neri (1990) • Combination of light and gamut changed chromaticity • Request close windows and turn off unnecessary light • Do not use subtle color differences
Color Blindness Description
How to handle • Screening questions? • Large sample and random assignment • Pre-test on color blind