1. file formats bitmap and vector

2. Bitmap or raster: rectangular array of picture elements (pixels)  Example with height and width notations

3. Principal bitmap dimensions Spatial resolution: controls image detail  Add height and width art here Color depth: controls color fidelity  Add color depth art here

4. Why care about resolution?

5. 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”

6. resolution Controls whether images look good and perform well in your application

7. Look good ? Can you see the effects of resolution choices?

8. spatial resolution visual aspect comparison

9. What we saw in real life 24-bit PNG

10. If you wanted to see those mustache curls better… just get closer!

11. But getting closer in the world of digital images produces very different results…

12. So… Is this an issue of spatial resolution or color resolution?

13. Demo of spatial resolution changes goes here. Similar in format to what follows for color resolution

14. color resolution visual aspect comparison

15. color resolution Affects general color accuracy and how gradients are reproduced

16. 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

17. What we saw in real life

18. Quality image from file with good color depth 24-bit PNG 16,777,216 different colors

19. Quality image from file with good color depth 16-bit PNG 32,768 different colors

20. Typical GIF file 256 different colors

21. Notice what a beating the gradients are taking. Anyone remember the color of the feather?

22. Palette change! The gradients are worse. But red is back!

23. Palette change! The gradients are worse still Red is fading

24. Spatial resolution has been held constant. Notice that colors are way off but detail is still pretty good.

27. Game over! Notice that colors are way off but detail is still pretty good.

28. Color resolution: animated summary of effects

29. Adjusting lookup table parameters in Photoshop

30. 256 colors rendering intent menu

31. 64 colors perceptual rendering intent

32. Original vs. three options for visual parameter adjustment

33. vectors and antialiasing visual aspect comparison

34. 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

35. Vector vs. bitmap scaling

36. Bitmap only scaling