Date post: | 10-Dec-2015 |
Category: |
Documents |
Upload: | bailey-lamb |
View: | 220 times |
Download: | 2 times |
2.1Si23_03
SI23Introduction to Computer
Graphics
SI23Introduction to Computer
Graphics
Lecture 2 - Images
2.2Si23_03
Course OutlineCourse Outline
ImageDisplay
URLGIMP
colour
2D vectorgraphics
URL SVGViewer
lines,areas
graphicsalgorithms
interaction
VRMLviewer
3DGraphics
URL
surfaces
viewing, shading
GraphicsProgramming
OpenGLAPI
animation
2.3Si23_03
Course Outline – Images and Colour
Course Outline – Images and Colour
Image creation, manipulation and display
Colour
URLGIMP
colour
ImageDisplay
2.4Si23_03
Graphics Display Hardware -Cathode Ray
Tube
Graphics Display Hardware -Cathode Ray
Tube
phosphorcoatedscreen
electron beam
heated cathode
focus deflectionplates
Basic technology forworkstation screens is thecathode ray tube
Beam scans acrossscreen in seriesof lines - 60 times per second
2.5Si23_03
Colour Raster Scan DisplayColour Raster Scan Display
Colour CRTred
greenblue
metal mask
Colour composed ascombination of RED, GREEN, BLUE
2.6Si23_03
Colour Frame BuffersColour Frame Buffers
1
110
11
0Today most colour displayshave 24bit frame buffersor pixmaps.
So each pixel has a 24bitcolour value associatedwith it - 8 bits for R,G,B.
01101101 11011001 10011100
red gungreen gunblue gun
2.7Si23_03
Colour Look Up Table (CLUT)
Colour Palette
Colour Look Up Table (CLUT)
Colour Palette
8-bit frame buffer 1 0 1 0 0 1 1 1 Pixel value (=167)
167
.
.
11001100 10110110 11011100
.
...
.
.
.
...
.
...
red green blue
24-bit colour table
Pixel value acts as an index into the look up table. Thisallows 256 (=28) on-screen colours from a palette of 16.7 million
To save on memory costs, some displays use a look-up table …
2.8Si23_03
Gamma CorrectionGamma Correction
For CRT displays, brightness is not a linear function of the drive signal
Instead it is related by:Brightness = (Signal)
Typical value for is 2.2 Thus displays will provide ‘gamma
correction’ of the red, green and blue signals to give the expected uniform effect
Note: assumes signal in range [0,1]
2.9Si23_03
HomeworkHomework
How does colour work for LCD displays??
2.10Si23_03
ImagesImages
We can generate images in a variety of ways…
… and we can subsequently process them in order to …
The GIMP will help us do many of these things
Fill in the answers!
2.11Si23_03
Image FormatsImage Formats
Large number of formats have emerged over the years
Why? Which are in
common use? Use a couple of
test pictures
2.12Si23_03
Silicon Graphics RGB Format
Silicon Graphics RGB Format
File begins with a header which has the following information:
– xsize, ysize - dimensions of image– zsize : 1 for 8-bit (colour index); 3 for 24-bit
colour– colour map flag: indicates image or colour
map
The rest of the file contains the data– for 8-bit, each pixel represented as 1 byte, so
there are ysize scan lines, each of xsize bytes– for colour, three single images (for R, G, B)
are stored, one after the other.
2.13Si23_03
Image SizesImage Sizes
The picture of Bank’s Peninsula is 2472 by 1704 pixels
– as RGB image it is 12 Mbytes
The diagram with the square is 256 by 256 pixels
– As RGB image it is 193k bytes
2.14Si23_03
Compression - RLECompression - RLE
Consider the triangleon right.Suppose 0 representsblack and 1 representswhite.
The image file will look like, for each scan line:000000000000111111111111110000000000
It would be more efficient to store as ‘runs’ of pixel values:12*0,14*1,10*0
This is known as Run Length Encoding (RLE)and is an option in the RGB image file specification.
2.15Si23_03
RLE CompressionRLE Compression
The NZ photo reduces from 12 Mbytes to 9.5 with RLE compression
Is this what you’d expect?
The square reduces from 193k to 13k with RLE compression
Is this what you’d expect?
2.16Si23_03
Image FormatsImage Formats
RGB is one of a large number of image formats – MS Windows bitmap for PC applications
(BMP format)– GIF, JPEG, PNG are widely used across
different platforms RLE is just one of a number of
compression techniques - different formats use different compression methods
2.17Si23_03
Image Formats - GIFImage Formats - GIF
GIF (Graphics Interchange Format)– probably the most common image format – developed by CompuServe Inc – 8 bit colour indices point to entries in a
colour table of size 256– thus in uncompressed form, we have
header comprising colour table, followed by rows of data, one byte per pixel
– rows stored as 0,8,16,..; 4,12,20,..; 2,6,10,..; 1,3,5,... this interlacing gives progressive image display
– 24 bit colour images not supported– Animated GIFs a very useful feature (used
with care)
2.18Si23_03
LZW CompressionLZW Compression
GIF uses the LZW (Lempel-Ziv-Welch) compression technique which has been subject of frequent legal battles -UNISYS and CompuServe claim to have patented it (so not supported fully in Windows GIMP)
Dictionary-based– frequently occurring patterns of data are
identified and given code words which are shorter than the original pattern
For normal images, typically better than RLE; not good on noisy images (neither is RLE)
For file size comparison, see PNG later
2.19Si23_03
Image Formats - PNGImage Formats - PNG
PNG = Portable Network Graphics
Created as a successor to GIF, free of legal restrictions
Defined as a Web standard by W3C
.. And better than GIFs!
Key features:– Transparency– Gamma correction– Text– Interlacing– Filtering– Compression
2.20Si23_03
PNG FeaturesPNG Features
Transparency– Alpha channel in
addition to RGB
Gamma Correction
– Store the gamma value at creation
– Correct at display time
– Can you work out the correction formula?
2.21Si23_03
PNG FeaturesPNG Features
Text– Why would it be
useful to associate text with an image?
Interlacing– 2d interlacing– 7 passes (Adam7)– Why is this
useful?
2.22Si23_03
PNG FeaturesPNG Features
Filtering– Simple operator
to promote good compression
– Eg sub filter replaces pixel values on scan line, with differences from predecessor
Compression– Uses LZ77
approach (recall from SI11)
– Plus Huffman encoding (also from SI11)
– Used in gzip
Encoding is: interlace, filter, compress
2.23Si23_03
ExampleExample
NZ photo does not compress particularly well
– Uncompressed 12 MB
– RLE 9.5 MB– PNG 4 MB
Square compresses outstandingly well
– Uncompressed 193 kB
– RLE 13 kB– PNG 1 kB
2.24Si23_03
Image Formats - JPEG File Interchange Format (JFIF)Image Formats - JPEG File Interchange Format (JFIF)
Developed as an international standard interchange format using a compression method developed by Joint Photographic Experts Group (JPEG)
Supports 24 bit colour, or greyscale – but not palette
Copes with noisy data, so can handle scanned images
2.25Si23_03
JPEG CompressionJPEG Compression
Discrete Cosine Transform (DCT) applied to 8x8 subblocks of image– DCT transforms data values to a new
set of 64 data items (in a frequency space)
– ordered in importance (1st value represents average over subblock, etc, values at end represent high frequency, ie noise)
– ‘safe’ to discard these noise terms and store only the early terms from the DCT
2.26Si23_03
JPEG CompressionJPEG Compression
Resulting values are then compressed using Huffman encoding
Free of any legal problems Known as lossy compression,
because we cannot recreate exact original image (cf RLE and LZW which are lossless)
2.27Si23_03
JPEG Quality ControlJPEG Quality Control
JPEG allows user to tune the quality of encoding by a ‘quality setting’– corresponds to ignoring values in the
DCT– Q-factor from 0 to 100 (100 = high
quality) Suggested technique:
– encode using Q factor of 75%, decode and redisplay
– if defects seen, increase Q and re-encode
– if acceptable, decrease Q until just acceptable
2.28Si23_03
ExampleExample
For the NZ photograph, we have outstanding compression
– Uncompressed 12MB
– RLE 9.5MB– JPEG 339kB
2.29Si23_03
Image Transfer across WWW
- Summary
Image Transfer across WWW
- Summary
GIF format still predominates – lossless, 8-bit palette-based, LZW
compression, legal status in doubt, supported by all browsers
PNG– lossless, 8-bit palette or 24 bit colour, non-
patented compression, transparency, gamma correction, 2d interlacing, filtering
JPEG– lossy, 24-bit, non-patented compression
Choice:– PNG for synthetic images– JPEG for photographic images
2.30Si23_03
Reading MoreReading More
The source of PNG information– http://www.w3.org/Graphics/PNG/
Test your browser support for PNG transparency– http://trific.ath.cx/web/png/
What is difference between GIF87a and GIF89a?