Image Types: Pixel vs. Vector

Monica Powell
Black Tech Divas
Published in
2 min readNov 27, 2016

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.

--

--

Black Tech Divas
Black Tech Divas

Published in Black Tech Divas

Tricks, Tips and Thoughts from Women of Color in Tech.

Monica Powell
Monica Powell

Written by Monica Powell

web developer // diversity in tech advocate // #GIRLBOSS awardee // Learn more here: www.aboutmonica.com and www.datalogues.com