updated on 15 July 2020 | reading time: 2 minutes

Working with Images

Vector Images vs Bitmap Images

The main difference between bitmap and vector images is how the image is constructed- bitmaps are blocks of colors assembled in a grid format while vectors are shapes and colors built on mathematical formulas. There are inherent benefits and restrictions to each that make one more suitable for printing photographs and the other better at displaying web icons.

bitmap vs vector images

Bitmap (Raster) Images
The most common image files are Bitmap or raster images which are composed of little blocks of color called pixels organized in rows and columns. Each pixel is assigned a color code and a location, and when mapped together, they form a picture. When you zoom in on a bitmap image, you can see the individual pixels, so there’s a loss of quality. This is commonly referred to as resolution-dependent since the quality or sharpness of the image depends on the resolution.
Common bitmap image filetypes include:

  • .jpeg (or .jpg)
  • .png
  • .gif
  • .bmp

Vector Graphics
Vector images are based on geometrical formulas (mathematical equations) based on paths, instead of pixels, to represent images. Because of that, it’s possible to edit it resizing and changing colors without any loss of resolution, making them ideal for icons, logos, and web-based imagery. This makes vector images resolution-independent since the image quality isn’t affected by size or resolution settings. Made up entirely of shapes like rectangles, circles, curves and lines, vectors are drawn and then filled or stroked with color to create a vector image. Individual components of the image (or paths) can also be modified, edited, and resized without impacting the image.

Commonly used for illustrations, line art, logos, and icons- vector images are computer-generated and cannot be used (at least not practically) for photographs or photo-realistic images, which are better suited for bitmaps.
Common vector image filetypes include:

  • .svg
  • .eps
  • .pdf
  • .ai

Designer is primarily a vector editing tool, but basic image editing is also possible. Learn more about how to create and edit vector images with our tutorials.