Transcript Bitmapped Images

Bitmapped Images
Chapter 5
Nigel Chapman & Jenny Chapman
5
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, …
118
5
Most Popular Formats
•
•
Dozens of Formats, but 3 that matter
GIF – Graphics Interchange Format
•
•
JPEG - Joint Photographic Experts Group
•
•
Developed by CompuServe 1987
Standard 1992
PNG – Portable Network Graphics
•
1996
5
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)
•
•
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)
5
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
5
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.
5
PNG Story
•
Lossless compression (like GIFs) but superior
colors 24-bit OR 8-bit.
•
•
Better compression for flat color graphics
compared to JPEG
•
•
PNG much better for photographic images
than GIF
PNG much better for line art, logos, etc than
JPEG
Plus, support for layers and vector data.
5
PNG should replace GIF
with one exception
•
GIF excels at compressing flat color images
•
•
8-bit PNG format supports variable
transparency;
•
•
But so does 8-bit PNG
GIF only supports flat transparency
But, GIF support embedded animation
•
PNG has no animated format
5
PNG will not replace JPG
•
JPG excels at compressing photo realistic
images (hi-res 3200+ X 2400+)
•
•
JPG is not good at flat color compression
•
•
24-bit PNG is good but not as good
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.
5
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
118–119
5
Device Resolution
•
What is the best resolution display you can buy
for under $3000?
5
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
5
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
5
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
5
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)
122–125
5
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
125–126
5
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
125–127
5
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
5
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)
127
5
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
128
5
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
5
Image Manipulation
•
•
Many useful operations described by analogy
with darkroom techniques for altering photos
Correct deficiencies in image
•
•
Create artificial effects
•
•
Remove 'red-eye', enhance contrast,…
Filters: stylize, distort,…
Geometrical transformations
•
Scale (change resolution), rotate,…
130
5
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
131–132
5
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 (semitransparent mask) – alpha channel
•
•
Feathered and anti-aliased selections
Use as layer mask to modify layer
compositing
5
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)
5
136–139
Adjustments in Photoshop
•
Brightness and contrast sliders
•
•
Levels dialogue
•
•
•
Adjust slope and intercept of linear f
Adjust endpoints by setting white and black
levels
Use image histogram to choose values visually
Curves dialogue
•
Interactively adjust shape of graph of f
5
Pixel Group Processing
•
Compute new value for pixel from its old value
and the values of surrounding pixels
•
•
Compute weighted average of pixel values
•
•
•
Filtering operations
Array of weights k/a convolution mask
Pixels used in convolution k/a convolution
kernel
Computationally intensive process
139–142
5
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
5
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
144–147
5
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
5
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
150–151