Raster and Vector

Raster Graphics

Raster (aka bitmap) graphics are made of millions of tiny squares, called pixels. You can identify a raster or bitmap image by looking at it very closely. If you zoom in enough you will be able to see the square outlines of each pixel (especially in areas where colors sharply contrast).

Raster graphics typically have larger file sizes than their vector counterparts because software must keep track of and be able to render each pixel. Higher DPI (dots per inch) and PPI (pixels per inch) settings also contribute to larger files because the computer has to deal with more pixels.

Vector Graphics

You can identify a vector image by looking at its edges — a vector image will always appear smooth no matter how large you make it or how close you zoom in. This is only the case on a computer because vector graphics are created using mathematical lines and curvature, which is why there is no such thing as resolution/ until the image is exported or printed. Fonts are a good example of a commonly used vector graphics.

One of the advantages of using vector graphics is its file size efficiency. Because the files are only identified by mathematical descriptions and not individual pixels, files are often much smaller than their raster counterparts. Vector graphics, therefore, are often easy to transmit from one computer to another and also over the internet.

Raster Files begin with a certain number of dots per inch (Known as DPI or PPI - pixels per inch). The quality of your raster printed piece will depend on your DPI/PPI. The lower the DPI/PPI, the lower the quality of the print.

For more about DPI and PPI, visit DPI, Resolution, and Proportion!

Below are examples of what you might see when comparing vector and raster images:

Vector Art
(no pixelation when zooming in)

Rasterized Art
(pixelated when zoomed in)

[cherry_fixed_parallax src_poster="" invert_value="yes" custom_class="cherry_fixed_parallax1"] [service_box title="" subtitle="" icon="no" text="" btn_text="Contact Us" btn_link="contact" btn_size="normal" btn_hover_color="#c24d00" target="_self" custom_class="text_banner wow fadeIn"] [/cherry_fixed_parallax]