As designers we come across with a lot of funny words like pixel or vector, but do we really understand the difference between the two? We usually relate the word pixel to file formats like .JPG or .PNG, files that have a specific size and should not be forced to appear in a bigger size, or else the quality of the image will be compromised. Meanwhile, we relate the word vector to files like .SVG, .EPS, or .AI, which is a file whose contents can be escalated infinitely without losing any quality. But why do we have both type of formats? What is the difference?
First of all, we must define what a pixel and a vector is. Let’s start with pixel. Picture a tiny colored squared block in a huge grid. In a close look you won’t see anything but a bunch of colored squares all aligned and boring, but as you zoom out you start to see something until you have a perfect picture of a cat (because Internet!). That tiny square is called a pixel, which is short for “picture element”, and all pixels together form what we call a raster image. The number of these pixels per inch (dpi = dots per inch) is called resolution. The smaller the pixel, the highest the resolution and the heavier the file. The optimal resolution for images displayed on screens is 72 dpi, while paper printed images require an ideal of 300 dpi. This is because printed images tend to be displayed on bigger surfaces and small pixels help keep the sharpness of the image and allows printers to deliver better results, while on-screen images tend to be displayed in smaller surfaces, and need to be lighter, so they can be loaded quickly. Please note that image resolution is completely independent from your monitor’s resolution.
Raster images should not be escalated beyond their original size and resolution or else quality is compromised, so if you need an image you can make as big as the moon or as small as an ant you need a different kind of image: a vector image.
So how do vector images work so that they never lose the magic? The answer might not be liked by those who jumped into art school running away from algebra: math. Luckily, they won’t have to make any calculations because that’s the computer’s job! Vector images exist within a mathematical space, so every line, polygon, or curve can be as big or as small as you want it to be. We could actually say that they are an idea, and quoting V for Vendetta: “ideas are bulletproof”, so basically size doesn’t matter as long as it is mathematically possible. Pixels on the other hand do occupy an actual space on screen, where it’s size and position will be the same no matter what. This is why vectors are the weapon of choice of those who need to work in large format: files are smaller and more handleable and quality is never compromised. This is because an image that is described mathematically needs significantly less data than an image that is described point by point.
So, which one is the best? The answer must always follow your needs. For example, logo design is best in vectors for a company logo must always look impeccable, no matter what size it is displayed. All typography is displayed as a vector, wether you’re working on Adobe Illustrator or Microsoft Word, unless it is rasterized (transformed into pixels). Photography, on the other hand is very much married with pixels, and so is digital painting since they require the use of an actual space on screen. This should define what software you want to use to create or edit your images, knowing what can bring you the best result according to your needs.
No comment yet, add your voice below!