COMPSCI 111 / 111G Mastering Cyberspace: An introduction to - - PowerPoint PPT Presentation

Digital Images Vector Graphics

COMPSCI 111 / 111G

Mastering Cyberspace: An introduction to practical computing

“One picture is worth more than ten thousand words”

• Anonymous

Learning Outcomes

Students should be able to:

– Understand the history of digital images – Describe the differences between bitmap graphics and vector graphics – Calculate the size in bytes of a bitmap image – Compare and contrast different compression methods (jpeg, gif and png)

27/04/18 3 COMPSCI 111/111G - Digital Images

What is a Digital Ima mage?

• A digital image is a representation of a two-dimensional

image as a finite set of digital values, called picture elements or pixels

In What Form m is a Digital Ima mage Stored?

• Common image formats include:

– 1 sample per point (grayscale) – 3 samples per point (Red, Green, and Blue) – Video (above information plus time)

What is Digital Ima mage and Video Pr Processing?

• Digital image (and video) processing focuses on two major tasks

– Improvement of pictorial information for human interpretation – Processing of image data for storage, transmission and representation for autonomous machine perception

• Some argument about where image processing ends and fields

such as image analysis and computer vision start !

What is DIP? P? (cont…)

• The continuum from image processing to computer vision

can be broken up into low-, mid- and high-level processes

Low Level Process Input: Image Output: Image Examples: Noise removal, image sharpening Mid Level Process Input: Image Output: Attributes Examples: Object recognition, segmentation High Level Process Input: Attributes Output: Understanding Examples: Scene understanding, autonomous navigation In this course we will stop here

History of Digital Ima mage Pr Processing

• Early 1920s: One of the first applications of digital

imaging was in the newspaper industry

– The Bartlane cable picture transmission service – Images were transferred by submarine cable between London and New York – Pictures were coded for cable transfer and reconstructed at the receiving end

• n a telegraph printer

Early digital image

History of DIP P (cont…)

• Mid to late 1920s: Improvements to the Bartlane system

resulted in higher quality images

– New reproduction processes based

• n photographic

techniques – Increased number

• f tones in

reproduced images Improved digital image Early 15 tone digital image

History of DIP P (cont…)

• 1960s: Improvements in computing technology and the
• nset of the space race led to a surge of work in digital

image processing

– 1964: Computers used to improve the quality of images of the moon taken by the Ranger 7 probe – Such techniques were used in other space missions including the Apollo landings A picture of the moon taken by the Ranger 7 probe minutes before landing

History of DIP P (cont…)

• 1970s: Digital image processing begins to be used in

medical applications

– 1979: Sir Godfrey N. Hounsfield & Prof. Allan M. Cormack share the Nobel Prize in medicine for the invention of tomography, the technology behind Computerised Axial Tomography (CAT) scans Typical head slice CAT image

My history with digital images

• Got my first digital camera in 1996
• Casio QV10
• Only 2000 Kilo pixels !!!
• Changed my use of photography

1/05/18 COMPSCI 111/111G - Digital Images 12

My father – Aug 1996

1/05/18 COMPSCI 111/111G - Digital Images 13

Bitmap Graphics

Storing pictures digitally

– Sample the image (divide into dots) – Image resolution (number of dots) 200 x 250 40 x 50 20 x 25 http://en.wikipedia.org/wiki/Raster_graphics

27/04/18 14 COMPSCI 111/111G - Digital Images

Black and White pictures

Digital Pictures consist of small dots

– Each dot is called a picture element (pixel)

Storing information

– Black and White are only two states – Use bits to represent pixels (0 = OFF, 1 = ON) – One to one mapping, so known as Bitmap 1 1 1 1 1 0 0 1 1 1 1 1 1 1 0 0 1111100110011111 http://en.wikipedia.org/wiki/Pixel

27/04/18 15 COMPSCI 111/111G - Digital Images

Displaying images

Images are displayed on an output device

– Screen / Printer – Physical devices have limitations Screen Printer Very small dots Large dots

27/04/18 16 COMPSCI 111/111G - Digital Images

Resizing bitmap images

27/04/18 COMPSCI 111/111G - Digital Images 17

Resizing images

Image information with given resolution

– 8 x 6 pixels Sampled at higher resolution 16 x 12 Sampled at lower resolution 4 x 3

27/04/18 18 COMPSCI 111/111G - Digital Images

Printing Bitmaps

Printer and Screen have different sized dots

– Scale (resample) the bitmap to ensure it looks good on both Printer Printer resolution 600 or 1200 dpi On disk On screen Screen resolution 72 dpi

27/04/18 19 COMPSCI 111/111G - Digital Images

Exercises

Imagine you have taken a picture with a 4 megapixel digital

• camera. For ease of calculation, assume that the picture is

square, not rectangular. Assume that you are printing this picture out on a printer that has approximately 4000 dots per inch. How many inches across would the picture be when it was printed?

• 4,000,000 = 2000 * 2000

Therefore the picture would take up 0.5 by 0.5 inches. If you viewed this image on a screen that had 1000 dots across, what portion of the image would be visible?

• You would see ½ the width and ½ the height.
• Therefore you would see: ½ * ½ = ¼ of the image

4 million pixels

27/04/18 20 COMPSCI 111/111G - Digital Images

Colour Bitmaps

Colours

– Use more than 1 bit per pixel – Map the binary number to a colour 1100 0010 1111 1111 1010 0101 0010 1111 1000 0111 0000 1101 0110 1111 1110 1010 Each pixel uses 4 bits

Bits Colour 0000 Black 0001 Red 0010 Green 0011 Blue 0100 Yellow … …

Colour table used for display

27/04/18 21 COMPSCI 111/111G - Digital Images

How much memory is required?

One binary number used for each pixel

– 1 bit 2 colours – 2 bits 4 colours – 4 bits 16 colour – 8 bits 256 colours – 16 bits 65536 colours – 24 bits 16,777,216 colours

How many bits are required for a 16 colour image 100 pixels wide x 8 pixels high? – 100x8x4 = 3200 bits = 400 bytes An image using 24 bit colour, 1000 wide x 1000 high (1 Megapixel)?

– 3 MB

27/04/18 22 COMPSCI 111/111G - Digital Images

Exercises

• How many colours can be represented by 3 bits?
• 23 = 8 colours
• How many bits are required to represent 128 different colours?
• 128 = 27. Therefore 7 bits are required.
• How much memory would be required to store a black and white

image that is 10 pixels high and 5 pixels wide? Show your working.

• Number of colours = 21. Therefore 1 bit is required per pixel.

Number of pixels = h * w = 10 * 5 = 50 Memory needed = 50 * 1 = 50 bits

27/04/18 23 COMPSCI 111/111G - Digital Images

Exercises

• How much memory (in bytes) would be required to store an

image that has 256 different colours and is 3 pixels high and 5 pixels wide? Show your working.

• Number of colours = 256 = 28. Therefore 8 bits or 1 byte are

required per pixel. Number of pixels = h * w = 3 * 5 = 15 Memory needed = 15 * 1 = 15 bytes

27/04/18 COMPSCI 111/111G - Digital Images 24

Displays

Screens use a combination of Red, Green and Blue lights

– RGB colour

Use one byte (8 bits) for each colour

– 256 different levels of red brightness – 256 different levels of green brightness – 256 different levels of blue brightness A single pixel at distance A single pixel close up

27/04/18 25 COMPSCI 111/111G - Digital Images

Compressing Images

Simply reducing number of colours Image is 200 pixels wide, 200 pixels high = 40,000 pixels

31,942 colours 75 KB 256 colours 40 KB 16 colours 20 KB

27/04/18 26 COMPSCI 111/111G - Digital Images

Compression Algorithms

Graphics Interchange Format (GIF)

– Lossless method – 256 colours – Good for graphics, poor for photos – Uses an algorithm that was patented Image Size: 200x200 Original (256 colours): 40KB GIF (256 colours): 32KB Image Size: 200x100 Original (256 colours): 20KB GIF (256 colours): 3KB http://en.wikipedia.org/wiki/Gif

27/04/18 27 COMPSCI 111/111G - Digital Images

Compression Algorithms

Portable Network Graphics (PNG)

– Replacement to GIF – Lossless method – 16 million colours (24 bit) – Good for graphics, poor for photos Image Size: 200x200 Original (16M colours): 120KB PNG (16M colours): 68KB Image Size: 200x100 Original (256 colours): 20KB PNG (16M colours): 4KB http://en.wikipedia.org/wiki/Png

27/04/18 28 COMPSCI 111/111G - Digital Images

Compression Algorithms - JPEG

Joint Photographic Experts Group (JPEG)

– Lossy method – 16 Million colours (24 bit) – Averages nearby colours – Different degrees of compression – Good for photos, poor for graphics

Image Size: 200x200 Original: 120KB JPEG (50%): 6KB Image Size: 200x200 Original: 120KB JPEG (99%): 2KB Image Size: 200x100 Original: 60KB JPEG (50%): 5KB

http://en.wikipedia.org/wiki/jpeg

27/04/18 29 COMPSCI 111/111G - Digital Images

Vector Graphics

Object-oriented graphics

– Objects created independently – Defined by mathematical formulae

Advantages

– Very small memory requirements – Memory independent of the image size – Scale to any size without loss of quality Object Type: Square Height: 100 Width: 100 Position_X: 354 Position_Y: 289 Fill Colour: Light Blue http://en.wikipedia.org/wiki/Vector_graphics

27/04/18 30 COMPSCI 111/111G - Digital Images

Bitmap and Vector Graphics

Bitmap .gif, .jpg, .png Vector Graphics .svg

27/04/18 31 COMPSCI 111/111G - Digital Images

Scalable Vector Graphics

Format for representing vector graphics images

– Open standard created by W3C – New, gaining popularity – XML, text file similar to HTML

<?xml version="1.0" encoding="utf-8" standalone="yes"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/ svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="520" height="520"> <style type="text/css"> <![CDATA[ text{font-size:362px;font- weight:bold;font-family:"Times New Roman", serif} #P0 {fill:#d4a000;stroke:#000;stroke-width:9} #P1 {fill:url(#tl)} #P2 {fill:url(#bl)} #P3 {fill:url(#br)} #P4 {fill:url(#tr)} ]]> </style> <defs> <linearGradient id="dk"> <stop/> <stop style="stop-opacity:0" offset="1"/> </linearGradient> <linearGradient id="lt"> <stop style="stop-color:#ffe681"/> <stop style="stop-color:#ffe681;stop-opacity:0" offset="1"/> </ linearGradient> <linearGradient x1="136.4" y1="136.4" x2="167.5" y2="167.5" id="tl" xlink:href="#lt" gradientUnits="userSpaceOnUse"/> <linearGradient x1="136.4" y1="383.6" x2="167.5" y2="352.5" id="bl" xlink:href="#lt" gradientUnits="userSpaceOnUse"/> <linearGradient x1="383.6" y1="383.6" x2="352.5" y2="352.5" id="br" xlink:href="#dk" gradientUnits="userSpaceOnUse"/> <linearGradient x1="383.6" y1="136.4" x2="352.5" y2="167.5" id="tr" xlink:href="#dk" gradientUnits="userSpaceOnUse"/> </defs> <path id="P0" d="M260,6.3L 6.3,260L 260,513.7L 513.7,260L 260,6.3z"/> <text y="380" x="200">!</text> <path id="P1" d="M260,12.7L 260,75L 75,260L 12.7,260L 260,12.7z"/> <path id="P2" d="M260,507.3L 260,445L 75,260L 12.7,260L 260,507.3z"/> <path id="P3" d="M260,507.3L 260,445L 445,260L 507.3,260L 260,507.3z"/> <path id="P4" d="M260,12.7L 260,75L 445,260L 507.3,260L 260,12.7z"/> </svg>

http://en.wikipedia.org/wiki/Svg

27/04/18 32 COMPSCI 111/111G - Digital Images

Key Stages in Digital Ima mage Pr Processing

Image Acquisition Image Restoration Image Compression Morphologica l Processing

Object Recognition

Image Enhancement

Segmentation

Real life scene Colour Image Processing Representatio n & Description Image Modelling (Transforms)

Summary

Bitmap Images

• Pixel width x pixel height = resolution
• Use numbers to encode colour of each pixel (more colours =

more bits per pixel)

• Look jagged when enlarged too much
• Take a lot of memory but can be compressed (e.g. JPG)

Vector Images

• Defined by mathematical formulae
• Can be enlarged and still look nice
• Small compared to bitmap images

27/04/18 COMPSCI 111/111G - Digital Images 34