Raster Files vs. Vector Files: The UX Edition
If you’re a designer or web developer you’re probably familiar with the terms “raster file” and “vector file.” But unless you’re a print designer or deeply involved in designing web sites, you may not have a solid understanding of the differences.
Internet users and creators encounter all kinds of files – text files like PDF and Word, video, audio, and images. Lots and lots of images. We’re going to home in on the last one: images.
You probably know that there are different kinds of image files: PNG, JPEG and GIF are the most common. But there are dozens more: digital cameras often use their own file formats, for example. Even though there are a lot of different kinds of image files out there, they all fit into one of two categories: they are either raster files or vector files.
What’s a Raster Image?
Raster files – also sometimes call bitmaps – consist of a fixed number of pixels. Photos are usually raster files because they are great at showing even the tiniest details. Raster files are also good because they can be edited pixel-by-pixel, so it’s possible to get the exact look you want from your image. In the image below you can see the pixels in the zoomed portion.
But it’s not all unicorns and rainbows with rasters. Because there are only a fixed number of pixels in the image, they become blurry and pixelated when zoomed in. Also, low-resolution images (below 300ppi) may look distorted when printed, especially on fabric. Raster files can become quite large.
For more information about all the different types of raster files, check out this post from Adobe.
What’s a Vector Image?
Unlike a raster file, vector files don’t consist of a bunch of pixels. Instead, they are made by using mathematical calculations to draw the image on a resizable grid. This means that you can make a vector file any size you want and it will always look clean. Because of this, vector files are generally used for logos and other images that have to work well at a variety of different sizes.
Vector files are also great because the file sizes tend to be smaller and you can edit them as much as you want without degrading the image quality. However, vector files can’t capture the same level of detail that a raster file can. Commonly-used vector files include SVG, AI, and DWG.
Why Does This Matter for UX?
In the past, we always used raster files when placing images on web sites and applications. Photos, logos, icons – you name it, it was a raster file. Most files were JPEG, unless you needed transparency, which called for a GIF. More recently, PNG files have largely replaced GIFs for images with transparency.
But over the past few years scalable vector graphics (SVG) have become very popular. SVGs aren’t new – they’ve been around for about 20 years – but they didn’t begin to see widespread adoption until about 2017.
SVGs are web-friendly vector graphics (hence the name), so they are perfect for things like logos and icons. Ever seen a fuzzy-looking logo on a web site? Or zoomed into a page and noticed that the icons look like they came from an old Atari game? SVGs are the solution to this problem. The example below illustrates this; both are the same icon at 1600 percent zoom; the left is from an SVG and the right a PNG.
If you’re designing a web site or app you should be using SVGs for your icons, logos, and other graphics. Photos should be rasters of course, but SVGs almost always work better for your graphic components. Also, SVGs come with two additional benefits. First, the file sizes are smaller than similar JPEG or PNG images, which means faster load times. Second, developers can use CSS to scale, set colors and apply gradients. So that means that the design team doesn’t have to provide a assets for every size and color combination (nor do developers have to manage them). Everyone wins!
As an aside to developers, most icon sets are now available as web fonts, which are also vectors. Those are even easier to use than having to past in SVG code everywhere you need an icon.
So if you’re a UX designer and are still using PNG icons and logos it’s time to make the switch to SVGs and web fonts. They are lighter weight, work in all browsers, and look great on any size screen. And best of all, it’s less work for you!