Pixels have the ability to offer the kind of detail that vectors simply can’t. When used in the appropriate situation, vectors provide outstanding versatility and a quality image. For example, you can use a vector logo on anything from a business card to large displays like a billboard, and it will look sharp, with no degradation or pixelation. However, if you were to save a logo in raster format, the logo design would lose sharpness any time it’s enlarged beyond its original dimensions (like designing for a large print). Therefore, when creating raster files, you’ll need to consider possible uses of the design and how big the dimensions need to be.
While vectors offer a few distinct advantages over raster images, there are specific situations for a graphic designer to use each. For example, vectors are ideal for creating quality logos, illustrations, characters, business cards, packaging, print ads, and more. On the other hand, raster graphics are better for working with photos and complex images. Most often they are vector files, but it depends on what program was used to create it.
What are raster graphics?
Converting a raster image to vector involves recreating the image completely, and this can get complicated. Raster and vector are fundamentally different image formats, and getting them to look alike simply will not work most of the time. Because raster images can contain more complex detail and photorealism than vector images, data will inevitably be left out when you are transitioning from a complex format to a simple one. You will have better results when the source raster image is already made up of simple lines and color. Scalability is critical for certain types of projects, like logo designs.
In the last article of this module, we’ll explore responsive images in detail, looking at the tools HTML has to allow you to make your images work better across different devices. Like the method described above, inserting SVGs using CSS background images means that the SVG can’t be manipulated with JavaScript, and is also subject to the same CSS limitations. Designers, webmaster, and marketers that are starting out find it difficult to understand the difference between Raster and Vector graphics.
Image storage
When you create an image with Vector programs the file types will be .ai, .svg, .eps, .pdf, and .cdr. Vectors images are smaller in file size as their dimensions are controlled by mathematical formulas. This makes them suitable for transmission, also they carry a lot of data in small file sizes. Converting a raster image to vector formats can be done, but in specific contexts. For example, converting a raster image to vector is best reserved for simplistic designs rather than photographs and portraits.
- For example, in Photoshop, you can open a vector image, view it, or print it.
- Choosing the wrong format can result in a loss of quality—a degradation of individual pixels that lowers image resolution.
- The ease vectors offer in terms of being resized without losing quality is incomparable to raster images being scaled up or down.
- Raster graphics deal more practically than vector graphics with photographs and photo-realistic images, while vector graphics often serve better for typesetting or for graphic design.
- 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.
And, because they’re more accessible and easier to view online, they’re better for using on social media and when sharing images to an audience who may not have the tools to open a vector image. However, the number of pixels in a raster graphic can also increase the file size. Those photos taken with a 20-megapixel camera will take up more space on a memory card or hard drive than photos taken with an 8-megapixel camera. Likewise, very large files can also decrease the speed and responsiveness of your computer when you are editing them, depending on the specs and capability of the computer. The computer simply recalculates the equations whenever the size or position changes.
What Are Native File Formats?
Also, consider the level of detail in the image to know if it should be a raster/bitmap or vector image. Choosing the right file type isn’t difference between raster and vector difficult when you understand the key differences. Instead of using pixels, vector images consist of geometric shapes, curves, and paths.
Electronic television based on cathode-ray tube displays are raster scanned with horizontal rasters painted left to right, and the raster lines painted top to bottom. To give you an idea of the difference between the two, let’s look at an example. You can find this example live on our GitHub repo as vector-versus-raster.html — it shows two seemingly identical images side by side, of a red star with a black drop shadow. The difference is that the left one is a PNG, and the right one is an SVG image.
Vector Images
However, once a vector image is loaded, it can be manipulated more quickly than a raster image. Take a look at the image of the black panther illustration below. Technically, they are both raster images now, but for demonstrative purposes, the native file of the one on the left was a raster JPG and the one on the right was a vector EPS. As you can see from the zoomed-in views below, you can begin to see the individual pixels that make up the picture on the left, giving it a blurry – or pixelated – appearance. Meanwhile, no matter how much you zoom in on the panther on the right, you will always see smooth lines.
Raster graphics are made up of pixels, which are tiny dots that carry certain color information, and, combined together, they form an entire image. Vectors, meanwhile, have math as their building blocks and, consequently, do not offer the type of nuance that rasters do. During the 1970s and 1980s, pen plotters, using Vector graphics, were common for creating precise drawings, especially on large format paper. However, since then almost all printers create the printed image as a raster grid, including both laser and inkjet printers. When the source information is vector, rendering specifications and software such as PostScript are used to create the raster image.
Flexibility of vector and raster
Technically, it is possible to mix vector and raster data in the same image. Raster images have large file size defined by DPI or PPI with fixed height and width. To transfer Raster files, it’s a good idea to compress them first. A Raster image is not scalable as they have a fixed resolution and dimensions. The pixels get enlarged if you try to zoom the image that makes the image blurry. You can always scale down a Raster image to maintain its quality.
Still, as previously mentioned, vector graphics are not ideal for displaying detailed colors and imagery, as they often appear too simplified when compared to their raster counterparts. Vector programs can also take longer to render objects with more complexity, such as a photograph or landscape. Rasterizing an image changes the file from a vector format to a raster-based image. A rasterized image will no longer be composed of vector paths and curves, but will be made up of pixels, and you won’t be able to edit it using vector editing software. Understanding the differences in file types is essential so you can be sure you’re using the best option for your creative design project. Be sure to think about the ways a design will be used and how that could impact the size.
When to use a raster format
Sketchbook Pro and Corel Painter are other common raster editors, and file formats for raters include JPG, PSD, BMP, PNG, GIF, and TIF, just to site the most common examples. It’s true that 72 dpi raster images are usually the norm for web publications and they work just fine. You should either work with a vector source or use high-resolution raster files. The latter option is often the preferred one, because, sometimes, vector images are not accurately printed. If you don’t want to compromise on the image’s clarity, the recommended raster resolution is 300 dpi. Since you can’t save photos as vectors, printed magazines, newspapers, etc. use the photos in their high-resolution rasters.
