Vector vs. Bitmap Images

What are vector and bitmap images, and how are they different?

Bitmap and vector are two types of images found online or as a supported image type in graphics software. It's almost impossible to discuss graphics programs without establishing an understanding of the differences between these two major 2D graphics types. While both are image types and used for a similar purpose, we've gone deep to find some dissimilarities. The two formats work differently from each other when you examine them closely.

Vector vs Bitmap

Overall Findings

Vector
  • Made of shapes.

  • More scalable without losing quality.

  • More specialized uses.

Bitmap
  • Made of pixels.

  • Compatible with Microsoft Paint, Adobe Photoshop, Corel Photo-Paint, Corel Paint Shop Pro, and GIMP.

  • Lose quality when the image is resized larger.

Vector and bitmap images are both pictures on a screen, but they have different compositions and focuses. Bitmaps are made of pixels, while vector images are software-created and based on mathematical calculations.

Bitmaps are not only more common in everyday life but are easier to use. You can quickly convert one format of bitmap image into another, and you can't turn a bitmap into a vector without special software.

Vector images are generally smoother and more usable, and you can scale them freely without sacrificing quality. In general, vectors are for making scalable work files, while bitmaps are for making sharable final products.

Formats: Bitmaps Are More Ubiquitous

Vector
  • Includes AI, CDR, CMX (Corel Metafile Exchange Image), SVG, CGM (Computer Graphics Metafile), DXF, and WMF (Windows Metafile).

Bitmap
  • Includes GIF, JPG, PNG, TIFF, and PSD.

Vectors are more specialized files and tend to appear in less common formats. Every picture you see on your phone, tablet, or computer is a bitmap, even if someone created it using vector tools.

Bitmap images (also known as raster images) are made up of pixels in a grid. Pixels are picture elements, tiny squares of individual color that make up what you see on the screen. All these squares of color come together to form the images you see.

Although not as commonly used as bitmap graphics, vector graphics have a lot of virtues. Vector images are made up of many individuals, scalable objects. They always render at the highest quality because they are device-independent. Objects in a vector image might consist of lines, curves, and shapes with editable attributes such as color, fill, and outline.

Ease of Use: Vectors Are More Robust

Vector
  • Resolution-independent.

  • Maximum quality regardless of scale.

Bitmap
  • Lose quality when scaling.

  • Easier to go from vector to bitmap than the other way.

Because bitmaps are resolution-dependent, it's impossible to increase or decrease their size without sacrificing image quality. When you reduce the size of a bitmap image through your software's resample or resize option, pixels must be discarded.

When you increase the size of a bitmap image, the software creates new pixels. When creating pixels, the software has to estimate the color values of the new pixels based on the surrounding pixels. This process is called interpolation.

If a red pixel and a blue pixel are beside each other and you double the resolution, two pixels will be added between them. Interpolation determines which color those added pixels will be; the computer adds what it thinks are the correct colors.

Scaling an image does not affect the image permanently. In other words, it doesn't change the number of pixels in the image. What it does is make them bigger. However, if you scale a bitmap image to a larger size in your page layout software, you'll see a definite jagged appearance. Even if you don't see it on your screen, it will be apparent in the printed image.

Scaling a bitmap image to a smaller size doesn't have any effect. When you do this, you increase the PPI of the image so that it prints clearer. This happens because it has the same number of pixels but in a smaller area.

Vector objects are defined by mathematical equations, called Bezier Curves, rather than pixels. Changing the attributes of a vector object does not affect the object itself. You can freely change any number of object attributes without destroying the basic object. An object can be modified by changing its attributes and by shaping and transforming it using nodes and control handles.

Fonts are one type of vector object. You can see an example of the data behind a vector image in this explanation of an SVG file.

Because they're scalable, vector-based images are resolution-independent. You can increase and decrease the size of vector images to any degree, and the lines will remain crisp and sharp, both on-screen and in print.

When you convert a vector image to a bitmap, you can specify the output resolution of the final bitmap for whatever size you need. It's important to save a copy of the original vector artwork in its native format before converting it to a bitmap. Once it has been converted to a bitmap, the image loses all the qualities it had in its vector state.

The most common reason to convert a vector to a bitmap would be for use on the web. The most common and accepted format for vector images on the web is Scalable Vector Graphics (SVG).

Due to the nature of vector images, they're best converted to GIF or PNG format for use on the web. This is slowly changing because many modern browsers are able to render SVG images.

The Final Product: Cartoons vs. Photos

Vector
  • Made of solid blocks of color.

  • Can be any shape.

Bitmap
  • Captures greater detail due to high pixel counts.

  • Restricted to a square or rectangle shape.

Vector graphics are continually becoming more advanced. Today's vector tools apply bitmapped textures to objects, giving them a photo-realistic appearance. These tools also create soft blends, transparency, and shading that once was difficult to achieve in vector drawing programs.

Another advantage of vector images is that they're not restricted to a rectangular shape like bitmaps. Vector objects can be placed over other objects, and the object below will show through. A vector circle and bitmap circle appear to be the same when seen on a white background. However, when a bitmap circle is placed over another color, it has a rectangular box around it from the white pixels in the image.

Final Verdict

Vector images have many advantages, but the primary disadvantage is that they're unsuitable for producing photo-realistic imagery. Vector images usually consist of solid areas of color or gradients, but cannot depict the continuous subtle tones of a photograph. That's why most vector images tend to have a cartoon-like appearance.

Vector images primarily originate from the software. You can't scan an image and save it as a vector file without using special conversion software. On the other hand, vector images can easily be converted to bitmaps. This process is called rasterizing.