What the heck are raster and vector images?

Wanna know about the difference between raster and vector images?

We see both raster and vector images everywhere around us, on packaging, on tv, in magazines. But what is the difference between them?  Here we go 🙂

Raster images are a bunch of color dots and vectors are a bunch of dots (aka nodes or Bezier points ) that form a line. Simple enough, right?  Let me go deeper.

Raster Images

When you go out shooting the autumn leaves or take a photo of the birthday boy, your digital camera makes a raster image file.  This file contains various data like when and at what setting you made that shot, but most important – it has the info about each pixel and it’s position in the image.

The pixel is the smallest building element of any digital image. Like a tiny brick in a wall. The pixels color and lightness vary and they are positioned on a rectangle net. Here’s an example of image so enlarged that you can see the pixels and their positioning on the net.

Back to the images. When you shoot a picture, the camera saves it at a certain pixel size.

For example my phone camera shoots at 12 megapixels, which  in this case is 3968 x 2976 pixels. Each pixel of these 11 808 768 has different color and lightness and they build the final picture I see. Like a puzzle.

Digital devices like a smartphone, laptop display, TV display or even digital photo frame, have the ability to reproduce digital images through light emission. Print devices like laser and inkjet printers can reproduce those same images on paper or other tangible surface by replacing pixels with ink dots. Here comes the question about the size.

All raster images are not created equal. Check the resolution.

The raster image resolution will give you a vital info – whether an image is intended for printing or for display. Printing requires higher resolution than display. Images for display are usually 72 ppi or 96 ppi (PPI stands for Pixels Per Inch), but again it depends on what exactly the purpose of the image is.

An industry standard is that raster images for print should be at least 300 DPI (DPI = dots per inch). For the sake of simplicity I’ll say that each dot represents a pixel.

If I want to know how large my phone camera image can print, I’ll have to do some simple math. Divide each pixel dimension to 300 (our print dots per inch) and in my case I get 13.22 x 9.92 inches. So this is what is called the physical size of an image at 300dpi.

If my inkjet printer is of superior quality or I want to use laser, I could print at 450dpi or even higher. Then the math will be  3968 : 450 = 8.81 inches for the long side and 2976 : 450 = 6.61 inches for the short side of my image. See how higher print resolution shrinks the physical dimensions of my photo?

What if you want to print your photo at exactly 4×3 inches at 300dpi?  This is resizing and I’ll show you how you do it next time.

What if I want to print this otherwise big photo on a paper with size of 20×15 inches? A 27 megapixels photo would be required to get a good print, but my photo is only 12 megapixels. The result will be visibly jagged edges in contrasting areas and visible pixels overall. It is also called pixelation.

Some degree of pixelation is well accepted for prints that are intended to be observed from a distance.

Pixelation is also used sometimes absolutely intentionally in visual arts and design.

Vector images

Now that I find hard to explain! Bear with me.

Vector images are figures or shapes created from lines and curves. A line has at least two points (nodes) – beginning and end. Each end point has a handle that can be moved and bends the curve in the wanted direction. If a curve has 3 or more points, the inner points have two handles – left and right. Depending on the point kind the handles can move symmetrically, independently, but in one direction, or separately in different directions.

I’m not going into how to work with the Pen tool now, as this is a topic for a book or a few hours of video, but hope you get the idea of what vector is and how it is built.

Now the sweet part about using vectors and why graphic designers love them is that no matter how much a shape is enlarged, it will keep the number of it’s points and will not pixelate. You can enlarge a vector shape, then shrink it  back and then enlarge it again (683 times) and it will still keep it’s quality, because it is a mathematical equation represented visually.

The downside of vectors for me is they’re never look alive as much as a watercolor image (that would be raster).

Of course good quality raster images can be traced (turned into vector), but this makes an almost pixelated version of the raster and usually doesn’t help a lot. But again, it depends on why one would need to trace an image.

File Formats

File formats are like surnames to your files 🙂  Raster and vector files are saved in different file formats and created / opened / edited by different programs.  I promise another post or two to look at this under magnifying glass.

Raster files are usually created/opened/edited in photo editing programs like Adobe Photoshop, Photoshop Elements, Gimp (free program), Krita (free program), Pixlr (free program) and sooo much more. There may be tens of thousands of photo editing programs and each specializes in something more niche like editing for photography or digital painting etc.

Common file formats for raster images are tiff, jpg, png, psd. Some of these formats can be native to a certain program and be opened /edited only by it and some are popular and other programs open them too even though they’re native not to them. Such popular format is PSD, which is native to Photoshop, but can be opened by many other programs. A not so popular native format is the REB format which is native to Rebelle – a program specialised in digital painting.

When you purchase raster graphics on the web, they are usually distributed in a few very popular file formats – PSD, PNG, JPG and TIFF. PSD is used for layered files, when there is a need to preserve the layers separate to allow for changes. For example a poster design offered as layered PSD file would allow for color changes or text changes, so the customer can modify it to her/his needs.

A PNG or JPG format (flat files as they have 1 layer in them) would not allow for text change, even though some color changes can be achieved through  various tools. Usually flat files are smaller in size than layered files. Both PNG and JPG are widely used for web where the size of the file is important factor.

TIFF files are great for keeping all color information in tact and are used by professionals in the print industry (but not only) because they’re lossless. They can be edited numerous times and saved and will not loose any quality, unlike the JPG files. JPGs loose a bit with each save.

Last about the raster formats – some of them can hold a vector layers. Like the PSD files, which can hold paths, vector shape layers and layer masks and vector smart objects (later on this). Same goes the other way around – some vector files can hold raster content (AI, CDR).

Now to vector file formats – most popular  AI (native to Adobe Illustrator), CDR (native to CorelDraw), SVG, DXF (native to AutoCad), PLT and many more.

Same as for raster, the vector file formats are programmed to hold vector information mainly. They are created, edited and opened by special programs for vector editing like Adobe Illusrator, Corel Draw, Inkscape (free program), Autocad and many more.

Vector files are used both in print and for web. The SVG files are often replacing the PNG in design for web and in app design, as they provide sharp graphics no mater of the device screen size of the end user.

AI and CDR are also capable of saving layers (like the PSD) and those layers can hold raster.

PLT files are used mostly for cutting machines like cutting plotters in the advertising and pattern cutting in the garment industry.

DXF files are most popular where blueprints are made – machinery design, architecture etc.

I don’t want to get too much into detail.  This post purpose is to scratch the surface and give you really basic knowledge of the difference between the raster and vector. When you go next time shopping for graphics you will know what are you purchasing and what to expect.

Hope this info will be helpful and shed some light for those who need it 🙂 Let me know if there’s something I missed to mention or you want to hear about.

Cheers!