For example, you might use a logo on something as small as a business card or something as large as a billboard. Vectors are ideal for both large and small format prints, because rasterized designs will lose difference between raster and vector quality when resized. While saving documents in a legacy version will provide greater versatility for your files, you may lose some data because of new features that aren’t supported by the legacy version.

It’s not uncommon to have both raster images and vector images in the same project, too. This is especially common with brochures, catalogs, and other print projects that combine illustrations and type with photographs. The file size of vector images and graphics can be kept to a minimum, unlike raster files that may become very large for high-resolution images. On the other hand, designs that are meant to be fully vector-based can become problematic when they contain raster data. While you will need a raster version of a logo for digital spaces, logos must be infinitely scalable and editable for the many other spaces they will inhabit.

Common Uses of Vector Images

A raster graphic, such as a gif or jpeg, is an array of pixels of various colors, which together form an image. If you’re saving a vector file, be sure to think about the programs others will need to open and work with the file. If you know which program others will be using, you can ensure that the program supports your file.

You can shrink the number of pixels using an image compressor, but then you’re creating an entirely new file. In other words, if you want the same image to appear at different sizes, you would need multiple raster images as opposed to just a single vector. Like we mentioned above, raster images, or bitmaps as they are often called, are digital images that are made up of pixels. When you view a raster image on a screen at 100%, all the pixels combine to create the image. However, if you zoom in on it, you’ll start to see the individual colored pixels. Photographs are the most common raster images, but any digital graphic can be a raster.

File Formats for Raster Images

Without repeating ourselves, we’ll give a brief overview of vector graphics. While raster graphics store image data as pixels, vectors store it as equations. Each “point” in a vector graphic corresponds to a master x-y axis that keeps everything in order, so a fresh image is generated at each new size. As such, vector graphics don’t use DPI or PPI because those values change based on the image’s dimension. They’re made up of paths, which are lines that connect to form shapes.

• Because each pixel is designated to a space on the grid, raster images are resolution dependent.
• In short, raster data here tends to lead to unusable logos and unhappy clients.
• Avoid raster-based programs, such as Adobe Photoshop, when incorporating vector elements that need to be scaled.
• Vector images are not as accessible as rasters, but you can save your vector image as a vector PDF for sharing, as that’s a format most users can open.
• The most common file formats for vector graphics are AI, CDR, and SVG, depending on which software you’re using to design vector images.

Discuss web design long enough and the words “raster” and “vector” are bound to come up. You may not know what they are or what the difference is between them, but you can already tell that they’re rivals. Early mechanical televisions developed in the 1920s employed rasterization principles.

Vector vs. Raster – File Size:

With that in mind, here’s everything you need to know about working with raster and vector files. If you are dealing with photos and require extremely intricate editing, raster is the most suitable choice. It would be a pain to edit vector images with pixel-point precision, and the result won’t be as impressive as a raster anyway. Similarly, if you wish to create a very nuanced image that features complexity in terms of color, tone, depth, and content, go for raster graphics.

For raster vs. vector graphics, the rule of thumb is to use raster graphics when image quality is the top priority, and vector for everything else. However, keep in mind that when putting these images on the web, browsers consider only the final dimensions, not DPI. The reason pixel density is important for web design is that images with higher DPI look better at large sizes than those with smaller DPI. So, if you want a high-resolution hero image background that covers your entire screen, start with a high DPI image. Vector graphics, on the other hand, are not restricted by DPI, one reason they’re great for web design — as we explain more below. Raster vs. Vector is a debate that will always rage on in the graphic design world.

Raster Images to Vector Images

Vector images are quite lighter than their raster peers because their dimensions are defined by mathematical calculations and not by millions of pixels. The high efficiency of their file sizes makes them much more convenient to transfer them from one device to another. Plus, they carry a lot of information in a relatively small file size format (compared to the same file size of a raster image format). The main difference between vector and raster graphics is that raster graphics are composed of pixels, while vector graphics are composed of paths.

This necessitates a vector source file since pixels cannot be scaled or altered as easily. When a logo is designed with any raster data, converting it to vector can be difficult and often impossible (see next section). In short, raster data here tends to lead to unusable logos and unhappy clients. Vector and raster images differ in their resolution, the amount of detail they contain, and where they are used.

Raster images are made up of many pixels, which are tiny blocks of color. Each individual pixel is so small that the image looks clear when you’re seeing it at its intended size. If you increase the dimensions of the image, you’ll notice the pixels and the blocks will become much more obvious. A vector image is an infinitely scalable digital graphic made out of mathematically calculated paths. Vectors are essentially geometric shapes that can be stretched or curved as need be. A raster image is any digital graphic that is made out of pixels arranged on a static grid.

Between raster and vector graphics, use raster when you need high-quality, pixel-perfect imagery without a concern for file size. Raster graphics are superior when it comes to color usage; the more pixels you add, the more lifelike the image. That gives raster graphics more capability for capturing blends, shading, lighting nuances, and gradients. However, always keep an eye on your file size — more quality means more data. Raster graphics are not scalable; they begin with a preset number of pixels and that number never changes.

Vector images (line work) can be rasterized (converted into pixels), and raster images vectorized (raster images converted into vector graphics), by software. In both cases some information is lost, although certain vectorization operations can recreate salient information, as in the case of optical character recognition. Rasterizing is the process of converting a vector image into a bitmap image. Sometimes, you need to rasterize an image because the file format you’re using doesn’t support vector images. Or, you might need to rasterize an image because you want to apply a Photoshop filter or bitmap effect that can only be applied to raster images.