LESSON 4

Image/Graphic
 Images In An image is a visual representation of

Multimedia
something. In information technology, the term has
several usages
 An image is a picture that has been created or copied and stored
in electronic form. An image can be described in terms of vector
graphics or raster graphics. An image stored in raster form is
sometimes called a bitmap. An image map is a file containing
information that associates different locations on a specified
image with hypertext links.

An image consists of a rectangular array of dots called pixels.

The size of the image is specified in terms of width X height, in
numbers of the pixels. The physical size of the image, in inches
or centimeters, depends on the resolution of the device on which
the image is displayed. The resolution is usually measured in
DPI (Dots Per Inch). An image will appear smaller on a device
with a higher resolution than on one with a lower resolution. For
color images, one needs enough bits per pixel to represent all the

Images
colors in the image. The number of the bits per pixel is called the
depth of the image.
 When using a raster program you paint an image and it's similar to dipping
a brush in paint and painting. You can blend colors to soften the transition
from one color to another.

When using a vector program you draw the outline of shapes: and it's
similar to creating an image with tiles of all different shapes and sizes. e.g.
an eye shape, a nose shape, a lip shape. These shapes called objects display
one single color each.

There are two main type of image files: Raster

and Vector. Raster images are created with pixel-based
programs or captured with a camera or scanner. They are more
common in general such as jpg, gif, png, and are widely used on
the web. Vector graphics are created with vector software and are
common for images that will be applied onto a physical product.
Also used in CAD, engineering, and 3D graphics which we do
not provide information nor services for.
 Some vector programs do have the ability to create color gradients within
one single shape, but these are actually raster effects. A vector graphic with
gradients contains both vector and raster elements and won't be suitable
for process that requires 100% true vector art such as cutting or engraving.

Photographs are raster images and are probably the best example of
images completely made of color blends - or shade blends in the case of
black and white photographs - and those images look very different when
drawn in vector format.

A lot of images can be made with either raster or vector

program and look exactly the same on both programs.
Images with a subtle gradation of one color to another are
the images that will look most different since vector
programs need to create a separate shape for each shade
of color.
 Raster images are made of pixels. A pixel is a single point or the
smallest single element in a display device. If you zoom in to a
raster image you may start to see a lot of little tiny squares.
Vector images are mathematical calculations from one point to
another that form lines and shapes. If you zoom into a vector
graphic it will always look the same.
Pixels vs
Vectors
A raster image has a specific number of pixels. When you
enlarge the image file without changing the number of pixels, the
image will look blurry. When you enlarge the file by adding
more pixels, the pixels are added randomly throughout the
image, rarely producing good results.
When you enlarge a vector graphic, the math formulas stay the
same, rendering the same visual graphic no matter the size.
Vector graphics can be scaled to any size without losing quality.
 Vector graphics are scalable
Because vector graphics are not composed of pixels they are
resolution-independent. Vectors can be scaled to any size without
losing quality. Vectors can be printed as large and at the highest
resolution the printer or the output device allows.

Color editing is simple

A multi-color vector image can be easily changed to a limited
color graphic. Limited colors are often required by some
processes such as embroidery, "stencil-cut" vinyl signs, and
specialty promotional items (such as logos printed on cups, pens,
bottles, etc.)

Vector Outline / Wireframe

Vector programs display the image as we would normally see it
and they also allows us to view the vector outline or wire-frame
of each object. This vector outline/wireframe is important to
some companies because it guides the equipment they use to
create their products, such as engraving and cut signs. It is also
important to some of these processes that the vector outlines are
not overly complex.

Vector Graphics
 For categorizing purposes I have named the above: photo-realistic
vector, vector illustration, and vector lineart.

1. Photo-realistic vector: Photograph vectorized using an automated

tool and a multitude of colors to allow the image to have a closer
resemblance to the original. We rarely auto-trace photos and do not
recommend it. This is an example of something that does not usually
work as it is too complex for processes that are guided by the vector
outline such as engraving & specialty signs. This vector image may be
used in CMYK or digital printing but photographs are best printed as
they are: raster images. Learn more.

2. Vector illustration + raster effects. This is a hand-drawn, simplified

drawing. Color blends can be created in vector programs but they are
actually raster effects so this image is NOT 100% vector. The raster
effects will show up as rectangle or square "boxes" when the graphic is
imported into specialty software. This image is also not suitable for
processes that are guided by the vector outline. Samples.

3. Vector "line art". This is 100% vector; NO COLOR BLENDS. The

outline/wire-frame is acceptable for all processes
Vector Graphic Common Uses
Vector graphics are commonly used for logos, illustrations, technical drawings and for use with
processes that require vector art such as specialty signs and printing, engraving and etching.
Also used in CAD, Engineering, and 3D graphics.
 Raster / Bitmap
Images
Pixel-based images represent and edit photographs and photo-like images better than vector programs, because they can use an
abundant number of different color pixels. By arranging pixels and slowly incrementing or changing the color or shade of the pixels adjacent to them,
it creates a subtle gradation from one color to another: nice and smooth color blends.

Raster images' dimensions are measured in pixels. Because raster images cannot be enlarged without losing quality, printers require that you provide
them with files at the correct size: 1. the dimension you want to print your image at, and 2. the pixel resolution for that particular project. The pixel
resolution is the amount of pixels within each inch called ppi (pixels per inch).

How large a raster image can be printed - and maintain quality - depends on 2 things:

1.the pixel dimension of the image (e.g. 6824 pixels wide by 2345 pixels high)
2. the pixel resolution: pixels-per-inch (ppi), how many pixels per inch are required by the particular printer

Different types of printing have different resolution requirements. On average:

Paper printing require a minimum of 300 ppi

Shirt printers require a minimum of 240 ppi
Large format printers (banners, billboards) vary a lot because it also depends on the distance from which the sign is going to be viewed - could be as
low as 20 or more than 200
How to determine what size your
Can we enlarge the pixel dimension & resolution of a raster
raster image must be for image?

printing: Raster images have a certain amount of pixels

Multiply the resolution required by the area to be printed.
Example:
If a printer requires a minimum of 300 ppi and you want to print an image in
an area that is 5 inches wide, multiply 300 pixels x 5 inches = 1500. Your
image must be at least 1500 pixels wide.
within each inch. A 72 ppi image has 72 pixels in every inch. A
300 ppi image has 300 pixels per inch. When you are required to
provide a "large or high resolution" image file (a specific size),
the image must have been created or scanned at that size or
larger (at both the dimension and the resolution required.) E.G. if
you need to print an image at 2 inches wide and 300 ppi is
required, your image must be created, photographed or scanned
at a minimum of 600 pixels (2 in x 300 ppi).

Once the image is created at a certain dimension,

you may not be able to use this image at a larger size without
losing quality. When you manually increase the resolution with a
program like Photoshop, Photoshop randomly adds pixels and
the result will most likely be a high resolution image of poor
quality.
If I am creating a new design
which software should I use;
Raster or Vector?
It depends on the design itself. If it's going to have photographic
elements with continuous tones and blends of color, you are
probably better off using a paint program. If you want your
design to look like a drawing or illustration with clear contrast
between the elements of the design, then use a vector program.
Ideally a company that has a logo design with photographic
elements, also has a secondary simplified version of their logo in
vector format that can be used for those specialty items that
require vector art such as plotters, engravers, vinyl-cut signs,
promotional specialty items (cups, pens, bottles with company
logo)
Raster (Bitmap) Vector
• Pixel-based • Shapes based on mathematical calculations

• Raster programs best for editing photos and creating continuous tone images with • Vector programs best for creating logos, drawings and illustrations, technical
soft color blends drawings. For images that will be applied to physical products.

• Do not scale up optimally - Image must be created/scanned at the desired usage size • Can be scaled to any size without losing quality
or larger
• Large dimensions & detailed images equal large file size • Resolution-independent: Can be printed at any size/resolution

• It is more difficult to print raster images using a limited amount of spot colors • A large dimension vector graphic maintains a small file size

• Some processes cannot use raster formats • Number of colors can be easily increased or reduced to adjust printing budget

• Depending on the complexity of the image, conversion to vector may be time • Vector art can be used for many processes and easily rasterized to be used for all
consuming processes

• Raster images are the most common image format, including: jpg, gif, png, tif, bmp, • Can be easily converted to raster
psd, eps and pdfs originating from raster programs
• It is not the best format for continuous tone images with blends of color or to edit
• Common raster programs: photo editing / paint programs such as Photoshop & Paint photographs
Shop, GIMP (free)--
• Common vector graphic file format: ai, cdr, svg, and eps & pdfs originating from
vector programs

• Common vector programs: drawing programs such as Illustrator, CorelDraw,

Inkscape (free)
 DPI - Dots per Inch

This is the amount of ink dots the printer will put on each pixel
of your image. The DPI is set by the actual printer device and it
is not something in the image for the graphic designer to
manipulate.

PPI - Pixels per Inch

Digital raster images are measured in pixels, or picture elements.

How many pixels per inch is determined by the device you

DPI vs PPI
create the digital image with: camera, scanner, or graphics
software and can be modified with a photo/paint editing
software.
Image Data Types
Images can be created by using different techniques of representation of data
called data type like monochrome and colored images. Monochrome image
is created by using single color whereas colored image is created by using
multiple colors.
 An image is a set of pixels. Note that a pixel is a picture element
in digital image. In 1-bit images, each pixel is stored as a
single bit (0 or 1). A bit has only two states either on or off,
white or black, true or false. Therefore, such an image is also
referred to as a binary image, since only two states are available.
1-bit image is also known as 1-bit monochrome images because
it contains one color that is black for off state and white for on
state.

A 1-bit image with resolution 640*480 needs a storage space of

640*480 bits.

640 x 480 bits. = (640 x 480) / 8 bytes = (640 x 480) / (8 x 1024)

KB= 37.5KB.

1-bit images The clarity or quality of 1-bit image is very low.

 Each pixel of 8-bit gray level image is represented by a single byte (8 bits). Therefore
each pixel of such image can hold 28=256 values between 0 and 255. Therefore each
pixel has a brightness value on a scale from black (0 for no brightness or intensity) to
white (255 for full brightness or intensity). For example, a dark pixel might have a
value of 15 and a bright one might be 240.

A grayscale digital image is an image in which the value of each pixel is a single
sample, which carries intensity information. Images are composed exclusively of gray
shades, which vary from black being at the weakest intensity to white being at the
strongest. Grayscale images carry many shades of gray from black to white. Grayscale
images are also called monochromatic, denoting the presence of only one (mono) color
(chrome). An image is represented by bitmap. A bitmap is a simple matrix of the tiny
dots (pixels) that form an image and are displayed on a computer screen or printed.

8-bit Gray level A 8-bit image with resolution 640 x 480 needs a storage space of 640 x 480
bytes=(640 x 480)/1024 KB= 300KB. Therefore an 8-bit image needs 8 times more
storage space than 1-bit image.

images
 8-bit color graphics is a method of storing image information in a computer's memory
or in an image file, where one byte (8 bits) represents each pixel. The maximum
number of colors that can be displayed at once is 256. 8-bit color graphics are of two
forms. The first form is where the image stores not color but an 8-bit index into the
color map for each pixel, instead of storing the full 24-bit color value. Therefore, 8-bit
image formats consists of two parts: a color map describing what colors are present in
the image and the array of index values for each pixel in the image. In most color
maps each color is usually chosen from a palette of 16,777,216 colors (24 bits: 8 red,
8green, 8 blue).

The other form is where the 8-bits use 3 bits for red, 3 bits for green and 2 bits for
blue. This second form is often called 8-bit true color as it does not use a palette at all.

8-bit color
When a 24-bit full color image is turned into an 8-bit image, some of the colors have
to be eliminated, known as color quantization process.

A 8-bit color image with resolution 640 x 480 needs a storage space of 640 x 480

images
bytes=(640 x 480) / 1024KB= 300KB without any compression.
 In 24-bit color image, each pixel is represented by three bytes, usually representing
RGB (Red, Green and Blue). Usually true color is defined to mean 256 shades of RGB
(Red, Green and Blue) for a total of 16777216 color variations. It provides a method of
representing and storing graphical image information an RGB color space such that a
colors, shades and hues in large number of variations can be displayed in an image
such as in high quality photo graphic images or complex graphics.

Many 24-bit color images are stored as 32-bit images, and an extra byte for each pixel
used to store an alpha value representing special effect information.

A 24-bit color image with resolution 640 x 480 needs a storage space of 640 x 480 x 3
bytes = (640 x 480 x 3) / 1024=900KB without any compression. Also 32-bit color
image with resolution 640 x 480 needs a storage space of 640 x 480 x 4 bytes=
1200KB without any compression.

Disadvantages

24-bit color
Require large storage space

Many monitors can display only 256 different colors at any one time. Therefore, in this
case it is wasteful to store more than 256 different colors in an image.

images
Image file formats
Images can be created by using different techniques of representation of data
called data type like monochrome and colored images. Monochrome image
is created by using single color whereas colored image is created by using
multiple colors.
 The GIF format was created by Compuserve. It supports 256 colors. GIF format
is the most popular on the Internet because of its compact size. It is ideal for small
icons used for navigational purpose and simple diagrams. GIF creates a table of up to
256 colors from a pool of 16 million. If the image has less than 256 colors, GIF can
easily render the image without any loss of quality. When the image contains more
colors, GIF uses algorithms to match the colors of the image with the palette of
optimum set of 256 colors available. Better algorithms search the image to find and
the optimum set of 256 colors.

Thus GIF format is lossless only for the image with 256 colors or less. In case of a
rich, true color image GIF may lose 99.998% of the colors. GIF files can be saved with
a maximum of 256 colors. This makes it is a poor format for photographic images.

GIF- Graphics
GIFs can be animated, which is another reason they became so successful. Most
animated banner ads are GIFs. GIFs allow single bit transparency that is when you are
creating your image, you can specify which color is to be transparent. This provision
allows the background colors of the web page to be shown through the image.

Interchange Formats
 The JPEG format was developed by the Joint Photographic Experts
Group. JPEG files are bitmapped images. It store information as 24-bit
color. This is the format of choice for nearly all photograph images on the
internet. Digital cameras save images in a JPEG format by default. It has
become the main graphics file format for the World Wide Web and any
browser can support it without plug-ins. In order to make the file small,
JPEG uses lossy compression. It works well on photographs, artwork and
similar materials but not so well on lettering, simple cartoons or line
drawings. JPEG images work much better than GIFs. Though JPEG can

JPEG
be interlaced, still this format lacks many of the other special abilities of
GIFs, like animations and transparency, but they really are only for
- photos.

Joint Photographic Experts Group

 PNG is the only lossless format that web browsers
support. PNG supports 8 bit, 24 bits, 32 bits and 48 bits
data types. One version of the format PNG-8 is similar to
the GIF format. But PNG is the superior to the GIF. It
produces smaller files and with more options for colors.
It supports partial transparency also. PNG-24 is another
flavor of PNG, with 24-bit color supports, allowing
ranges of color akin to high color JPEG. PNG-24 is in no
way a replacement format for JPEG because it is a
lossless compression format. This means that file size can

PNG
be rather big against a comparable JPEG. Also PNG
supports for up to 48 bits of color information.
-
Portable Network Graphics
 The TIFF format was developed by the Aldus
Corporation in the 1980 and was later supported by
Microsoft. TIFF file format is widely used bitmapped file
format. It is supported by many image editing
applications, software used by scanners and photo
retouching programs.

TIFF can store many different types of image ranging

from 1 bit image, grayscale image, 8 bit color image, 24
bit RGB image etc. TIFF files originally use lossless
compression. Today TIFF files also use lossy
compression according to the requirement. Therefore, it
is a very flexible format. This file format is suitable when
the output is printed. Multi-page documents can be stored
as a single TIFF file and that is way this file format is so

TIFF -
Tagged Image File Format-
popular. The TIFF format is now used and controlled by
Adobe.
 The bitmap file format (BMP) is a very basic
format supported by most Windows applications. BMP
can store many different type of image: 1 bit image,
grayscale image, 8 bit color image, 24 bit RGB image
etc. BMP files are uncompressed. Therefore, these are

BMP
not suitable for the internet. BMP files can be
compressed using lossless data compression algorithms
- Bitmap
 The EPS format is a vector based graphic. EPS is
popular for saving image files because it can be imported
into nearly any kind of application. This file format is

EPS
suitable for printed documents. Main disadvantage of this
format is that it requires more storage as compare to
other formats.
- Encapsulated Postscript-
 PDF format is vector graphics with embedded
pixel graphics with many compression options. When
your document is ready to be shared with others or for

PDF
publication. This is only format that is platform
independent. If you have Adobe Acrobat you can print
- Portable Document Format- from any document to a PDF file. From illustrator you
can save as .PDF.
 Exif is an image format for digital cameras. A
variety of tage are available to facilitate higher quality
printing, since information about the camera and picture -
taking condition can be stored and used by printers for

EXIF
possible color correction algorithms.it also includes
specification of file format for audio that accompanies
- Exchange Image File digital images.
 WMF is the vector file format for the MS-
Windows operating environment. It consists of a
collection of graphics device interface function calls to
the MS-Windows graphice drawing library.Metafiles are

WMF
both small and flexible, hese images can be displayed
properly by their proprietary softwares only.
- Windows MetaFile
 PICT images are useful in Macintosh software
development, but you should avoid them in desktop

PICT publishing. Avoid using PICT format in electronic

publishing-PICT images are prone to corruption.
Photoshop This is the native Photoshop file format created by
Adobe. You can import this format directly into most
desktop publishing applications.