Raster vs. Vector


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

    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