• ARTICLES
SEARCH

How-To Geek

What’s the Difference Between Pixels and Vectors?

sshot-480

As the basis of nearly every image format worth using, Pixels and Vectors are the broad categories of modern 2D image files. But what are they exactly, and how are they different?

While the differences in these two formats may appear obvious on the surface, the explanation is subtle and complicated. Stick around for a little bit of computing history and graphic geekery.

Pixels and Raster Images

baby pixels

Pixel is a contraction of the words Picture and Element. They’re not very different than the ones Russell Kirsch invented for the first digital image more than 50 years ago. Pixels (at least the pixels in digital art files) were made to recreate photography.

The idea was to recreate a photograph using a grid-based system of colors and tones. These “picture elements” are the indivisible building blocks of all digital artwork, complex or simple. Kirsch’s first image was a paltry 176 pixels in width (shown actual size), and in grayscale. Shown below, his infant son was his subject.

Raster is a term for all images that fit inside this model, and rasterization is the process of turning any sort of non-pixel based image into a digital pixel-based image.

Pixels and Monitors

LG_L194WT-SF_LCD_monitor

It’s important to understand that when we talk about pixels in graphic files, we are not necessarily talking about the same pixels your monitor is rendering images in. Pixels existed before Kirsch and the computer scientists that worked with him created digital imaging.

Pixels on monitors are collections of Red Green and Blue points of light, combining in various brightnesses to create the RGB color model. Because screens necessarily predate the images we view them on, monitor pixels existed before digital imaging.

sshot-460800px-RBG-LED

However, because monitors are based on the original models, including color models based on RGB, it can be confusing. Simply keep in mind we use the same word for the points of light on your monitor as well as the most basic piece of raster imaging. When we compare pixels to vector graphics, we are talking exclusively about raster graphic pixels, and not the pixels your monitor displays.

Vectors and Scalable Graphics

Sketchpad-Apple

The first vector drawing program was called Sketchpad, created in 1960 by Ivan Sutherland, only a few short years after Kirsch created digital imaging. Sketchpad allowed users to draw points and lines directly on a screen with a stylus. Although Sketchpad is a pale comparison to modern vector software, it is considered a direct influence on the CAD (Computer Aided Drafting) programs that would come later.

sshot-453

While pixels are literal “blocks” of an image simulating the points on your screen, vectors are points, lines, curves and polygons on an algebraic grid. These points, lines, curves, and basic polygons are called “primitives,” and are the basic building blocks of vector art.

sshot-452

The important distinction between pixels and vectors is that vectors exist in a mathematical space, as opposed to the more literal space that pixels exist in. Pixels are all equal size and have a clearly defined position; once you zoom into a pixel, you are unlikely to find any quarks or tau particles inside. Vector primitives, existing only as points on a grid in this mathematical space have no such limitation. As you zoom closer and closer to a point primitive in your vector image, you realize you can never really get any “closer” to it than you originally were.

sshot-451

The helpful consequence of this is that vector images operate independent of image resolution. Raster images often look poor when they are low resolution, or describe an image with very few pixels. Vector art, on the other hand, can be blown up and stretched with no loss in quality whatsoever.

What are they good for?

resolution demo

Typography, in particular, is perfectly suited to vector graphics. Abstract geometric shapes are easily defined with clean-edges and curves of vector primitives. And because they are scalable to infinitely small and large sizes, entire alphabets can be contained in very small files and used at nearly any size.

mabel_sc3_inks_new

Line art is well suited to modern vector programs like Flash. Many artists prefer to create their artwork in vectors as it allows immaculately clean lines, as in this image from John Krisfalusi’s blog on animation.

photorealistic-mustang-vector-car

Vector is also a very popular format for many auto advertisements. Vector cars are actually the rule, rather than the exception for modern advertisements, as the clean lines and sharp clarity possible in vector art hold up even at enormous billboard sizes. Super-high megapixel photography for billboard art would create files too large to effectively use.

Saturn_eclipse

However, pixels were created for photography, and are still the best model for photographs and photo-like images, such as digital painting. Deep space photography from satellites like the Hubble Telescope or spacecraft like Voyager 1 would be impossible with film photography.

PaleBlueDot

Quite possibly the most epic pixel ever photographed.

Image credits: All images assumed fair use. From Wired.com article: http://goo.gl/j5jw Monitor derivative from wikipedia: http://goo.gl/qOdg Sketchpad image: http://goo.gl/FvY6 RGB Lights from Wikipedia: http://goo.gl/BzEX John K inked image: http://goo.gl/Nj4U Vector car: http://goo.gl/LN2D

Eric Z Goodnight is an Illustrator and Graphics Geek who hopes to make Photoshop more accessible to How-To Geek readers. When he’s not headbanging to heavy metal or geeking out over manga, he’s often off screen printing T-Shirts.

  • Published 10/21/10

Comments (14)

  1. kiwkim

    Excelente!

  2. Tim

    I learnt the difference back in the 70s and 80s when arcade machines used to come in either vector or pixel varieties. Used to love vector games like Star Wars and Tempest.

  3. Eric Z Goodnight

    I seem to remember that the first “Video Game” ever developed was a vector game. Of course, all 3d video games are vector, just in three dimensions as opposed to two. The concept of “primitive” also applies.

  4. db

    Thanks!! I love to do photography and I’m an architect so I kind of new the difference, but this makes it super clear. Great article.

  5. Jeka

    Awesome article

  6. Ekstor

    Vectrex!!

  7. DroppingPants

    Raster is also known as bitmap (I’m not talking about BMP).

  8. IRFAN

    really ! good !
    Jazakallah !
    how can i send this page to my friend ?

  9. ibnmisr

    good work,
    good article,
    i grateful for you

  10. ssrao

    IT IS VERY INFORMATIVE AND EDUCATIONAL
    VERY GOOD ARTICLE

    THANK U

  11. Learnertt

    This article is as clear an concise as a vector based drawing :).
    At work we started using a software that measure drawings and the option they had were 1)Vector based drawings and 2) Raterized images like a scanned drawing.
    this page is very useful

    Thank you.

  12. John

    Good article. Sometimes ones like these satisfy a curiosity that we didn’t actually have in the first place, as in I don’t really care how it works, I just care that it does. But discovering why it works is one of those things meant by the suggestion that each new day isn’t complete unless there’s something new learned. It doesn’t really matter if it’s trivial or not. To me, this one was. To others who’ve commented, it wasn’t, since it relates to what they do as a career or a hobby.
    Shouldn’t have included the link to the most epic pixel ever photographed, though- took me off on a tangent that took me hours to get away from. Good thing my coffee pot was fresh when I started.
    Thanks. (Seriously.)

  13. Blaine Stewart

    For a while i thought i am in a history class.I do know about pixels a little bit but not as much as you do. Well thanks for expending my knowledge over pixel and Vector.

  14. Alex

    IRFAM. The easiest way always is to send the link.

Enter Your Email Here to Get Access for Free:

Go check your email!