Transcript psych.hanover.edu

Introduction to Media on
the Web
John H. Krantz
Hanover College
APA Advanced Training Institute
July 2005
Outline
 Background
 How displays generate images
 File Types
 Visual Perceptual Factors
 Images
 Acquiring
The General Beast
Screen Mosaic Triad
Arrangement
Interlaced Projection
The Electron Beam
0.5
0.4
0.3
0.2
0.1
0
-6
-4
-2
0
2
4
6
Seeing the Flicker
 Flicker and Apparent Motion are different
phenomena!
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.
Example JPG
BMP vs JPEG File Sizes
Both images are the same relative size.
.BMP
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
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
0.9
In Dark
With Lights on
With Lights on
and 30%
Luminance
Level
0.8
0.7
0.6
y
0.5
0.4
0.3
0.2
0.1
0
0
0.2
0.4
x
0.6
0.8
Color
w
G
re
G
re
en
en
Ye
llo
w
Ye
llo
ng
e
ng
e
e
ed
ra
ng
R
O
ra
w
ia
ot
Pi
nk
O
ra
ig
ht
llo
Br
Ye
le
nk
ch
Pi
Pu
rp
O
ig
ht
w
ed
H
e
pl
e
in
kl
Fu
s
nk
y
llo
Br
Ye
R
Pi
ue
Bl
ue
Pu
r
iw
ar
k
e
ue
Bl
Bl
lu
tB
ua
en
en
Aq
G
re
m
Pe
r
D
ed
iu
M
a
Li
gh
Se
G
re
Perceived Color Temp
One Color Study
200.00
180.00
160.00
140.00
120.00
100.00
80.00
60.00
40.00
20.00
0.00
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
Color Blindness
Color Blindness
Color Blindness
How to handle
 Screening questions?
 Large sample and random assignment
 Pre-test on color blind
Aliasing
 Technical definition:
 When an image contains frequencies beyond the
range of the sampling matrix, the wrap-around and
occur as lower frequencies, distorting the image
Aliasing
 Description of aliasing
 Generally try to draw and image that has
too fine of detail or sharp edges
 Causes “jaggies”
 And pixel artifacts
 That is you can notice the pixels
Aliasing and Pixel
Effects
Putting a Graphic in a Webpage
 <p align="center"><img border="0"
src=“imagename.gif" width="170"
height="238“ alt = “ATI Image”></p>
Acquiring
 Scanning




Flatbed gives best quality.
Use 35 MM film for pictures – best resolution
Scan at a high level and sample down later
Any model seems good this day.
Scanned Image
Digital Cameras
 No loss in Scanning
 CCD
 3.1 Megapixel at least if need photo quality
and larger
 They can get huge these days
 Can use lower image if only need web
 But do not sacrifice image quality
 Easy to download
 Can be good in low light
Low Light Digital Image
Taking Photos Digitally
 Focusing: Automatic and Manual
 Regular focus
 Macro – allows focusing up close
 Spot Focus: focus is determined by point
 Shutter Speed
 Zoom:
 Do not use digital zoom – if need more zoom, do
it on computer later
 On my camera: default is digital zoom off except
for movies
Taking Pictures (cont.)
 White Balance, controls for our color
constancy
 Effect of the Illuminant
 Flash:
 often I keep it off.
 Image Size:
 I keep at standard (full pixel density, some
JPG compression). Balance between image
quality and ability to store on disk ~ 1
Meg/picture
Use of Flash
Flash
No Flash
Watch for reflections. Can get inexpensive table camera tripods.
Brightness and Contrast
 Visual Measures
 Visually separate but tied together on computer
Assignment
 Take series of images that you might want
shown in sequences as part of a study