Definitions >

Raster Graphics

What are Raster Graphics?

A raster graphic is an image created from thousands of pixels.

raster graphics cover

It’s fairly easy to spot, but you will need to get your magnifying glass out. Zoom in on your image -- particularly where one color contrasts with another -- and take a look at the lines.

If it appears unsmooth and blocky, it’s probably a raster graphic.

What You Need to Know About Raster Graphics

1. A ‘Bit’ About Rasters

A bitmap, also known as a raster graphic, uses thousands of tiny pixels called bits. The bits form a recognizable image. In most images, the individual pixels and pixel graph are not visible. However, when you zoom in or resize the image, the pixels start becoming visible.

Pixelation is the term used to describe an image that has been resized to the point pixels have become visible. Each bit in the image is one single color.

The bitmap of a 1280 x 720 image contains 1,280 bits wide and 720 bits tall. Think of graph paper, each square on the graph is one bit. The graph would be 1,280 squares wide by 720 squares tall.

2. Common Raster File Formats

File formats are the easiest way to distinguish a raster file. They will be saved in one of the following formats:

  • .gif (Graphic Interchange Format)
  • .jpg (Joint Photographic Experts Group)
  • .png (Portable Network Graphics)
  • .psd (Photoshop Document)
  • .tiff (Tag Image File Format)

These are the two file formats that use both vector AND raster graphics to create a universal file:

  • .pdf (Portable Document Format)
  • .eps (Encapsulated PostScript)

3. Raster Graphics vs. Vector Graphics

Digital graphics files come in two main forms: raster and vector.

Vector graphics are created from lines and curves (paths) rather than pixels. They’re great for designing logos and fonts. Why? Because no matter how much you increase the image, it never becomes pixelated. Essentially, you will always have smooth lines.

raster stars
(source)

Raster graphics are created from pixels. When you expand your image, you are expanding those pixel blocks. That’s why the image becomes blurry if you make it too large.

When to Use Raster Graphics in Your Design

1. When You’re Designing With Photographs

Many niches demand realistic photographs. Industries such as travel and cooking/recipes rely on photographs to help convert visitors to customers.

Travel websites rely on realistic and exotic photographs to lure customers to buy travel packages. Vector graphics wouldn’t have the same effect. Raster graphics are more realistic.

Restaurants use enhanced pictures of real food to lure in customers as well. A computer-generated hamburger just wouldn’t get the job done.

Retail and e-commerce businesses must use real photos of merchandise so customers know exactly what to expect when they order online.

There is no replacement for authentic photographs when it comes to industries such as travel, food, and retail.

2. When You’re Designing for the Web

Raster graphics can be more visually appealing for backgrounds. Raster graphics have softer edges and depth of color. The soft, blurred lines allow the forefront and text to stand out.

Raster backgrounds include wood grain, ocean, and rocks. These types of backgrounds look realistic and are more visually appealing.

The background is usually sized to fit and does not need to be scalable. Therefore, raster graphics are a great option for backgrounds.

3. When You’re Manipulating Images

Raster graphics allow you to apply special effects such as blur, drop shadow, feather, and glow to your images.

  • Blur effects can help you soften the lines or background of an image. It can help make the forefront of your image pop.
  • Drop shadow gives objects a raised effect. A shadow appears under the object with the applied effect.
  • Feather makes objects appear airbrushed or painted.
  • Glow adds a shadow around the entire background of an image, compared to under one corner (drop shadow).

There are many other special effects which can add an artistic feel to your images. Raster effects help designers show off their creativity.

We enjoyed exploring this topic with you. Want to keep going? Pick one of these related terms to read next:

A. Gradient [grey-dee-uh nt], noun: As the perfect transition, jump into this definition of gradients. You’ll learn about how to use them in modern design… Read the full definition »

B. Skeuomorphism [skyoo-uh-mawrf-siz-uh m], noun: Apple taught us the simplicity of effective design through this nostalgic technique… Read the full definition »

C. Vector Graphics [vek-ter graf-iks], noun: This scalable image file is a favorite for many reasons, especially if you’re an illustrator… Read the full definition »

Try Figma for free.