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.


Video Transcript

  • 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

    it's important to fully understand the advantages and disadvantages

  • 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]

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Allison Grayce

    Allison is a freelance web designer and UX consultant with experience working at small interactive agencies and large advertising firms.