1.

Raster vs Vector
There are two main type of image files: Raster and Vector. Raster images are created with pixel-based software 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 math-
defined shapes created with vector software and are not as common; used in CAD/engineering, 3D animation, and Graphic Design for
processes that reproduce an image onto an object such as engraving, etching, cut stencils.

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. FIG.1

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. FIG.2
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. FIG.3
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.

1.1 Pixels vs Vectors

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.
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.

2. Vector Graphics
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.
 For categorizing purposes we 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.

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.

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, 3D graphics & animations.

We provide vector drawings for these services:

 Specialty printing: e.g. coffee mugs, frisbees, koozies

 Signs and banners: cut, sandblasted, carved
 Engraving
 Etching
 Metal stamping
 Laser engraving or laser cutting
 Decals, labels, stickers
 Large format printing
 3. 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

3.1 How to determine what size your raster image must be for printing:
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.

3.2 Can we enlarge the pixel dimension & resolution of a raster image?
Raster images have a certain amount of pixels 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.
4. Raster & Vector Summary

Raster (Bitmap) Vector

• Pixel-based Shapes based on mathematical calculations

• Raster programs best for editing photos and creating • Vector programs best for creating logos, drawings and
continuous tone images with soft color blends illustrations, technical 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 or larger • Can be scaled to any size without losing quality

• 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 • A large dimension vector graphic maintains a small file size
of spot colors
• Number of colors can be easily increased or reduced to adjust
• Some processes cannot use raster formats printing budget

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

• Raster images are the most common image format, including: • Can be easily converted to raster
jpg, gif, png, tif, bmp, 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 photographs
 • Common raster programs: photo editing / paint programs such • Common vector graphic file format: ai, cdr, svg, and eps &
as Photoshop & Paint Shop, GIMP (free) pdfs originating from vector programs

• Common vector programs: drawing programs such as

Illustrator, CorelDraw, Inkscape (free)

5. Additional information
DPI vs PPI
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 create the
digital image with: camera, scanner, or graphics software and can be modified with a photo/paint editing software.
Conclusion

When deciding between vector vs. bitmap, designers should always focus on the key aspects of the design and what message they
intend to convey. Images are a powerful way of sending messages, and if a designer selects the wrong type of imagery, the user may
lose interest in the product or service.

When to use a bitmap image

Designers should use bitmap images for websites featuring products, restaurants, travel, tourism, and e-commerce because the
images are more visually appealing. In digital applications, the designers use bitmap high-quality images to create an instant
likeness, prompting users to interact with the product. Through the use of lifelike imagery, designers can create a sense of
desirability and credibility that engages the user.

When to use vector graphics

Vector images are the primary choice for printing, logos, signs, illustrations, infographics, and creating animations. Vector images
provide high-quality, scalable images while also conserving file size. Versatile for many business applications, UI designers are
able to edit vector graphics and quickly generate new ones to meet project requirements. Vector images are also useful for
providing powerful, straight-forward messaging to a variety of audiences.