Graphic Files Explained: Vector vs Raster | Acro Media
Anders Paulsen
Author Anders Paulsen
Director of UX
Posted in Experience Design
June 22, 2021
read
Back to blog

Graphic Files Explained: Vector vs Raster

Knowing what visual file type to use, and what the difference is, is an integral part of experience design. In one of our most-read articles, Anders Paulsen, Director of UX here at Acro Media, walks us through graphic files, making them clear and easy for us to understand.

Digital graphic files will generally fall into one of two categories—vector or raster. Vector graphics, such as logo files, use intricate paths made up of points and lines to create an image. Raster graphics, such as digital photographs, are created using a grid of tiny pixels. The purpose of this post is to further explain the difference between these file types and to help determine which type is required for a variety of purposes.

Vector

Vector files, made up of points and lines to create paths, can be scaled up and down without losing quality. This makes vector files the best format for graphic assets such as illustrations, icons and company logos, as the same file can be used for designs ranging from a mobile app to a large billboard without sacrificing quality or increasing file size.

Ecommerce Platforms and Drupal Commerce Drupal Development Drupal Customizable Products

Probably the most common example of vector-based files that we use daily without even realizing it are font files. Each letter that you type is a vector graphic. You can increase the text size or zoom in as much as you want and fonts will still remain clear when viewed online or in standard editable formats such as Word documents.

Although most online graphics are still raster-based, the introduction of vector-based SVG files allows elements like logos, illustrations and icons to be used in apps and web development. This will be an important factor moving forward with responsive site designs, as layouts and design elements are adjusted to fit various screen sizes and resolutions like retina displays.

Ecommerce Digital Marketing Strategy and Custom Ecommerce Solutions

Raster

Raster images are made up of many tiny squares called pixels and are often referred to as 'bitmap' images. When zoomed in closely, the individual pixels can be observed. The resolution of a raster file is referred to as DPI (dots per inch) or PPI (points per inch) and is the main determining factor for increasing file size.

Open Source Ecommerce Applications and Web Based POS

Essentially all digital photography is raster-based. Most graphic files found online are also raster-based and saved for a screen resolution of 72 DPI, a larger file size is usually required for use in printed material where the standard resolution is 300 DPI.

File Extensions

Typically you can distinguish between raster and vector formats by looking closely at the edges of graphic elements like text and logos. File extensions will also suggest which category a file will fall under, though there are always exceptions to the rule.

eCommerce Website Integration

Type

Extension

File Type

Raster

.bmp

.jpg

.png

.gif

.tiff

.psd

.pat

Bitmap Image File

Joint Photographic Experts Group (JPEG)

Portable Network Graphics (PNG)

Graphics Interchange Format (GIF)

Tagged Image File Format (TIFF)

Adobe Photoshop File

Corel Paint File

Vector

.eps

.svg

.ai

.cdr

Encapsulated PostScript File (EPS)

Scalable Vector Graphics (SVG)

Adobe Illustrator File

Corel Draw File

Both

.pdf

Portable Document Format (PDF)

Note: any of the above file types can be exported to a pdf format, so these files can be

either vector or raster or a combination of the two.

Disclaimer: Graphics software has come a long way over the years, resulting in a lot of line-blurring between programs. Raster-based images can be embedded into Adobe Illustrator and vectors can be placed and even created in Photoshop. With this in mind, consult a graphic designer when in doubt. Make sure the designer provides vector logo files when having your logo updated and ask your printer to double-check the resolution of images when having material professionally printed.

TL;DR

To recap, logo files should always be vector-based and SVG files can be used to display vector graphics online. Web graphics are generally not suitable for professional printing. When in doubt, consult a professional.


Editor’s note: This article was originally published on July 27, 2016, and has been updated for freshness, accuracy and comprehensiveness.

Demystifying the Design Process: UI/UX Explained

You may have heard of UX, and UI, often used in the same breath. These two terms are often seen together as (UI/UX) but are two very different ...
Keep Reading »

Personalization: Yesterday’s Trend, Today’s Necessity.

Businesses cannot shy away from investing in personalized digital experiences any longer. It’s not a temporary trend but a necessity for attracting ...
Keep Reading »

The Trouble with UX Adoption in Business

Getting buy-in for user experience (UX) design changes from executives isn’t easy. Often, it requires a shift in mindset from the heads of every ...
Keep Reading »

Fields marked with * are required.

×
×