file formats bitmap and vector
Bitmap or raster: rectangular array of picture elements (pixels) Example with height and width notations
Principal bitmap dimensions Spatial resolution: controls image detail Add height and width art here Color depth: controls color fidelity Add color depth art here
Why care about resolution?
Resolution choices affect all these issues Image clarity and apparent detail Noise and artifacts (undesirable extras not in the original) Color fidelity Image load times Odd color transitions in gradients File size Total project storage requirements Options for multi-device deployment Web site responsiveness ISP site host bandwidth charges (your money) User satisfaction and web site “stickiness”
resolution Controls whether images look good and perform well in your application
Look good ? Can you see the effects of resolution choices?
spatial resolution visual aspect comparison
What we saw in real life 24-bit PNG
If you wanted to see those mustache curls better… just get closer!
But getting closer in the world of digital images produces very different results…
So… Is this an issue of spatial resolution or color resolution?
Demo of spatial resolution changes goes here. Similar in format to what follows for color resolution
color resolution visual aspect comparison
color resolution Affects general color accuracy and how gradients are reproduced
color resolution Affects general color accuracy and how gradients are reproduced Accuracy how close the image color matches the real-life color Gradient any area of slowly changing color
What we saw in real life
Quality image from file with good color depth 24-bit PNG 16,777,216 different colors
Quality image from file with good color depth 16-bit PNG 32,768 different colors
Typical GIF file 256 different colors
Notice what a beating the gradients are taking. Anyone remember the color of the feather?
Palette change! The gradients are worse. But red is back!
Palette change! The gradients are worse still Red is fading
Spatial resolution has been held constant. Notice that colors are way off but detail is still pretty good.
Game over! Notice that colors are way off but detail is still pretty good.
Color resolution: animated summary of effects
Adjusting lookup table parameters in Photoshop
256 colors rendering intent menu
64 colors perceptual rendering intent
Original vs. three options for visual parameter adjustment
vectors and antialiasing visual aspect comparison
Demo of vectors and antialiasing Similar in format to what color resolution section included. However, much of the content is built around the ideas illustrated by the following slide
Vector vs. bitmap scaling
Bitmap only scaling