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

Seeing the Flicker  Flicker and Apparent Motion are different phenomena! Flicker and Apparent Motion are different phenomena! 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:  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 Chromatic Issues The Trichromatic Theory The Trichromatic Theory Color Opponent Theory Color Opponent Theory Color Picker Color Picker The Color Gamut Glare Color Blindness

The CIE Color System 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 Color Gamut The Color Gamut  The range of colors reproducible by any system

The Effect of Illuminance on Gamut In Dark With Lights on and 30% Luminance Level

One Color Study

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

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

Effects of Edges  Craik-Cornsweet and Minimal Contours Craik-Cornsweet and Minimal Contours Craik-Cornsweet and Minimal Contours  Why these effects? Why these effects? Why these effects?

Anti-aliasing  Solution to aliasing  Bandlimiting or anti-aliasing  Essentially blur the edges or image so fine detail is lost  In a lot of Software  Ideally use a gaussian filter  This is the shape of CRT electron beam which is why dots on screen never show up  Infante (1985); Silverstein et al. (1990)  Many graphics software and even some languages anti-alias (Java2D) but it is not calibrated but good enough with sufficient resolution

Putting a Graphic in a Webpage  

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 White Balance, controls for our color constancy White Balance, controls for our color constancy  Effect of the Illuminant Effect of the Illuminant 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 FlashNo Flash Watch for reflections. Can get inexpensive table camera tripods.

Brightness and Contrast  Visual Measures Visual Measures 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