Should You Ever Use Bitmap Graphics?

To use a bitmap, or not to use a bitmap? For many website owners, this question comes up frequently while choosing resources to use for their site. Bitmaps were once one of the most popular image types, but their use in websites has waned — W3Techs reports that today only .03 percent of websites use BMP files in their site design. There are some instances in which a BMP might be the right file type to use, however. Let’s look at the difference between bitmaps and other file types, as well as when you should choose one over the other.

Raster Images

Bitmaps, or BMP files, are what are known as a “raster” image type. This means that they are made up of a grid of pixels, wherein each pixel is assigned a value of color. Pixels are essentially a single point, the smallest element that a display device can render. This is where the term “Bitmap” comes from, as the image is a map of pixels or bits. Raster images are dependent on the resolution they are displayed at to appear correctly. When a raster image such as a BMP is scaled or displayed at a higher resolution that intended, the pixels are stretched. This can lead to a blurry image.

Most digital photographs and scanned images are raster images, in part because bitmaps and other raster images are best at displaying realistic images. Bitmaps can contain any number of colors in their palette, which makes them ideal for creating shade and tone. They can create rich black and white images — PrePressure points out that the typical grayscale bitmap image contains 256 shades of grey, even though the human eye only requires about 100 to perceive an image as lifelike.

If you are using a resource for your website that requires photo-quality detail, a bitmap or other rasterized image is often your best bet. However, large images in BMP format can be slow to load on your website due to their size, so they should be used sparingly so they do not make your website bandwidth heavy.

Vector Images

Vector images are constructed from a series of geometic shapes comprised of lines, points, and curves. This is why they are referred to as “vector” images — the drawing is little more than X and Y coordinates in a grid that lines are connected to. Vecor images exist as a mathematical equation that displays these lines and shapes as an image, which makes them easy to scale up or down without sacrificing image quality.

Unlike raster images, vector images do not lose visual quality when they are displayed at higher resolutions. In general, vector images have an artificial or constructed look to them, in no small part do to their sharpness and lack of blur. They are a poor way for the average designer to create realistic images, though there are always exceptions — Shutterstock offers a wide selection of vector images that have been created to appear more realistic.

Vector images are best used in your website to create logos and other infrastructural elements such as buttons because they load quickly and scale well across multiple devices. However, vector images tend to lose their thinnest lines when they are scaled down in size dramatically, so be sure that your vector images don’t contain important elements that might vanish when they are displayed on a mobile device or other small screen.