Graphics, Images, and Audio Unit 5

1

1

Unit 5

Graphics, Images, and Audio

2

Graphics, Images, and Audio

• Computer Graphics1. Bitmap Images

2. Vector Images

3. File formats

• Image Contents 1. Color Depth

2. Dithering

3. Compression

• Audio1. How it works

2. File Formats

• Digital Video1. How it works

2. Digital video file formats

4. Transparency

5. Alpha Channel

3

Computer Graphics

• Computer graphics refers to using a computer to create or manipulate any kind of picture, image, or diagram

• Typically you manipulate an image on your computer with a graphics editing program– MS Paint

– Adobe Photoshop

– GIMP 2

– Etc.

4

Computer Graphics

• There are two basic types of graphics:

– Bitmapped (rasterized)

– Vector

• When you create a bitmapped (rasterized)

graphic you are basically creating a bunch of

colored dots

• When you create a vector graphic, you are

creating mathematical equations

2

5

Computer Graphics

• A bitmapped graphic is stored as an array of dots, or pixels– Each pixel gets assigned a specific color

• The more pixels you have, the more detailed the image can be

• Some common bitmap graphics programs are:– Photoshop

– Paint Shop Pro

– GIMP

– Photo-Paint

– Graphic Converter

• These are paint programs

- Bitmap Images

6

Computer Graphics

An exaggerated example of a bitmapped image:

- Bitmap Images

7

• Created by scanners, digital cameras, and other similar devices

• Most commonly used format on the web

• Advantage:– Very flexible: with enough pixels, anything picture can

be represented

• Disadvantage:– Takes a lot of memory: the color of each pixel must

be represented

– Not easily modified

Computer Graphics- Bitmap Images

8

• Vector graphics are made up of mathematical equations representing lines and shapes in the image

• Vector graphics are created and manipulated using drawing programs – as opposed to paint programs for bitmapped graphics

• Instead of using pixels to describe the image, it describes the image using shapes– Circles

– Lines

– Curves

• Also has to store the color of these shapes

Computer Graphics- Vector Images

3

9

• Some of the vector graphics drawing programs include:

– Corel Draw

– Adobe Illustrator

– Acrobat

• Most of these programs allow the use of bitmapped

images as part of a vector image

– This does not make them paint programs

– Bitmaps are a type of object (like a circle) that can be inserted

into a vector image


10

• Advantages:

– Easy to change parts of the image since each part is stored as a

different shape

– Can manipulate the image properties without loosing quality

• Rotating, changing color, size, line width, etc.

– Can zoom into image indefinitely

– Typically takes less memory and disk space than a bitmap

• Disadvantages:

– Must be converted to a bitmap to display

– Limited to the shapes the program can handle


11

Bitmapped vs. Vector Images:

• Bitmap and vector images are obviously different

• Both have strengths and weaknesses

• They don‟t manipulate images in the same way

• They don‟t store images in the same way

Computer Graphics- Bitmapped vs. vector

12

• Zooming in on a bitmapped image:

Computer Graphics- Bitmapped vs. vector

4

13

• Once we‟ve chosen which type of graphics we‟re going to use now we have to select which file format

• Each file format converts the image to a corresponding string of bits differently in order to store them on disk or transmit them over the Internet

• It‟s beyond the scope of this course to discuss how these images are converted into bits

• However, we will discuss the common file formats

Computer Graphics- File formats

14

• Hopefully, you‟re familiar with JPEG and GIF file formats (at least in name only)

• You can‟t just rename “somepicture.gif” to “somepicture.jpg” and expect to get the desired result– Can‟t just rename a .doc file as .ppt and expect a

presentation out of it

• Images have to be converted from one file format to another


15

Common File Formats:

Bitmap Formats

• GIF: graphics interchange

format

• JPEG: joint photographic

experts group

• PNG: portable network graphic

• BMP: Windows bitmap

• TIFF: tagged image file format

Vector Formats

• SVG : scalable vector graphics

• EPS: encapsulated postscript

• CMX: Corel meta exchange

• PICT: Macintosh Picture

• WMF: Windows metafile

• PDF, AI: Adobe illustrator


16

How to pick a file format:

• Type: does the file format store the type of image you want to use (bitmap or vector)?

• Portability: can other people use images in this format?

• Color Depth: does the format support the number of colors you need?

• Compression: can make the file smaller, but it takes time to compress and decompress a file

• Transparency: do parts of your image need to be transparent?


5

17

Image Contents

• Image formats will only allow a certain number of

different colors for each pixel

– This depends on the number of bits assigned to each

pixel

• The format stores the level of each of the three values

for RGB (Red Green Blue) to specify color

– R, G,and B are referred to as components

• Bit depth describes the number of colors that can be

used in the image

- Color Depth

18

• A 24-bit image allows you to specify up to 224

different colors in your image– This means 8 bits each for R, G, and B components

– For each component we can specify 28 different values (256 values)

• this means 0-255 selections for the color value

• The “24” in 24-bit says how many bits it takes to store a single color

Image Contents- Color Depth - bit depth

19

• While most photos look good with 24-bit color, we can have less than that

• 16-bit color can have 216 different colors – 5 bits each for R and B components, 6 bits for G component

– This creates a smaller file because it takes less bits to represent color

• The more colors, the larger the image is to store

– More information is required for each pixel

• Can work in 24-bit color then save the image with fewer

colors for storage

Image Contents- Color Depth - bit depth

20

Question: What if your images has more colors

than the color depth??

Answer:

– Usually the graphics program will select colors that

closely match those in your image

– Another option is to do dithering

– Dithering is where the program fools your eye by

creating a pattern of pixels in two colors which makes

you see a color between the two

Image Contents- Dithering

6

21

Plain Gray Image Image which appears

this shade of gray

because of dithering. It

actually contains white

and black pixels


22

Diffusion NoisePattern

•This shows an example of three different ways to dither the image.

•Some types of dithering may work better than others depending on

the image in question.

•Some programs allow you to select the type of dithering (Photoshop,

e.g.)


23

Image Contents

- Dithering - with color

24

Color I want to produce Dithering with only 2 colors,

orange and white

Dithering with all web-safe

colors enabledZoomed View of dithering

Image Contents- Dithering - with color

7

25

Image Contents- Dithering - example

Detail from Seurat‟s La Parade

26

Seurat‟s Sunday Afternoon on the Island of La Grande Jatte

27

• Compression is used to make files smaller

• Bitmap images, especially, can be quite large if

stored without compression

– Ex. A 640 x 480 pixel image with 24-bit color depth

would take:

64048024 bits = 7372800 bits = 900 kiloBytes

• Windows bmp format is uncompressed

– Should NEVER be used online

Image Contents- Compression

28

• Compression is the process of applying a

method that looks for patterns in an image (and

uses other tricks) to reduce the amount of

information that needs to be saved

– The trick is to make the difference between the

compressed and the uncompressed images not

noticeable


8

29

Lossy and Lossless Compressions:

• There are two main types of compression: Lossy& Lossless

• When an image is compressed and later uncompressed with a lossless algorithm, the image is exactly the same

• Lossy algorithms produce images which may be slightly different before compression and after uncompressing– Some information may be lost

– Usually produces much smaller files than a lossless algorithm

– Often takes into account human anatomy• We can‟t tell the difference between certain values of color


30

• The JPEG (Joint Photographic Experts Group) format was designed for photographs at high quality and in full color– Lossy Compression format

• Normally changes can‟t be seen except at the lowest quality settings

• Bad idea to store simple black and white images as JPEGs

• Good for grayscale images


31

• GIF (Graphics Interchange Format) uses the LZW compression algorithm developed by Unisys– The algorithm is patented

– Is limited to 8-bit color palette

• PNG (Portable Network Graphic) was created as an alternative to GIF– It‟s free to use

– Can use 24-bit color

• For this course, you should try and use PNG instead of GIF– Considered a better algorithm

– No patent issues


32

• Allows part of the image to be transparent

– The background will show through

• Often used with graphics on web pages

– The image is still a rectangle

– Parts of the background show through so it doesn‟t

look like a rectangle

• Not all image formats support transparency

Image Contents- Transparency

9

33

Simple Transparency

• GIF supports simple transparency

– Certain pixels will be marked as transparent

• Images can appear any shape

• It‟s “all or nothing” transparency

– Either the pixel is completely transparent or its not


CMPT 165 Text, Graphics, and Audio Page 34

34

•GIF with a white background.

•Unsightly for web pages

•GIF with a transparent

background.

•Image is the same size as

image on left

•But, background shows

through

Image Contents- Simple Transparency

35

• Alpha channel is a more general method of transparency

• Images now have two parts:– The image

– A mask (called the alpha channel)

• The alpha channel indicates how transparent each pixel is (usually as a percentage)

• GIMP and Photoshop support full transparency, as well as the PNG format

Image Contents- Alpha Channel

36

Image Contents- Simple vs. Alpha Channel

Example showing differences between simple

transparency and alpha channel transparency:

10

37

• You could simply color the background of your image to the same color as the background of your webpage– Unfortunately, if you change the background color of

your website, you will have to change every single image!

• Better to use transparency for images with shapes (like the snail)– Not necessary for square images like a photograph


38

Audio

• What does sound consist of?

– A sound wave

• Is it analog or digital?

– analog: "describes a device or system that represents

changing values as continuously variable physical

quantities" (webopedia)

• digital vs. analog clocks

- How it works

39

• How to convert to digital– Sample rate

• 44.1 KHz or 44100 times per second (for CD quality)

• 22 KHz or 22000 times per second (for radio quality)

• 11 KHz (for telephone quality)

– Typically 16 bits for each sample

– How many channels• Mono vs stereo

• What about compression?– Same idea as what we discussed for graphics

– lossy vs lossless

Audio- How it works - digital audio

40

• Just use something like<a href="laugh.wav">listen here</a>

• Other tags:

– Background sound (transitional only):<bgsound src="laugh.wav" loop="infinite">

– Embedded player (transitional only):<embed src="file.wav" width="100" height ="150" volume="50">

Audio- How it works - HTML links

11

41

• .wav files

– Short for waveform audio format

– Most commonly contains no compression

– Mostly used for applications that need high quality (first

generation sound files)

• i.e. radio stations and other broadcast mediums

Audio- File formats

42

• .mp3 files– Mpeg audio layer 3

• Originally used for audio in video files

– Lossy compression

• .wma files– Windows Media Audio

– Also lossy compression• The compression method is different than mp3 files

• Both formats used for audio streaming (real-time transferring of audio over the internet) and long term storage purposes

Audio- File formats

43

• .MIDI

– Musical Instrument Digital Interface

– Information not stored as sound, stored as instructions

• This is similar to what vector images are to bitmapped images

• Uses much less space in memory

• Dependent on quality/features of midi interpreter

• Popular for ring tones

Audio- File formats

44

Video

• Video is a sequence of still images displayed at high

speed to simulate continuous motion

– The most popular speed at which these still images are

displayed is approximately 30 frames per second

– There are two video formats (ways video can exist)

• Analog Video

• Digital Video

• Tasks that are done with video include:

– Recording

– Storing

– Transmitting

– Reconstructing

- How it works

12

45

Video

• Analog Videos are videos which represent its

sequence of images on small sheets of magnetic

tape (video tape)

– Recording is done by letting some amount of light

onto the magnetic tape

• Colors will be represented on each „slide‟ on the tape

– Reconstruction is done by rolling the tape quickly and

displaying the images captured on the tape

- How it works - analog

46

Video

• Digital Video is represented using a series of

digital images usually on a pixilated display

– Digital videos must be made such that it is easy to

store and easy to transmit

– Both are connected to file size

– Advantage:

• Easy to record, store and reconstruct

– Disadvantage:

• Not too many standards – there are many digital video

formats

- How it works - digital

47

Video

• Analog: used to measure reconstruction results– In analog, recording and transmitting can lower the

quality due to environmental factors

• Digital:– Digital videos are usually compressed in one way or

another

– This creates a lower quality video but a much smaller file on your hard drive

– Digital video quality is the measure of the color difference between the compressed video and the original, uncompressed one.

- Video Quality

48

Video

• Digital video file formats usually includes certain

standards such as:

– Compression

– Video size: (i.e. 320px 240px)

– Video quality

– How is the sound stored?

– How is the video stored?

- Digital video file formats

13

49

Video

• There are many digital video file formats, some popular ones include:– AVI (Audio Video Interleaved)

• The most general type of video format, it does not have any standards such as video size, or compression. These files can become quite large

– Mpeg (Moving Picture Experts Group)

• Includes Mpeg1, Mpeg2, Mpeg4

• Each is an extension of the other. For example, Mpeg1 is used for VCDs, Mpeg2 is used VCD plus surround sound, Mpeg4 is used for DVDs

– MOV (QuickTime Content)

• File format developed by Apple

• Very good for streaming video online

- Digital video file formats

Graphics, Images, and Audio Unit 5

Documents

Transcript of Graphics, Images, and Audio Unit 5