SFDV2001 Lecture 10: Images and Colour Graphic Formats
Jan 13, 2015
SFDV2001 Lecture 10: Images and Colour Graphic Formats
Colour Perception of radiation – called light. There are many wavelengths/energy levels of
photons (wave-particle that is light).
Our eyes
Two types of cells respond to light. Rods for intensity level and Cones for colour.
Artificial Colours Every colour we see can
be composed of these three colours.
TV's have Red Green and Blue Phosphors
Sound is made up of combinations of Frequencies so we can make those
Subtractive Colour At school the primary
colours were Red Yellow and Blue. These are subtractive
colour, as paint absorbs light.
Printers use Cyan Magenta and Yellow as subtractive colours.
Opponent colour model.
Additive ColourAdding red green and blue together gives the impression of white light
Binary In binary the number of positions you have tells
you how many quantities you can represent Binary represents everything with just two
symbols and position People “sitting or standing” can be in various
configurations, how many can 3 people make? Largest number with 2 digits
9910
= 9910
= 9*10 + 9*1
FF16
= 25510
= F(15)*16 + F(15)*1
112
= 310
= 1*2 + 1*1
Important numbers 8 binary digits (bits)= 256 possible values
8 bits are one Byte.
Very important to computers. Other numbers
KB = KiloByte = 1,024 Bytes MB = MegaByte = 1, 048, 567 Bytes
1 Byte describes 256 values.
Hexadecimal Hexadecimal - base 16 Ran out of numbers so they used the first
letters of the alphabet. A-F. A= 10, B=11, C=12, D=13, E=14, F=15
A716
= A*16 + 7*1 = 16710
Hexadecimal to binary easy 1 hex digits = 4 bits 2 hex digits = 8 bits = 1 byte
Hex and Colour We represent colours with a number of bits. Bit Depth
Bit depth is many bits per pixel. Common now is 8 bits per colour = 256 levels for each
colour. 3 colours per pixel = 256*256*256 = 16,777,216
RGB = red green blue 2 Hex digits per colour
Red = FF0000 Green = 00FF00 Blue = 0000FF.
Raw images Huge Digital cameras with 5 Megapixel resolution 2739 x 1825 pixels = 10 x screen (800x600) Raw = 15MB file Stupid to send files this size Compress the files
Pixels – 450x300 is large enough for the screen Representation
11/09/07 Images & Colour 11
Image Descriptions Two types
Raster images (bit mapped) Vector images (descriptions)
Raster Photographs are raster images. Painting programs usually make raster graphics.
Vector Drawing programs make shapes and edit them. True type fonts are defined by vectors and curves. Flash on the web is done with vectors
Compression Lossless:
a→b, b c, a = c Lossy:
a→b, b c, a ≠ c Concepts:
Throw away unnecessary information Remove redundancy Resolution and size
Lossless Makes the file smaller without losing data. Information Science
How to represent information. What compression is possible without loss of signal. Maximum information from minimum data. What about noise?
Zip compression for windows. Works well for text, but badly for JPEGs etc
IndexOne fish Two fishRed fish Blue fish.
Black fish Blue fishOld fish New fish.
This one has a little star.This one has a little car.Say! What a lot of fish there are.
Reduce redundancy Create a dictionary and
use indices instead of words
Transmit dictionary with document
LZW - Auto-generates the dictionary
Could almost see CSS as index to styles
Dictionary1=One, 2=fish, 3=Two, 4=Red, 5=Blue, 6=Black, 7=Old, 8=New, 9=This, .......
1.2.3.2.4.2.5.2.6.2.5.2.7.2.8.2.9.1.10......
Run Length encoding If any number is repeated a lot write down the
number and then the repeats
Does not work if there is noise in the image, like photographs
1,1,1,1,1,1,1,1,1,2,2,2,2,2,4,4,2,2,1,1,1,1,1,1
1,9,2,5,4,2,2,2,1,6
1x9, 2x5, 4x2, 2x2, 1x6
Raster Scaling the image is ugly Describes each pixel Most web graphics are still
raster graphics. jpeg, gif, png, bmp Scale is important Each pixel often 24 bit
colour
000000011111110000000000001100000001100000000010000000000010000001100000000000001100001000000000000000100010001110000011100010100001010000010100001....
A one bit colour image
BMP Bit Mapped Picture. Uncompressed. Colour
Various colour depth. 3 bytes per pixel is millions of colours
Huge file size. You should not use BMP!!!!!!
GIF CompuServe Good:
Crisp block images, fixed colours. Cartoons, Logos, CG images.
Bad: Smooth shaded objects with smooth edges. Photos.
Palletise 16.8 million possible colours in the image 256 most common colours and make an index. Each pixel is now 1 byte (an 8 bit number that
refers to the index) instead of 3.
GIF (cont.)
LZW compression as well Total savings usually about a factor of 4.
One index spot reserved for "transparency." Animation
Have more than one image in the file Replace the whole or part of the image Run in a sequence
PNG better, but not as well supported.
PNG Portable Network Graphics or Picture Not GIF Good and Bad are the same as GIF. Response to GIF patent issues. Colour table can include all of the colours up to
24-bit colour. Completely Lossless –
Compression without loss of data Similar to LZW compression Graduated transparency, up to 256 levels Firefox and IE support PNG now
Transparency still an issue
JPEG Joint Photographic Experts Group. Good:
Smooth shaded objects with blurry edges. Photos. Bad:
Crisp block images fixed colours. Cartoons. How it works
Uses knowledge about how the eye sees to compress the image.
Uses the Discrete Cosine Transformation (DCT) to convert to frequency information and throw away sharp frequencies.
8x8 blocks in the image
JPEG Lossy compression – choose how much to
throw away.
JPG not designed for this sort of image Notice the blocky patches
20%PNG 2%100%SVG
JPEG
0.72 3.52 9.67 3.52 0.76
GIF vs JPEG
Why not just JPEG No transparency. The compression is "lossy"; i.e. you can't get
back what you throw away. Colours "bleed" esp. on straight edges. Compression not very effective on blocky
computer generated images. Other alternatives gif and png, and possibly
vector graphics.
Vector Images Describes the image Very good for scaling. Easily controlled and animated. Easy to generate from programs.
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 100 100"> <title>Demonstration of SVG with a smile</title> <circle cx="30" cy="30" r="28" fill="none" stroke="blue" stroke-width="1" /> <circle cx="20" cy="22" r="3" fill="skyblue" stroke="black" stroke-width="1" /> <circle cx="40" cy="22" r="3" fill="skyblue" stroke="black" stroke-width="1" /> <path d="M 15,38 a20,20 0 0,0 30,0" style="fill:none; stroke:red; stroke-width:1" /></svg>
SVG Scalable Vector Graphics XML format. Supported in Firefox – Not IE6. Can be animated and/or made to respond to
user input using Javascript. Lots of primitive shapes
'rect', 'circle', 'ellipse', 'polygon' 'line', 'polyline' Path – arbitrary stuff Attributes and style information
Flash Initially entirely vector graphics. Including bitmaps as objects. In version 8 per-pixel operations. Requires a plug-in to run. Very pretty sites Usability issues slowly being overcome Massive amount to learn
Flash has a lot of structure and internal information Scripting and interaction takes time to learn Not covered in this course
Adding Images
Work out the size of your page + images Work out how long that will take to load across
a 56K modem If it's longer than 30 seconds, that's too long Mobile phones
Vodafone 1c per K Telecom 5c per K (authorised 1c per K)
<img> tag src – the location of the picture alt – the alternative name if the image is missing
CSS Image position and display controlled with CSS
Downloading Size of image:
200 pixels x 200 pixels, 40,000 pixels with 3 bytes per pixel = 120,000 Bytes
= 120KB Modem maximum = 56Kbits / second
= 7KBytes / second 120KB / 7KB/s = 17 seconds to download basically uncompressed files are big.
11/09/07 (SFDV2001:14)Graphic Formats 30
Summary Use the right format for an image
Photo = JPEG Cartoon = GIF or PNG
Think about file size. Think about image size
Reducing width and height to 1/x original size reduces number of pixels to 1/x2.
Think about resolution. Think about ownership
Ethics lecture.