1. Raster Images
CPSC 1030

2. Properties Resolution Colour Depth (Mode) Compression Transparency
Animation
File Format

3. Resolution
a raster image is made up of a rectangular grid or matrix of pixels
each pixel in the image has uniform shape (usually square or circular)
each pixel has a solid colour
the resolution of a raster image is a measure of the width and height in pixel units

4. High Resolution (400 x 300 pixels)

5. Low Resolution (40 x 30 pixels)

6. Colour Depth the range of colour values possible for each pixel
bitmap (2 colours – usually black and white)
greyscale (256 shades of grey)
true colour (256 shades of red, green, and blue combined for a total of 256 x 256 x 256 = 14,000,000 unique colours)
indexed (each pixel in an image gets it colour from a palette up to 256 different colours)

7. Bitmap

8. Grayscale

9. Indexed (16 colours) + Palette

10. Dithering
used to enhance images with low colour depth (bitmap, indexed)
same low number of colours but colours are more diffused to create a more photographic type image

11. Dithered Bitmap Image

12. Dithered Indexed Image

13. Compression high resolution true colour images are quite large
e.g. a 6 megapixel image requires 6,000,000 x 3 bytes (red, green, blue) / pixel = 18,000,000 bytes or 18MB of storage (uncompressed)
use lossy or lossless compression to reduce file sizes

14. Image Compression Ratio
ratio of sizes of uncompressed image file to compressed image file
e.g. an uncompressed photographic image file size is 18MB; the compressed image file size is 3MB; the compression ratio is 18:3 or 6:1

15. Lossless Compression
exploits patterns / redundancies in the data of an image to reduce the file size
decompressed image is identical to the original image
works well for simple graphic illustrations
works poorly for photographic images
e.g. DEFLATE

16. Lossless Compression Example #1
400 x 300 x 3 bytes / pixel = 360,000 bytes uncompressed
compressed using DEFLATE = 212,749 bytes
compression ratio 3:2 (poor!)

17. Lossless Compression Example #2
400 x 300 x 3 bytes / pixel = 360,000 bytes uncompressed
compressed using DEFLATE = 2,296 bytes
compression ratio 156:1 (excellent!)

18. Lossy Compression
exploits patterns / redundancies in the data of an image to reduce the file size
decompressed image is “almost” identical to the original image (depending on quality setting)
information is “lost” during compression
works poorly for simple graphic illustrations
works well for photographic images
e.g. JPEG (Joint Photographic Experts Group)

19. Lossy Compression Example #1
400 x 300 x 3 bytes / pixel = 360,000 bytes uncompressed
compressed using JPEG (quality = 50%) 16,144 bytes
compression ratio 22:1

20. Lossy Compression Example #2
400 x 300 x 3 bytes / pixel = 360,000 bytes uncompressed
compressed using JPEG (quality = 10%) 6,084 bytes
compression ratio 60:1

21. Lossy Compression Example #3
400 x 300 x 3 bytes / pixel = 360,000 bytes uncompressed
compressed using JPEG (q=10%) 2,819 bytes
compression ratio 128:1
worse compression ratio and quality than lossless!

22. Lossy Compression Artifacts #1

23. Lossy Compression Artifacts #2

24. Transparency
simple: for index images, one “colour” in the palette is designated as completely transparent
alpha channel: for true colour images, a fourth channel (in addition to red, green, and blue) is added representing the degree of transparency of the pixel ranging from 0 (completely transparent) to 255 (completely opaque)

25. Simple vs. Alpha Channel

26. Animation
for raster images, usually implemented as a collection of layers where each layer represents one frame of animation
each layer has a timing
layers can combine with or replace earlier layers
animation can loop

27. Animation example

28. File Formats Graphics Interchange Format (GIF)
Portable Network Graphics (PNG)
Joint Photographic Experts Group (JPEG)

29. GIF colour depths (mode): indexed (up to 256 colours)
compression: lossless
transparency: simple
Animation: supports animation frames per layer, frame timings, and looping

30. PNG colour depths (mode): bitmap, grayscale, true colour, indexed
compression: lossless
transparency: alpha channel
animation: not supported

31. JPEG colour depths (mode): grayscale, true colour compression: lossy
transparency: not supported
animation: not supported