November 27, 2016

Image Types: Pixel vs. Vector

Image Types: Pixel vs. Vector

Great! You are headed to Photoshop to start designing your dream logo *pause* your logo should be designed as a vector file. Basic shapes and text in Photoshop can easily be converted to paths (vectors) whereas more complex design elements will require you to manually create a path.

If you plan on designing anything digitally its important to understand the difference between TWO different image types: vectors and bitmaps/pixel-based images.

Bitmap (or pixel-based) images are complex and appear more photographic than vector images. Vector images store a lot less information than bitmap images and therefore are able to load faster.

Vector Images

Vector images are objects created by mathematical calculations. You can scale vector images to any size and the image will preserve its integrity.

Uses: Logos, Cartoons/Illustrations, Icons

Tools: Adobe Illustrator

Example File Types: . EPSs, .AIs, .SVGs and .PDFs.

Bitmap Images (a.k.a Raster images)

Bitmaps are pixel-based images. They are made up of thousands of itty-bitty pixels or dots. Each pixel can store a different color and the overall pattern of pixels will make up an image (think of each pixel as a piece of the puzzle that contribute to the overall image). If you try to enlarge a photograph you will see that it becomes blurry.

Uses: photos, printed design material

Tools: Adobe PhotoShop

Example File Types: . JPEGs, GIFs, .TIFs and .PNGs

Example of zoomed-in Vector logo vs. Bitmap logo

Raster file (.jpg) of logo zoomed in becomes blurry

Vector Image of Logo Zoomed in Still Appears Crisp

This post was originally published on Black Tech Diva.

If you learned something from reading "Image Types: Pixel vs. Vector" consider sharing it.

Hi, I'm Monica! I'm a Full Stack Engineer who is currently building technology to bring people together IRL at Meetup and focusing on growing the React Ladies community for women + non-binary React developers. I'm interested in discussing React, JAMStack, open-source, tech inclusion, automation and more. 🍿