Top Banner
SFDV2001 Lecture 10: Images and Colour Graphic Formats
30
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Lecture 10  Image Format

SFDV2001 Lecture 10: Images and Colour Graphic Formats

Page 2: Lecture 10  Image Format

Colour Perception of radiation – called light. There are many wavelengths/energy levels of

photons (wave-particle that is light).

Page 3: Lecture 10  Image Format

Our eyes

Two types of cells respond to light. Rods for intensity level and Cones for colour.

Page 4: Lecture 10  Image Format

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

Page 5: Lecture 10  Image Format

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

Page 6: Lecture 10  Image Format

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

Page 7: Lecture 10  Image Format

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.

Page 8: Lecture 10  Image Format

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

Page 9: Lecture 10  Image Format

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.

Page 10: Lecture 10  Image Format

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

Page 11: Lecture 10  Image Format

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

Page 12: Lecture 10  Image Format

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

Page 13: Lecture 10  Image Format

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

Page 14: Lecture 10  Image Format

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......

Page 15: Lecture 10  Image Format

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

Page 16: Lecture 10  Image Format

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

Page 17: Lecture 10  Image Format

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!!!!!!

Page 18: Lecture 10  Image Format

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.

Page 19: Lecture 10  Image Format

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.

Page 20: Lecture 10  Image Format

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

Page 21: Lecture 10  Image Format

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

Page 22: Lecture 10  Image Format

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

Page 23: Lecture 10  Image Format

GIF vs JPEG

Page 24: Lecture 10  Image Format

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.

Page 25: Lecture 10  Image Format

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>

Page 26: Lecture 10  Image Format

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

Page 27: Lecture 10  Image Format

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

Page 28: Lecture 10  Image Format

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

Page 29: Lecture 10  Image Format

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.

Page 30: Lecture 10  Image Format

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.