You've already started watching Raster vs. Vector

Raster vs. Vector

3:48

Whether you’re a developer, designer or anyone who has or will work with images or graphics on the web or in print – it’s important to understand the key differences between vector and raster images.

• 0:00

[? Music ?] [Treehouse]

• 0:08

Whether you're a developer, designer, or anyone who has or will work

• 0:11

with images on the Web, it's important to understand the key differences

• 0:14

between vector and raster images.

• 0:18

A raster image is made up of lots and lots of tiny dots or pixels,

• 0:21

each a different color arranged to display an image.

• 0:24

For example, as we zoom into this real-life image of Mike the frog,

• 0:28

you can see each one of the individual pixels.

• 0:31

On the other hand, a vector image is made up of paths,

• 0:34

each with a mathematical formula that tells the path how it's shaped

• 0:38

and what color it's filled with.

• 0:40

Unlike the raster image of Mike the frog,

• 0:42

as we zoom into this illustration of Mike the frog,

• 0:45

you see not individual pixels but solid shapes of color.

• 0:49

The major difference between the two is that raster images

• 0:52

don't retain their appearance as size increases.

• 0:55

When you enlarge a raster image, it becomes blurry.

• 0:58

Vector images, on the other hand, retain appearance regardless of size.

• 1:02

It's just recalculated to a larger size than the original.

• 1:06

Because vector files scale up or down without the loss of image quality,

• 1:10

they can be saved out at any size.

• 1:12

While vector images do not need a set resolution,

• 1:15

raster images depend on resolution.

• 1:17

Resolution refers to the number of each of those tiny pixels in an image

• 1:21

and is stated as DPI, or dots per inch.

• 1:24

The more dots per inch you have, the higher quality your graphic or image will be.

• 1:28

Vector and raster images are both used for print.

• 1:31

Vector images can only be used for print

• 1:34

and must be converted to raster before hitting the Web.

• 1:37

Images and graphics for the Web only need to be 72 DPI.

• 1:41

Raster images that are going to print usually need at least 150-300 DPI

• 1:46

for the highest quality print.

• 1:48

Since we're focusing on the Web, we won't go into much further detail,

• 1:50

but begin to understand how resolution comes into play

• 1:53

when dealing with images and graphics.

• 1:55

If you're not sure whether you should create a raster or vector file,

• 1:58

ask yourself are you drawing something from scratch or with only a few colors?

• 2:02

Are you creating something like a logo, for example,

• 2:04

that will be used at multiple sizes, like something as small as a business card

• 2:08

or as large as a billboard?

• 2:11

Make it vector.

• 2:13

Or are you working with something that will only be used at one size?

• 2:16

Are you editing a graphic or photo with tons and tons

• 2:18

of color effects and rich detail?

• 2:20

Make it a raster.

• 2:22

Okay, now some of you who focus solely on user interface design

• 2:25

might be wondering how does this apply to me?

• 2:28

Well, as a web designer, you'll thank yourself later

• 2:30

if you use vector as often as possible in your user interface design

• 2:34

and then convert it to raster when it needs to be uploaded to the Web.

• 2:38

For example, here we have a button created in pixels

• 2:41

and a button created in vector.

• 2:43

If for some reason we need to make the button larger,

• 2:46

we can easily scale up the vector version.

• 2:50

On the contrary, if we have a raster button and we try to scale it up,

• 2:55

it will get pixelated.

• 2:58

A perfect real-life scenario in which this is applicable

• 3:01

is in iPhone user interface design.

• 3:03

Imagine designing tons and tons of different screens

• 3:06

for your client before the Retina display came out.

• 3:08

They ask for their site to be updated for this higher resolution display.

• 3:11

Well, the designer who created most of their user interface in vector

• 3:15

would have significantly less work on their hands than the designer who

• 3:18

created their entire user interface in raster.

• 3:21

Now, there are always going to be extenuating circumstances in design,

• 3:24

and each decision to use vector or raster should be handled

• 3:27

to accommodate the task at hand.

• 3:29

But to make the smartest decision possible as a designer,

• 3:32

• 3:35

of using vector versus raster.

• 3:39

Now that we understand vector and raster images,

• 3:41

we can move on to discuss units and increments for the Web.

• 3:46

[? Music ?] [Treehouse]