Chapter 3

Pelekanou Olga

INF221 INTRODUCTION TO MULTIMEDIA

Overview

• General introduction to Computer Graphics.

• Kinds of computer graphics. • Basic graphics file formats.

• Desktop publishing.

Computer Graphics, a very broad term

• Fields Related to Computer Graphics– Bitmap/Vector graphics, 2D/3D graphics,

Computer-aided design, Digital video, Interactive Multimedia, Net Art, Subcategory of Computer Science

• Digital Imaging– A field that includes digital photography,

scanning, and composition and manipulation of bit-mapped graphics.

Analog to Digital Conversion

• Digital signals are generated by sampling analog signals

• Digital information is always a subset of analog information

• Digitization allow processing of images using computer, by providing better noise correction.

Bitmap (Raster) Graphics

• made up of a grid of dots known as pixels

• most common electronic medium for continuous-tone images, such as photographs or digital paintings

• resolution-dependent ( causes pixellation )

• Photoshop

Vector Graphics

• made up of mathematically defined lines and curves called vectors

• move, resize, or change the color of a graphic object without losing the quality of the graphic resolution-independent

• Computer generated curves & objects

• Flash, Illustrator, Maya…

Bitmap vs Vector image

Anatomy of Bitmap Image

• Pixel– Basic building block of a bitmap image– Each pixel in the grid is the same size and has

a tonal value – 256 different levels or separate tones to create

a smooth transition from dark to light

Anatomy of Bitmap Image

Digital Data

• Based on binary numbers• 1bit has a value either 0 or 1 • 8 bits=1 byte ( 2*2*2*2*2*2*2*2 = 256 combination, 0 –

255 )• 24 bits = 3 byte ( 256(8bit)*256*256 = 16,777,216

combination 0 – 16,777,215 )• 1024 bytes=1 kilobyte• 1024 kilobytes=1 megabyte• 1024 megabytes=1 gigabyte

Anatomy of Bitmap Image

• Bit DepthNumber of bit needed to define a ton for a pixel

Compression?

• Compression refers to the ways in which the amount of data needed to store an image or other file can be reduced. This can help to reduce the amount of storage space needed to store your animation files and also to reduce the bandwidth needed to play them back.

• Lossy/Lossless compression• Spatial/Temporal compression• Compression features both software(Codec,

compression algorithm) and hardware side(chips, graphic card).

Lossless Compression

• encodes and decodes the data perfectly• the resulting image matches the original image perfectly• no degradation, no data loss• Run Length Encoding, Huffman coding, LZW( for GIF)• Strategy : the more frequently used, the less data storage is

used • AAAABBBBBBCCCCEEE -> 4A6B4C3E• For Images with high degree of detail that shouln’t be lost• For computer generated graphics with large areas of the

same color

Lossy Compression

• Allows redundant and nonessential information to be lost

• Removes data from an image that the human eye wouldn’t notice

• There us a tradeoff between compression and image quality

• Continuous tone images with complex shapes and shading

• More complicate algorithm• JPEG, MPEG

Spatial Compression

• Techniques that operate on a single still image compression

• Has both lossy & lossless compression

Temporary Compression ( Inter-Frame Compression)

• Compression applied to a sequence of video frames, rather than a single image.

• Strategy: To save on space by recording only the areas of the image that have changed.

• Keyframe : frames of which information is fully stored to judge the differences in the scene in-between two keyframes

• Delta frame : Frames that record only those pixels that have changed since the previous frame

• Excessive use of keyframes will restrict the potential compression achieved.

• Where rapid motion exists in the sequence temporal compression can introduce undesirable artifacts

File Format

• A standard means of storing data• Computer memory stores numbers in linear memory • Any additional information like rows, cols., bits/pixel

must be stored with the “data” - typically as a “header”• Directly related to software and compression algorithm• Many file formats use compression to reduce the file

size of bitmap images - GIF, TIFF, PNG,JPG

Image File Formats - GIF

• Graphics Interchange Format • 8 bits TOTAL/image (256 colors maximum)

– Built in lossless compression – Has transparancy & interlacing features – Gif89a allows for easy animation – Better suited for line-art, cartoons,graphs etc. (as

compared to JPEG)

Image File Formats - JPEG

• Joint Photographic Experts Group (JPEG) format – to display photographs and other continuous-tone images on

the Web.– supports CMYK, RGB, and Grayscale color modes– does not support alpha channels. – retains all color information in an RGB image but compresses

file size by selectively discarding data. (Lossy)– A higher level of compression results in lower image quality,

and a lower level of compression results in better image quality.

Workflow of baseline JPEG encoding

• Transform image to luminance/chrominance color space(YCbCr)

• Reduce the color component( subsampling by 2)(1st lossy procedure)

• Partition image into 8*8 pixel blocks and perform DCT on each block

• Quantize resulting DCT coefficients(2nd lossy procedure)

• Entropy code the reduced coefficients(lossless)

Image File Formats - PNG

• Developed as a patent-free alternative to GIF• Portable Network Graphics (PNG) format • for lossless compression and for display of images on the

World Wide Web. • Unlike GIF, PNG supports 24-bit images and produces

background transparency without jagged edges • some Web browsers do not support PNG images. • supports RGB, indexed-color, grayscale, and Bitmap-mode

images without alpha channels. • preserves transparency in grayscale and RGB images.

Image File Formats - TIFF

• Tagged-Image File Format – used to exchange files between applications and computer

platforms. – 8 bits/channel (24 bits for color) – Lossless image compression (2:1) – CMYK, RGB, Lab, indexed-color, and grayscale with alpha

channels – Newer versions allows for additional compression techniques

(JPEG) and color spaces – for scanner– big in file size

Data rate / Bandwidth

• Data Rates - the amount of data per second that has to flow to play back that sequence smoothly.

• Ex. 720 by 576 uncompressed PAL video the data rate is 1.244 Mb per image × 25 frames per second = 31.1 Mb/s.

• Bandwidth - the ability of a system to deliver data. Data rate of a data stream (like a digital video file) > bandwidth of playback – not smooth

• Data rate of a data stream (like a digital video file) < bandwidth of playback –smooth.

• Uncompressed, broadcast-quality video requires 160 megabits per second (Mbps) of network bandwidth. Uncompressed, CD-quality audio requires approximately 2.8 Mbps.

MPEG (Moving Picture Experts Group) image compression standards

• MPEG is similar to JPEG (for individual frames) but exploits temporal redundancy (between frames) as well by estimating motion between frames.

• MPEG-1 - upto 1.5 Mbit/sec (Video CD) • MPEG-2 -> 4Mb/sec – HDTV/DVD standard • MPEG-4 - content based/MULTIMEDIA

Considerations in video compression

• Delivery method( CD, Internet(broadband), Internet(modem))

• Image quality(color depth), Output data rate, number of Key frame

• Codec compatibility

Codec Comparison