Using Vector And Raster In Web Design

Posted on November 1, 2012 by

With all of the file formats and image options out there, it can be overwhelming when we need to what file types to use and send to clients.When working with many types of files, compatibility is usually a concern and when it comes to images and graphics, the format of graphic files is important. There are two big categories of digital graphics, vector and raster. Vector-based images are made of many tiny paths (curves) and lines, while raster-based images are made of pixels. But how do web designers know what graphics type to choose for their next projects?

Curves and thin lines used in vector images are derived from mathematical theories. Vector images are created using computer software, which can define node locations, curves and line lengths. Each curve and line in the vector image has an assigned color value. Because images are created using formulaic, defined approach, we can scale and resize them limitlessly and repeatedly without causing pixilation and reduced quality. Simply by looking at their edges, we can easily identify vector images. No matter how close you zoom in and how large you make it, a vector image always appears smooth. Texts used on word processors and web browsers are actually vector images. Even at the largest font size, you still get smooth curves and lines.

File-size efficiency is another significant advantage of using vector images. Because a vector image is essentially a collection of mathematical descriptions and not an arrangement of individual pixels, it is often much smaller than raster images. Due to their reduced size, vector images can be transferred more easily over the Internet and between devices.

Unfortunately, compatibility is a common issue when using vector images. They are typically saved as a very specific file format, which often can’t be opened using other software.

Logo designers consider vector format as the best option. Because the way vector images are saved, they have more flexibility when making changes and using images at different sizes. An image may be originally intended only for a website logo, but your client may ask the same image to be used for their merchandises and banners. It means you don’t need to create the same image all over again.

Most graphic design firms use vector images to create insignia and logos for their clients. These files are usually used as the basis for raster version of the same images, which can be used for web design.

Keeping vector images in an organized library can immensely save your time, because you can resize everything on the fly. High-quality, high-resolution clip arts are often delivered as vector images as well. Web designers can enjoy more flexibility and clients can get more for their money when receiving vector images, instead of high DPI versions. Fonts and types are also vector images; they allow you to maintain quality even if you significantly increase the size. This can keep types from looking jagged and blocky; it also helps typefaces retain their smooth edging and shapes. It is important to note that texts and images you flatten using Adobe Photoshop immediately lose their vector attributes.

Common file types for raster images are SVF, DRW, PIF, PCT and PS. There are also software-specific raster files such as AI, AIT and .ART for Adobe Illustrator; and CDR, CDRW and CDT for Corel Draw.

Raster images are also known as bitmap images because they are consisted of millions of pixels (tiny squares). Identifying raster images is easy; zoom in large enough and you’ll start to see square outlines of pixels. Files of raster images are usually larger than their raster counterparts. Higher PPI (pixels per inch) and DPI (dots per inch) can cause your files to become larger, because more data must be stored to allow software to keep track and render all pixels. If network bandwidth and storage are limited, file size become a significant issue.

Web designers should avoid using raster images when working on certain graphics elements, such as website logo. As always, create vector-based logos and save as raster when using them in web design. A quick visit to Google Image will reveal that nearly all images used in websites are raster-based. Raster images are perfectly compatible for digital publications, but when used improperly they can cause problems on print projects. If you want to make your website printable, use images that are scanned at high DPI. This means quality won’t suffer, when the webpage is printed. Raster images are also preferred when web designers work with photographs taken with digital cameras. JPG, GIF, PNG and TIF are very popular raster files.

EPS (Encapsulated PostScript) files are typically created mathematically like vector files, although it is also possible to create EPS files from raster images. This file format is very portable and highly compatible, because it is supported by nearly all graphics software. When native formats aren’t available, EPS files are a good alternative to using vector files.

Adobe PDF (Portable Document Format) can use both vector and raster images. PDF is a universal and compact way for delivering document across a wide range of platforms. Vector images in PDF are rendered, scaled and extracted; fonts are not flattened as an image element, but rather rendered as type. It means, when zoomed, texts will be rendered to show smooth curves and won’t appear pixilated. On the other hand, raster images appear as intended and will look noticeably jagged when zoomed too much.

Web designers can save a lot time if they start the project using the right type of file. Reworks and revisions over the course of a web design project can also be performed quicker and easier. Designers should evaluate how they’ll be using images. Vector images are best used for cross-platform images such as logos and illustrations. On the other hand, for the actual web design project, web designers should use raster images to ensure compatibility. Always keep a library of vectors images and save copies for tasks that require raster images. This approach should save them time during the duration of the web design project.

Author :

  • Adam Scott