graphic showing the difference between pixel based and vector graphics, using the Erica Neubauer graphic design logo as an example

What is the difference between pixel-based graphics & vectors, and when should you use them?

Ever wondered what a "vector" is? Or notice that your logo looks fuzzy when you try to enlarge it? Read on for a short definition of pixel-based graphics versus vectors and when you should use them.

Pixel-based graphics (also called raster graphics) are based on a tiny grid of points of color (or pixels).

 Can’t be scaled up
Difficult to change the color
Can be saved as a jpeg and used in lots of programs (Canva etc)
Useful for manipulation in Photoshop, social media graphics, website graphics, and many other low-res projects ⠀

Vectors are points on a Cartesian plane which are mathematically connected by lines and curves to form shapes.

Can be infinitely scaled up without ever seeing any of those pesky pixels
Easily change the color
Can’t be used in most programs unless saved as an svg
Useful for use in high-res projects, printed materials and extra-large scale projects

 

Good to know

It is essential that you have your logo in vector format, as most printing applications require it, and it gives you the ultimate flexibility for adapting your logo to fit your business needs. If you only have pixel-based graphic of your logo, most graphic designers can vectorize it for you for a small fee- send me a message if you need this service and I'd be happy to help you out.

Also, keep this mind whenever you save your vectors as jpegs or other raster files- in order to keep your vector logo looking beautiful and crisp in any application, you need to save it at the proper resolution. Print resolution should always be a minimum of 300 dpi, and make sure to save it at the actual size- i.e. if you need it for a 30" x 20" banner, a 300 ppi image at 3" x 2" won't help you. For web, dpi doesn't matter as long as the pixel dimensions (i.e. 1920 x1080) are big enough for what you need- you can find recommended pixel dimensions for Facebook and Instagram from this handy blog post by Sprout Social (keep in mind that things change quickly on the web, and be sure to double-check that the recommendations are up-to-date).

Pro tip: you should always double the pixel dimensions to accommodate retina screens (otherwise your graphic will really stand out, in the wrong way!). Or better yet, save your web graphics as an svg (vector files that are safe for web).

Ready to get an incredible new brand identity? Book a call at a time to suit your schedule

If you're still using a logo and branding that you DIYed and know its time to upgrade, let's chat! I've helped dozens of clients to hone in on the perfect all-around look that will attract the right customers.

Erica Neubauer uses Accessibility Checker to monitor our website's accessibility.

Scroll to Top