Vector Icons Vs. Bitmap Icons

Written By: Iconshock – Professional icons

Icons used within applications are very important for the overall success of the entire application. First of all because their looks have a significant role in the overall appearance of the application, so they have to have a pleasant, well integrated look, and secondly the icons should be easy recognizable and very clear, so the end user will be able to easily figure out what is the function behind the icon. For that the icons should have a good image quality, being perfect up to the most insignificant details. To be able to create good quality images it is important to choose the right file format that will permit working with the image and, at the same time, keeping the quality of the image. There are many image file formats, but not all of them have the right properties to permit the designer to work with the image: to cut / add details, to use certain background colors or color / light effects, to minimize or maximize the image without loosing the quality, to compress the image, etc.

Image files are divided into two major categories: vector images and bitmap images. Both types of file are used for creating icons, but they are differentiated by what they are made up of. For beginning we can say that vector images are built of lines and curves while bitmap images are built of small dots (square shape) called pixels which are displayed in a grid. Having only these few information about the two categories of files we can say that they are dissimilar. For both categories of formats there are many file formats available. Only few of the many file formats are usually used and these are as follows: vector file types are EPS, AI, WMF and bitmap file types are TIFF, JPG and GIF.

As we already said, vector images are built of lines and curves, called vectors which also include information about their position and colors used. Because vector images are made of vectors, when modifying an image you actually change the properties of the vectors, properties that include color and position. So, you can resize, reshape, edit, and change the vector images many times without loosing their quality. Also you can display the image at any resolution without loosing quality of the appearance. With vector images you can use a lot of image effects and also you can do a lot of tricks: take out objects without altering the image, overlapping objects, altering transparency. All these changes and tricks can be done only because all necessary information about the shape of the image are stored inside the vectors, and when changes are to be made it is only a matter of changing the information inside the vectors.

Regarding bitmap images, we have already mentioned that they are made of small, squared points arranged in grids, called pixels. Each pixel is assigned a certain position and color that is seen at its best quality only at a certain resolution. If the resolution at which you are viewing the image is not the correct one then the bitmap image will not be a quality one. So, for bitmap images you either do not alter the resolution of the image or you’ll spend some time looking for the right resolution. When the right resolution is used, all pixels that compose the image arrange themselves like in a mosaic forming the correct image. The bitmap images are not displayed correctly even when they are viewed on an output device that doesn’t have the correct resolution. When bitmap images are altered – changing sizes, reshaping – the pixels are reorganized inside the grid in order to be able to resemble, as much as possible, with the original image. But due to the fact that square dots are used, the edges of the bitmap images will be ragged.

Although there are relevant differences between the two images formats both of them can be used for creating icons. Vector icons are the ones that look better in any form or angle. Even if you enlarge the image, at let’s say 400%, the edges of the picture are fairly smooth and the picture is as clear as in the small format. With a vector image you can also make an icon for an application and at the same time you can use the same file to make a billboard; the clarity of the image is the similar. The same thing happens for icons with various sizes; even if the size of the icon is the smallest or the largest you can still distinguish all the details of the icon. Not the same thing happens with the bitmap images; for these ones you have to use the right resolution for seeing the icons as they are. If you blow them up too much the icons will have uneven edges and sides, while the text, if any, is unreadable. These things happen because when changing the size of a bitmap icon, the size of the grid changes while the number of pixels remains the same. So, the software you use has to add other pixels necessary to see, as clear as possible, the icon that you’re enlarging. With the vector graphic does not happen the same thing because vector graphics are mathematical creations. The applications that use such files store inside the information about how the image should be drawn instead of how it should look like. This would be the main difference between the two file formats. For the computer it is easier to have the information on how a graphic should look like instead of him having to guess how it should redraw an image without loosing the quality.

By now, we have clearly understood what are the pluses and minuses of both formats: bitmap and vector. Although, regarding the quality of the icons and the easiness to work with them the best format is the vector format, this one has some disadvantages too: for the vector files used on the Internet they all require plug-ins, for printing certain vector file types it is required a PostScript printer to print properly, etc. This is why, presently, the most commonly used file formats are the bitmap formats.
About the Author

Iconshock, your best option when looking for stunning icons in your projects — www.iconshock.com – Proffesional Icons

Previous post:

Next post: