Raster Graphics VS Vector Graphics

There was a time when all images on a website were forced to be compressed and optimized in order to be viewed in any reasonable amount of time. Sometimes the colors had to be dithered, or the sizes compromised. A combination of underpowered web browsers, cheap hosting services and a lack of internet bandwidth made it very difficult to view high quality images and other multimedia online.

Fortunately, technology and bandwidth caught up with the demand and images were freed from their low resolution presentations and multimedia was able to be easily streamed to powerful home computers that could instantly decompress and play it.

Now, images on websites can be presented as a traditional raster image, or as a vector based image. Not everyone is familiar with the difference between the two types of images, and in some situations it may not matter. But for designers, illustrators and web developers there is a world of difference.

A raster image is what is most commonly thought of when thinking of image files online. A raster image is essentially a grid of colors. Each of the points on the grid corresponds to a pixel and has a color and sometimes opacity. When the pixels are arranged on the screen, an image is formed. Raster images are fairly simple.

There are different file types for raster images such as jpeg, gif and bmp. Each of these file types simply describes the type of compression, or lack thereof, that is used to store the image. Raster images are compressed or placed into specific file formats so that they can be easily transferred and then read and displayed by any program that can open the file and put the pixels on the screen. This simplicity is one of the reasons that raster files enjoy such popularity. They are nearly ubiquitous online.

Vector based graphics are different than raster images. Where a raster image is a static series of pixels, like a photograph, a vector based image is actually a series of instructions. When a program opens a vector based image, it reads information about how to draw the image. The image that is displayed is somewhat reliant on the program that is being used to open the vector image and the settings of the screen or monitor that it is being viewed on.

Where a raster image would contain an actual pixel-by-pixel image of a circle, a vector image would instead contain the location of the circle on the canvas, its radius, fill color and other information.

Vector based graphics also require special vector based programs or 3D design programs to create, whereas a raster image can be made from anything that is displayed on the screen or that can be scanned into a computer.

However, vector based graphics have been used in print and illustration for many years. They provide a number of benefits over raster images. The largest benefit is that while a raster image is of a set size, and resizing the image can cause it to lose quality, a vector based image can be resized at will. Since the instructions in a vector image are how to draw the image, it can be redrawn at any size without losing any quality.

This means that a single vector image of a corporate logo could be used in several areas on a website and at several resolutions without ever having pixilated edges or pixel loss. A raster image would need to have several different files in order to achieve the same quality results.

Unfortunately, vector graphics are not in widespread use online. This can be attributed to the fact that until recently, not all browsers supported the display of vector based graphics. Even now, there is inconsistent support for the SVG (scalable vector graphics) file format which could leave a website without their vector graphics depending on the program being used to view it.

Raster graphics, on the other hand, are the basis for nearly all websites and are easily and universally readable by all web browsers.

For websites that rely heavily on charts or graphs, vector graphics may be the best options. For sites that are displaying static images such as photographs or scans of other images, raster graphics may be a better choice at this time.

In either case, the two important factors for hosting a site using these types of images are bandwidth and server storage. Server storage is important because the files will take up space, sometimes a lot of space depending on their resolution or size. Bandwidth is important because those same files will need to be sent out to users over and over again, consuming the bandwidth of the server.

In a perfect world, an unlimited hosting plan would be ideal since it would remove many restrictions. However, it may be more practical to search a site like Hosting Observer. in order to find a web host who is offering the level of service which is required in order to store and serve the entire volume of images needed.