EnterprisePricingCustomersBlogLog in
Definitions >

Bitmap

What is a bitmap?

A bitmap describes a type of image that web-users encounter all the time without realizing it. Basically, it’s a grid where each individual square is a pixel that contains color information. The key characteristics are the number of pixels (or squares in the grid), and the amount of information in each grid square (pixel).

bitmap cover

If you’ve already been reading up on your design vocabulary, you might be thinking that this sounds… familiar. Is it déjà vu? Not quite. Bitmaps and raster images are interchangeable terms that refer to the same concept: a grid full of pixels that—when arranged densely enough—form a clear image.

What You Need to Know About Bitmaps

Like raster graphics, bitmaps are made up of individual, tiny points that blend together to form a unified image. Unlike vector graphics, which are infinitely scalable, you can’t stretch or enlarge them without compromising the quality.

1. How It’s Created and Stored

When you break down an image into a grid made of thousands of squares, you get a bitmap. Each square in that grid holds a little bit of color data and displays (or doesn’t display) a color based on that data. Like a color-by-numbers sheet, a key correlates each point’s data assignment with a color. In the end, it provides the literal map that tells you what that image should look like once it’s put together.

2. Bitmap Graphics vs. Raster Graphics

bitmap vs raster
(Source)

Raster graphics and bitmaps are closely related. Though they’re not exactly the same thing, the two phrases are often used interchangeably. If you’re curious about the subtleties: * A bitmap refers to a specific type of data storage—a map of bits. * A pixmap is, similarly, map of pixels. * A raster image can be either of the above, depending on how complicated the encoded data is.

3. Bitmap File Formats

There are several file formats to choose from, and each has advantages and disadvantages. You’ve likely heard of (or used) some of these file types—BMP, GIF, JPEG, EXIF, PNG, and TIFF. Note: All of them except BMP files can be compressed and transferred via the web.

You can determine a file’s format by where it came from or how the image will be used. Windows exclusively uses BMPs; GIFs and JPEGs are designed for web transfer; and EXIF files come from digital cameras and carry photo-specific information and camera settings.

BMPs are large, full files that can’t be compressed. Other formats, like GIF, JPEG, and PNG use compression algorithms that make the files smaller and easier to upload and download via the internet, making them extra convenient when working with online projects or designs.

4. Problems with Bitmaps

First, remember that the size of the file correlates directly with its quality. The higher the quality, the bigger the file—which can be tough if you want to use a high-quality image on the web (and you probably do!).

problem with bitmaps
(Source)

Second, keep in mind that a bitmap graphic can become pixelated. Pixelation happens when you stretch an image until the pixels become visible, making it blurry or blocky. But if you’re aware of these problems and take them into consideration during your project, you can work with bitmaps without too much hassle.

When to Use Bitmaps in Your Design

Bitmap images can streamline your design process by saving you time, effort, and energy. Knowing what you need beforehand will save yourself stress and complications down the line. They’re ideal when you need realistic, easily-editable images, or when working with photos.

1. When Creating Realistic Graphics and Images

realistic graphics with bitmaps
(Source)

Bitmaps are perfect for creating detailed images (like photographs) because of the amount of data each pixel can store. The greater the amount of data, the broader the range of colors it can display. And, it’s much easier to create a colorful image with realistic, transitioning color tones when you have access to a full range of colors.

2. When You Need Detailed Images That Can Be Easily Altered

When you’re looking to alter, edit, or add effects to your images, bitmaps are the way to go. You can change the color profiles of individual pixels to affect the look of the entire image. You can also smooth or feather out lines, create a drop shadow, and even up the contrast between the background and foreground.

3. When You’re Working with Photos

Because photos naturally use pixels to form images, it makes sense to translate them to an analogous bitmap. You can make subtle, transitional edits and alterations by targeting the color makeup, which then affects the image composition. Just watch for pixelation!

1. Raster Graphics, noun: You see them every day, and you might not even know it. Read the full definition » 2. Gradient, noun: at least two colors gradually transitioning between each other to fill a shape or area. Read the full definition » 3. Skeuomorphism, noun: a style that mimics materials and dimensionality to create a connection to real life objects. Read the full definition »

Try Figma for free.