1.  Relationship between image size & resolution for vector
graphics and raster graphics.

2. In This Chapter, you’ll learn on:
 Define the term vector and raster graphics.
 Compare the differences between raster and
vector graphics in terms of
o - image size
o - Resolution (monitor display and print output)
o - Quality
o - Flexibility
 Identify the various vector and raster graphic
formats.

3. Define the term vector and raster graphics
There are two types of computer graphics –
raster and vector. The raster graphic is
composed of pixels and vector graphic is
composed of drawing paths.
Vector graphics
 Vector graphics are made up of lines,
curves, circles and shapes etc, defined by
mathematical objects called vectors.
 By following these instructions, the computer
can create the variety of elements needed
to form the shape of all objects in the image.
 Vector graphics are often called object-
oriented graphics.

4.  These graphics retain their crispness whether
they are resized, moved or have their colour
changed.
 Vector graphics are appropriate for
illustrations, type, and graphics such as logos
that may be scaled to different sizes.
 Compared to raster images only the
formulas are stored. This makes the size of
the file very small. The images don't loose
focus when you zoom, since the lines are re-
rendered.

5.  A vector image gives a very high quality, it
requires small storage space and is easy to
edit.
 That's why you should always try to save your
vector images in a vector format.
 It is not possible to save photos, scanned
images etc in a vector format.
 Examples of vector images are drawings,
diagrams and illustrations.
 Picture 1 Enlargement of a vector image.
The quality is still good.

6.  Picture 1 Enlargement of a vector image.
The quality is still good.
 Picture 2 Enlargement of a vector image.

7.  Raster graphics
 A raster image is made up by small dots, known as pixels
in different colors.
 Each pixel is assigned a specific location and color
value.
 The dots create a pattern which forms an image which
we called a bitmap (this is why raster graphics are also
called bit-mapped graphics). In working with bitmap
images, you edit groups of pixels rather than objects or
shapes.
 Picture 3 Enlargement of a raster image. The quality is
not improved.

8.  Drawings, photos, images etc, which shall be used
in a document need to be transformed into a
digital format.
 This is done by scanning the image or takes a photo
with a digital camera. The image is then stored as a
raster file, i.e. dot-pattern image.

9. Differences between raster and vector graphics
 Computer graphics can be created as either raster or
vector images. Raster graphics are bitmaps.
 Raster graphics render images as a collection of
countless tiny squares. Each square, or pixel, is coded
in a specific hue or shade.
 Raster graphics are best used for non-line art images;
specifically digitized photographs, scanned artwork or
detailed graphics.
 Non-line art images are best represented in raster form
because these typically include subtle chromatic
gradations, undefined lines and shapes, and complex
composition.

10. Differences between raster and vector graphics
 because raster images are pixel-based, they suffer
image degradation.
 Just like photographic images that get blurry and
imprecise when blown up, a raster image gets
jagged and rough. Although raster images can be
scaled down more easily, smaller versions often
appear less crisp or "softer" than the original.

11. Differences between raster and vector graphics
 Resolution in raster graphics is measured in dpi, or dots
per inch. The higher the dpi, the better the resolution.
 Better resolution, however, comes at a price. Just as
raster files are significantly larger than comparable
vector files, Overall, as compared to vector graphics,
raster graphics are less economical, slower to display
and print, less versatile and more unwieldy to work with.
 Remember though that some images, like photographs,
are still best displayed in raster format. Common raster
formats include TIFF, JPEG, GIF, PNG and BMP files.
Despite its shortcomings, raster format is still the Web
standard -- within a few years, however, vector graphics
will likely surpass raster graphics in both prevalence and
popularity.

12. Vector Graphics contains drawing
directions, like drawing a circle etc.
Raster image is not scalable. The
image degrades when it is scaled to
larger size.
Differences between raster and vector graphics

13. Differences between raster and vector graphics
 Unlike pixel-based raster images, vector graphics
are based on mathematical formulas that define
geometric primitives such as polygons, lines, curves,
circles and rectangles.
 Because vector graphics are composed of true
geometric primitives, they are best used to
represent more structured images, like line art
graphics with flat, uniform colors, logos, letterhead,
and fonts.

14. Differences between raster and vector graphics
 The vector format has two big advantages over
raster graphics:
 (1) vector graphics area quickly and perfectly
scalable, i.e., they can be can be resized and
stretched without distortion; and
 (2) vector graphics files are usually much smaller
than bitmap files and thus use less memory in
storage and less bandwidth in transmission. This
makes them ideally suited for the World Wide Web.

15. Differences between raster and vector graphics
 Vector files tend to be considerably smaller than
their raster counterparts. Overall, vector graphics
are more efficient and versatile. Common vector
formats include AI, EPS, FH, SWF, WMF etc.
 Vector graphics are resolution-independent—thus,
their resolution is determined only by the output
device.

16. Identify the various vector and raster graphic formats
 Vector Graphics Formats: Some file formats, e.g. PDF, allow
both raster and vector graphics. This is because the underlying
PostScript system of the Portable Document Format is
designed to handle both methods of creating graphics.
Common Vector Graphics Formats
File Extensions MIME type Proper name Description
.ai
Application/
illustrator
Adobe
Illustrator
Document
Vector format for Adobe Illustrator.
.eps Image/eps
Encapsulated
PostScript
A PostScript file that describes a small vector
graphic, as opposed to a whole page or set of
pages.
.fh
Application/Fr
eehand
Macromedia
Freehand
Document
Vector format for Macromedia Freehand.
.fla
Application/Fl
ash
Flash Source
File
Shockwave Flash source file, only usable by
Macromedia Flash authoring software.

17. Identify the various vector and raster graphic formats
Common Vector Graphics Formats
File
Extensions
MIME
type
Proper name Description
.pdf
Applica
tion/pdf
Portable
Document
Format
Fully supports vector graphics in a de facto standard format
which can be read and printed on almost all operating systems.
A much simplified version of PostScript allowing for files
containing multiple pages and links. Works with Adobe Acrobat
Reader or Adobe eBook Reader.
.ps
Applica
tion/pos
tscript
PostScript
Generic vector-based page description language, created and
owned by Adobe. Postscript is a powerful stack-based
programming language. Supported by many laser printers.
.swf
Applica
tion/sho
ckwave
-flash
Flash
Flash is a web page plug-in that displays vector based
animations contained in SWF files. Several applications can
create SWF files; these include the Flash authoring tool from
Macromedia.
.wmf
Image/
wmf
Windows
Metafile
Stores vector graphics and raster graphics as a sequence of
commands to be issued to the graphics layer of the Microsoft
Windows operating system. (only partially vector)

18. Identify the various vector and raster graphic formats
 Raster Graphics Formats
Some common raster graphic file formats are listed below.
Common Raster Graphics Formats
file
extension
MIME
type
proper name description
.bmp
Imag
e/bm
p
Windows Bitmap
Commonly used by Microsoft Windows programs, and the
Windows operating system itself. Lossless compression can be
specified, but some programs use only uncompressed files.
.gif
Imag
e/gif
Graphics
Interchange
Format
GIF is used extensively on the web. Supports animated images.
Supports only 255 colors per frame, so requires lossy quantization
for full-color photos (dithering); using multiple frames can
improve color precision. Uses lossless LZW compression, that used
to make GIF avoided sometimes due to patent issues
concerning LZW.
.jpg
Imag
e/jpg
Joint
Photographic
Experts Group
JPEG is used extensively for photos and other continous tone
images on the web. Uses lossy compression by trying to equalize
eight by eight pixels; the quality can vary greatly depending on
the compression settings.

19. Identify the various vector and raster graphic formats
 Raster Graphics Formats
Some common raster graphic file formats are listed
below.
Common Raster Graphics Formats
file
extensio
n
MIME type proper name description
.png Image/png
Portable
Network
Graphics
PNG is an image format with lossless compression,
offering bit depths from 1 to 32. It was mainly designed
to replace the use of GIF on the web. Free of the
patent, which expired in 2003, associated with GIF.
.psd
Application/
Photoshop
Photoshop
Document
Default proprietary format for Adobe Photoshop
documents. Has many extra features such as image
layering. Supported by very few image editing
programs other than Adobe Photoshop.
.tiff
Image/tiff
Tagged Image
File Format
TIFF is used extensively for traditional print graphics.
Lossy and lossless compression available, but many
programs only support a subset of available options.