raster vs. vector graphics
Achieving Quality Images
Designing a "drawn" (as opposed to photographic) image in a "vector" format first will make it cleaner and much more pleasing to the eye. This is most often done with company logos, but is also done with any image that is not photographic in nature for best results.
A vector image
is mathematically defined—no matter how large or small the image is, you can enlarge it or shrink it ad infinitum. The mathematics of it remain the same, guaranteeing the clarity of the image.
The other type of graphic used is a raster image
, an image in which increased or decreased size is determined by the computer, which decides how many small blocks of each color are now necessary to keep the image looking the same after the change in sizing. Needless to say, the computer can only look at the information in the file, it can't look with the eye and notice that the image does not look nearly as good as it once did (always the case when attempting to enlarge the average raster image).
The example to the left, a client's logo that appeared on their original web page before we redid it, is a good example of a "raster" graphic. It was not well done to begin with, and seemed to have become much worse over time. When we designed their website, we took this in hand and worked the magic of vector imagery.
Look at the redone image on the right, designed as a vector image and then converted for use on the web. The size change was made in the vector format before converting the image to a JPG format, but clearly it is far better quality than the original logo. In addition, despite all the additional detail and greatly increased eye appeal and clarity, the difference in file size from the earlier version is only 1K greater. That's the difference that vector graphics make.
Usually images such as this are saved in GIF format, the other main image format used for the web. We saved the redone graphic above as a JPG because of the shading detail--JPG images generally handle this better at a much smaller file size than GIF images do. Generally, however, JPG format is reserved for photographic imagery and GIFs are used for "drawn" type images, similar to the one below: