What's the difference between vector and pixel graphic types?
top of page
Search

PNGs, JPGs, and SVGs, oh my! What's the Difference Between Vectors and Pixels?

Your designer asked you to send her your logo in a vector file and all you can think about is Despicable Me’s villain named Vector. Same.



However, in this case, we’re not exactly talking about villains committing crimes with both direction and magnitude. 

 

Vector Graphics

A vector graphic, created in a program such as Adobe Illustrator, is “mapped out using mathematical equations which calculate where the edges of the shapes sit in relation to one another [Mela Creative],” which results in a graphic that can be zoomed in or out without the quality changing or looking blurry/pixelated. Common vector file types are AI, EPS, and SVG. For use on a website, SVG is likely your best pick.

 

Pixel Graphics

On the other hand, pixel graphics, created in a program such as Adobe Photoshop, are made up of very tiny colored squares (pixels). When you zoom far enough in, you can often see the squares, and the image looks blurry and/or pixelated. These types of graphics are perfect for static images that won’t be scaling up or down much (ex. social media graphics). Common pixel graphic file types are PNG, JGP, and WebP.

bottom of page