What Are Raster & Vector Images?

In this post we are going to explain what raster and vector images are, the differences, and why you should care. We’ll try to keep this as short and simple as possible because the purpose of this post is to help educate you, not put you to sleep. So let’s get started.

Raster Images

Common file types: .jpg, .png, .gif, .psd, .tif

Raster images are your basic image files. This type of image uses pixels, or little squares of color information, to make up an image. The most common type of raster file is a normal photograph taken from any and all cameras.

Since raster images are made up of hundreds, thousands or even millions of little pixels, when you make that file larger, you are also increasing the size of those pixels. This is when the file starts to look “blurry”. So let’s say you want to resize a 4”x6” image you have and you want to get it blown up for a 3’x6’ vinyl banner for an event. You would be effectively increasing the size of that image by around 1800%, making those individual pixels much more visible.

Raster images do have their benefits though. Because they are made up of all these pixels, you are able to capture and create more detail in the image itself. The dpi (dots per inch) of an image is the measurement of how much detailed color information is in an image. If you were to print a 1”x1” image that has a dpi of 300, then that image has 300 dots of color information in it. With raster images, you’re able to manipulate the individual pixels, giving even more precise control.

Benefits of Raster Images

• Greater detail in the image

• Much more precise color control

• More complex gradients between colors

• Ease of use and compatibility

Disadvantages of Raster Images

• Cannot resize images and keep the same crisp detail

• File size can get quite large

• .jpgs and .pngs “flatten” or lose editability of separate layers when saved.

Vector Images

Common file types: .ai, .eps, .svg, .cdr, .pdf (If created in a vector program such as Adobe Illustrator or CorelDraw)

Vector images are created in vector programs, such as Adobe Illustrator. Instead of using pixels, vector images use math to draw shapes using points, lines and curves. So for that same 1”x1” box we used for the raster image above, we use four points and lines connecting them together to create it. We no longer need to think about what dpi the image needs to be because it doesn’t use pixel information, but instead, the image uses math to fill in the details.

​​When using vector images, you can easily create graphics that be scaled larger or smaller without losing any quality or becoming blurry. Because of this, logos are almost always created as vector images. No business wants a blurry logo on their sign or banners. Fonts, flat color designs and other types of graphics are usually also created in a vector program.

The downside of vector is that you can’t get the same sort of detail or complexity as you can with raster images. Since vector images use math to fill in the detail, you aren’t able to fill in specific details like you can with pixels. Blurring, drop shadows and other effects just can’t be done effectively with vector images.

Benefits of Vector Images

• Infinitely Scalable

• Smaller file size

• Editability

Disadvantages of Vector Images

• Limited Details

• Limited Effects

Conclusion

Both raster and vector images have their benefits and drawbacks. You should always stick with raster files like .jpgs or .pngs with your pictures, while using vector files like .ai or .eps for logos and fonts. As with any tool, as long as you use them correctly, you'll always get the best product and experience.

Check back later for another post about ›when we receive a client's logo as a .jpg and the process of how we recreate it in order to use it for any apparel decoration and large size printing.