Basic Introduction To Graphic File Formats

Graphic File Formats

Basic Introduction

10/4/2015 1Ankit Mishra|CS1Fb.com/djankit007

http://www.facebook.com/djankit007

Topics To Be Covered

10/4/2015 2Ankit Mishra|CS1

Introduction

Multimedia File Formats


Bitmap Image

Vector Image

Comparision

Conclusion

Introduction


Multimedia data and information are

stored in a file using certain formats

specific to the type of multimedia

content.

File

•Digital storage of data.

Format

•The way content (data) is

stored.

Multimedia File Formats


A typical multimedia file may contain a specific or

a wide range of data such as

graphic,video,animation,MIDI information,fonts

etc.

MULTIMEDIA FORMATS

Video

AnimationGraphic

Audio



Graphic file formats are standardized means

of organizing and storing digital images.

.bmp

.gif

.jpeg

.png

Bitmap

.pdf

.svg

.cgm

.eps

Vector

Image Resolution


Resolution refers to the total number of pixels in an image.

For example: An image that is 1920*1080 (1920 pixels

wide and 1080 pixels high contains 1920*1080 =

2073600 pixels (or 2.1 Megapixels).

Bitmap Image


Bitmap (or raster) images are stored as a series/grid of tiny dots called pixels.

Pixels are blocks representing smallest unit of information arranged in a

2-D grid. Bit depth of a pixel represents the relative amount of colour

information present in it.

Bitmap Image Format


The density of the dots, known as the resolution,

determines how sharply the image is represented. In

typical bitmaps, image pixels are generally stored with

a color depth of 1, 4, 8, 16, 24, 32, 48, or 64 bits per

pixel.

Bitmap images are resolution dependant. On resizing a

bitmap image, quality gets sacrificed.

Representing Images In Bitmap


Images need to be converted into binary in order for a computer to

process them so that they can be seen on our screen.

Digital images are made up of pixels where each pixel in an image is

made up of binary numbers. For example: 1 bit per pixel (0 or 1) gives

two possible colors to represent an image.

If 1 is black

and 0 is

white then

a simple

B&W

picture can

be created

using binary.



We can get more possible colors by using more bits per pixel.

1 bit per pixel (0 or 1): 2 possible colours

2 bits per pixel (00 - 11): 4 possible colours



8 bits per pixel : 256 possible colours 16 bits per pixel : 65k possible colours

24 bits per pixel : 16 Million possible colours

32 bits per pixel : 4 Billion possible colours

Size of an image = (Rows) X (Columns) X (Bits per pixel(bpp))



RGB color scheme is a method of mixing (R)ed, (G)reen and (B)lue light

in order to produce almost any imaginable color.

Here, a pixel stores 8

bits of information

(color) for each

Red(R),Green(G) &

Blue(B) which has

integer values from

0 to 255. This makes

256*256*256=16

million possible

colors.

RGB Color code: (127,127,203)

Representing Grayscale Image


Grayscale image has number of shades of gray per pixel.

Where shades of gray are the levels of color between Black (0)

and White(1).

An 8 bit grayscale image contains 2^8=256 levels.

This 8 bit grayscale image has 1024

rows and 1024 columns hence,

Size = 1024 * 1024 * 8 = 8388608 bits

or 1 Mb.

Common Bitmap Image Formats


Scanned images and images taken from digital camera are

all bitmap.

.gifGraphics

Interchange Format

Web graphics, buttons, chart,

icons.

.jpgJoint

Photographic Expert Group

Web images

.tiff

Tagged Image File Format

High Quality Photographs

Vector Image Format


Unlike bitmap, vector graphics are not made up of a grid of pixels. Instead, vector graphics are made up of mathematical equations,

series of draw instruction comprised of paths, which are defined by a start and end point, angles, lines, squares, triangles, or curve shapes

etc. These shapes are called objects and each object has some attributes (colour,fill,outline,shadow etc)

Vector graphics are resolution independant. Resizing a

vector image won’t effect its sharpness or crispness.

Vector Image Format


Vector graphic also includes metafiles, which are graphics

that contains both bitmap (raster) and vector data. Objects

are bitmap but attributes are vector.

Some common vector metafile formats are: .CGM (Computer Graphic Metafile), .EMF (Enhanced Metafile Format), .WML (Windows Metafile)

Common Vector Image Formats


Vector images can be zoomed or scaled at any ratio thus, can be used for designing logos or magazines. They can’t be used for generating photo-realistic

imagery.

.cdr

CorelDRAWvector graphics

Vector illustrations, page layout, brouchures

.swf

ShockWave Flash

web-based video games

.ai

Adobe Illustrator

Layers, vectors, effects etc

Bitmap (Raster) vs Vector


Vector

Bitmap





Bitmap ImageVector Image

Conclusion


• The choice to use bitmap or vector depends on the

design itself.

• If it's going to have photographic elements with

continuous tones and blends of color, one should use

bitmap editing programs like Photoshop.

• And if considering final design to look like an illustration

with clear contrasts between objects & shapes, then use

a vector program like adobe illustrator.

Education

Basic Introduction To Graphic File Formats