1. Nigel Chapman & Jenny Chapman
Bitmapped Images
Chapter 5
Nigel Chapman & Jenny Chapman

2. Bitmapped Images Also known as raster graphics
118
Bitmapped Images
Also known as raster graphics
Record a value for every pixel in the image
Often created from an external source
Scanner, digital camera, …
Painting programs allow direct creation of images with analogues of natural media, brushes, …

3. Most Popular Formats Dozens of Formats, but 3 that matter
GIF – Graphics Interchange Format
Developed by CompuServe 1987
JPEG - Joint Photographic Experts Group
Standard 1992
PNG – Portable Network Graphics
1996

4. GIF (.gif) Maximum Colors: 8-bit  256 Great for
Icons, Logos, and Line Art
Basic graphics
Flat Colors
First format supported by browsers
RLE: Run length encoding (Lossless Compression) LZ77 Algorithm.

5. JPEG (.jpg) Hi-resolution Photographs
Maximum Colors: 24-bit  16.7 million
Great for
Hi-resolution Photographs
Images with subtle color graduation
Variation of RLE: Compresses groups of pixels into a single unit (Lossy Compression)

6. PNG (.png) Maximum Colors: 24-bit  16.7 million Great for
Mixed images: Photos with graphics
Photos with transparency
Developed specifically for the web.
Lossless compression
Variable transparency
Can store vector and object info for editing

7. PNG Story In the early days of the web…
There were few graphics tools that supported PNG format
People forgot about it
PNG was completely forgotten
Not supported by many browsers
Thus, no proliferation of PNG files.

8. PNG Story
Lossless compression (like GIFs) but superior colors 24-bit OR 8-bit.
PNG much better for photographic images than GIF
Better compression for flat color graphics compared to JPEG
PNG much better for line art, logos, etc than JPEG
Plus, support for layers and vector data.

9. PNG should replace GIF with one exception
GIF excels at compressing flat color images
But so does 8-bit PNG
8-bit PNG format supports variable transparency;
GIF only supports flat transparency
But, GIF support embedded animation
PNG has no animated format

10. PNG will not replace JPG
JPG excels at compressing photo realistic images (hi-res X 2400+)
24-bit PNG is good but not as good
JPG is not good at flat color compression
PNG handles flat color much better
Overall, JPG might be better for very large photos.
PNG is certainly better for mixed images and medium to low resolution.

11. 118–119
Device Resolution
Printers, scanners: specify as dots per unit length, often dots per inch (dpi)
Desktop printer 600dpi, typesetter 1270dpi, scanner 300–3600dpi,…
Video, monitors: specify as pixel dimensions
PAL TV 768x576px,
17” CRT monitor 1024x768px
19”-20” LCD monitor 1280x1024px
dpi depends on physical size of screen

12. Device Resolution
What is the best resolution display you can buy for under $3000?

13. 120
Image Resolution
Array of pixels has pixel dimensions, but no physical dimensions
By default, displayed size depends on resolution (dpi) of output device
physical dimension = pixel dimension/resolution
Can store image resolution (ppi) in image file to maintain image's original size
Scale by device resolution/image resolution

14. 120–122
Changing Resolution
If image resolution < output device resolution, must interpolate extra pixels
Always leads to loss of quality
If image resolution > output device resolution, must downsample (discard pixels)
Quality will often be better than that of an image at device resolution (uses more information)
Image sampled at a higher resolution than that of intended output device is oversampled

15. 122–123
Compression
Image files may be too big for network transmission, even at low resolutions
Use more sophisticated data representation or discard information to reduce data size
Effectiveness of compression will depend on actual image data
For any compression scheme, there will always be some data for which 'compressed' version is actually bigger than the original

16. 122–125
Lossless Compression
Always possible to decompress compressed data and obtain an exact copy of the original uncompressed data
Data is just more efficiently arranged, none is discarded
Run-length encoding (RLE)
Huffmann coding
Dictionary-based schemes – LZ77, LZ78, LZW (LZW used in GIF, licence fee charged)

17. 125–126
JPEG Compression
Lossy technique, well suited to photographs, images with fine detail and continuous tones
Consider image as a spatially varying signal that can be analysed in the frequency domain
Experimental fact: people do not perceive the effect of high frequencies in images very accurately
Hence, high frequency information can be discarded without perceptible loss of quality

18. DCT Discrete Cosine Transform
125–127
DCT
Discrete Cosine Transform
Similar to Fourier Transform, analyses a signal into its frequency components
Takes array of pixel values, produces an array of coefficients of frequency components in the image
Computationally expensive process – time proportional to square of number of pixels
Apply to 8x8 blocks of pixels

19. JPEG – Quantization Applying DCT does not reduce data size
127
JPEG – Quantization
Applying DCT does not reduce data size
Array of coefficients is same size as array of pixels
Allows information about high frequency components to be identified and discarded
Use fewer bits (distinguish fewer different values) for higher frequency components
Number of levels for each frequency coefficient may be specified separately in a quantization matrix

20. 127
JPEG – Encoding
After quantization, there will be many zero coefficients
Use RLE on zig-zag sequence (maximizes runs)
Use Huffman coding of other coefficients (best use of available bits)

21. 128
JPEG – Decompression
Expand runs of zeros and decompress Huffman-encoded coefficients to reconstruct array of frequency coefficients
Use Inverse Discrete Cosine Transform to take data back from frequency to spatial domain
Data discarded in quantization step of compression procedure cannot be recovered
Reconstructed image is an approximation (usually very good) to the original image

22. Compression Artifacts
129
Compression Artifacts
If use low quality setting (i.e. coarser quantization), boundaries between 8x8 blocks become visible
If image has sharp edges these become blurred
Rarely a problem with photographic images, but especially bad with text
Better to use good lossless method with text or computer-generated images

23. 130
Image Manipulation
Many useful operations described by analogy with darkroom techniques for altering photos
Correct deficiencies in image
Remove 'red-eye', enhance contrast,…
Create artificial effects
Filters: stylize, distort,…
Geometrical transformations
Scale (change resolution), rotate,…

24. Selection No distinct objects (contrast vector graphics)
131–132
Selection
No distinct objects (contrast vector graphics)
Selection tools define an area of pixels
Draw selection (pen tool, lasso)
Select regular shape (rectangular, elliptical, 1px marquee tools)
Select on basis of colour/edges (magic wand, magnetic lasso)
Adjustments &c restricted to selected area

25. Masks Area not selected is protected, as if masked by stencil
132–135
Masks
Area not selected is protected, as if masked by stencil
Can represent on/off mask as array of 1 bit per pixel (b/w image)
Generalize to greyscale image (semi- transparent mask) – alpha channel
Feathered and anti-aliased selections
Use as layer mask to modify layer compositing

26. Pixel Point Processing
136
Pixel Point Processing
Compute new value for pixel from its old value
p' = f(p), f is a mapping function
In greyscale images, ppp alters brightness and contrast
Compensate for poor exposure, bad lighting, bring out detail
Use with mask to adjust parts of image (e.g. shadows and highlights)

27. Adjustments in Photoshop
136–139
Adjustments in Photoshop
Brightness and contrast sliders
Adjust slope and intercept of linear f
Levels dialogue
Adjust endpoints by setting white and black levels
Use image histogram to choose values visually
Curves dialogue
Interactively adjust shape of graph of f

28. Pixel Group Processing
139–142
Pixel Group Processing
Compute new value for pixel from its old value and the values of surrounding pixels
Filtering operations
Compute weighted average of pixel values
Array of weights k/a convolution mask
Pixels used in convolution k/a convolution kernel
Computationally intensive process

29. Blurring Classic simple blur Convolution mask with equal weights
142–144
Blurring
Classic simple blur
Convolution mask with equal weights
Unnatural effect
Gaussian blur
Convolution mask with coefficients falling off gradually (Gaussian bell curve)
More gentle, can set amount and radius

30. Sharpening Low frequency filter
144–147
Sharpening
Low frequency filter
3x3 convolution mask coefficients all equal to -1, except centre = 9
Produces harsh edges
Unsharp masking
Copy image, apply Gaussian blur to copy, subtract it from original
Enhances image features

31. Geometrical Transformations
148–150
Geometrical Transformations
Scaling, rotation, etc.
Simple operations in vector graphics
Requires each pixel to be transformed in bitmapped image
Transformations may 'send pixels into gaps'
i.e. interpolation is required
Equivalent to reconstruction & resampling; tends to degrade image quality

32. Interpolation Nearest neighbour
150–151
Interpolation
Nearest neighbour
Use value of pixel whose centre is closest in the original image to real coordinates of ideal interpolated pixel
Bilinear interpolation
Use value of all four adjacent pixels, weighted by intersection with target pixel
Bicubic interpolation
Use values of all four adjacent pixels, weighted using cubic splines