There are many options when creating graphic files, so why is it that occasionally some files can appear clear and crisp when used on the web, while others can appear blurry or pixelated? The answer is that there are two main types of graphic files: Vector Graphics, and Raster Graphics. In this article, you will learn the difference between the two types as well as the benefits of each and situations to use them in.
Raster Graphics are comprised of tiny squares of color information, which are usually referred to as pixels, or dots.
Raster Graphics are usually measured in Dots Per Inch (dpi) when creating images or graphics for print, or Pixels Per Inch (ppi) when creating images or graphics for web use, which allows you to measure how much detailed color information a specific image contains.
Most popular file formats for Raster Graphics:
You can use a variety of programs to create Raster Graphics, however one of the most popular programs that designers choose is Adobe Photoshop.
Pros & Cons of using Raster Graphics –
Raster Graphics offer greater color detail, however since they are pixel based, this also means they have a finite number of pixels. Therefore, when you attempt to enlarge a Raster Graphic, the computer attempts to fill in the gaps from missing pixels with what it attempts to guess are the colors that should fit into the spaces. The interpolation of data is what causes the enlarged image to appear blurry or pixelated, since the computer does not have a way to know the exact colors that should be inserted. You can see an example of this in the screenshot below, where the inset shows what this raster image looks like when sized to 500% of it’s normal size:
Another pro to using Raster Graphics is that they allow you to have more precise control over editing your graphic’s detail and color information.
- For example, with a Raster Graphic, you can modify individual pixels of color within your image, therefore the customization options available with Raster Graphics are essentially limitless.
In the same sense, a con to this aspect is that if you would like to have increased control to modify individual pixels within your image, more than likely you would want to use a high resolution image (such as a 300 ppi/dpi or higher for example). This will usually result in larger file sizes than Vector Graphics, which contain less detailed color information.
- As an example, if you have a 300ppi photograph that is 16″ x 20″, your image will have a total of 96,000 total pixels, which is a lot of individual pixels of information for your computer to process at once, often resulting in a large file size.
While Raster Graphics are comprised of individual pixels, Vector Graphics are built using mathematically defined areas to produce shapes, lines, and curves. This is why Vector graphics are suited for graphic elements that are more geometric in nature such as shapes and text, whereas Raster Graphics are suited for more detailed graphics such as images.
Vector Graphics use points to create these shapes, lines, and curves, so where our previous example for Raster Graphics cited an image that was 2 inches x 2 inches at 300 ppi (containing 600 individual pixels of information for the image), a Vector Graphic of the same size contains merely four points that enclose the shape, and the computer uses mathematically defined areas to fill in the missing information.
Most popular file formats for Vector Graphics:
You can also use a variety of software programs to create Vector Graphics, however one of the most popular by far is Adobe Illustrator.
Pros and Cons of using Vector Graphics –
One of the best things about Vector Graphics is that they are infinitely scalable. This is due to the fact that Vector Graphics use their original equation in order to create consistent shapes whether they are being scaled up or down. This is one of the main reasons that Vector Graphics are usually recommended for Logos, or for large scale printing. For creating graphics for web use, you can create either Vector or Raster graphics as you can also export Vector Graphics as the popular Raster filetypes (JPG, PNG, etc.). You can see an example of how a Vector Graphic retains it’s original image quality even when scaled to 500% of it’s original size (as seen in the inset) in the screenshot below:
Another pro to using Vector Graphics is that they generally maintain more aspects of editability over Raster Graphics.
- For example, unlike opening a Rasterized JPG image, if you open a Vector Graphic you should be able to edit the original layers or shapes within it as they exist as individual elements without affecting other elements in the graphic.
A con using Vector Graphics is that they are often more stylized in nature than Raster Graphics, which also means that you cannot apply certain Raster effects such as blurring or drop-shadows to them.
In summary, there are countless ways to create graphics for your website, and now you have the knowledge to know the difference between Vector Graphics and Raster Graphics, and when and how to use either type in your workflow.
The difference between vector and raster graphics is that raster graphics are composed of pixels, while vector graphics are composed of paths. A raster graphic, such as a gif or jpeg, is an array of pixels of various colors, which together form an image. A vector graphic, such as an .eps file or Adobe Illustrator? file, is composed of paths, or lines, that are either straight or curved. The data file for a vector image contains the points where the paths start and end, how much the paths curve, and the colors that either border or fill the paths. Because vector graphics are not made of pixels, the images can be scaled to be very large without losing quality. Raster graphics, on the other hand, become “blocky,” since each pixel increases in size as the image is made larger. This is why logos and other designs are typically created in vector format — the quality will look the same on a business card as it will on a billboard.