Bitmap vs Vector

Which One Is Right For You?

As a web design company, we realise that creative and technical ‘experts’ are often guilty of using a language that is baffling for the average layperson. Whether debating the merits of bitmap vs vector for a brand identity or developing a corporate responsive website or mobile app, it is important that the client is fully on board. This ensures that they can effectively value-add at the necessary phases of the design process.

A client recently engaged us to design a new corporate logo. During the early stages of fact-finding and concept discussions, we had to clarify certain terms to ensure that they were clear about the contribution that was required. And rightly so; we are after all designing a logo to be fit for their purpose, and not just for our portfolio.

The initial terminology used in logo design can sometimes confuse a client.

Logo

An icon, typeface or mark that identifies a company or product in its simplest form.

Identity

The colours, fonts and graphical assets that enable the viewer to instantly recognise and visualise a company or product.

Brand

A perceived emotion or gut feeling about a company, product or service.

Bitmap vs Vector

Another area that we had to cover, and the topic of this post, is the difference between vector and bitmap images.

Computer graphic images essentially fall into one of two categories; they are either bitmap or vector graphics. Each has its own characteristics and key advantages when used in specific applications. It is important to understand the differences between bitmap and vector, especially when designing a logo.

Bitmap

Also known as raster images, a bitmap is made up of a grid of individual pixels.  Each pixel is a tiny square that is assigned a unique colour value. When combined, these individual pixels form an image. If you zoom in enough you will see these individual pixels, especially in areas of high contrast.

When editing a bitmap image it is possible to zoom in and edit individual pixels using software such as Photoshop. More often, this is carried out on the image as a whole.

Bitmap images are the preferred format when working with photographs and published graphics and can be saved as one of many file types. These include:

• GIF – Small file size but poor quality. Best for images with large blocks of the same colour and/or animations.
• JPEG – A ‘lossy’ format with varying degrees of compression which will reduce file size and resultant quality.
• TIFF – A ‘lossless’ image format that results in high-quality images with large file sizes.
• BMP – Displays the same across all devices. A ‘lossless’ format and large file size. Largely outdated.
• PNG – A ‘lossless’ image format with an option for ‘alpha channel’. This allows for transparency.

Vector

Vector images are a series of points connected by lines or curves rather than individual pixels. Images are displayed by ‘instructions’ based on mathematical expressions and these intricate wireframes are then filled with solid colours or gradients. The resultant image is very sharp and precise. Scaling a vector image will not impact the quality in any way. The image remains as smooth as the original. A further advantage of using mathematical instructions to define the shape is the file size efficiency. Large vector graphics are usually much smaller than a bitmap counterpart.

Bitmaps are edited by manipulating individual pixels, whereas vector images are edited by transforming the shape, size and colour of each element. A popular software package for creating and editing vector graphics is Adobe Illustrator.

Vector graphics can be saved as multiple file types, such as:

• AI – This is the proprietary file type for Adobe Illustrator. A popular file type often shared between designers and printers.
• EPS – A well-supported vector file type used for graphics, text or illustration. Easily reopened, resized and edited.
• SVG – A web standard vector format. The scalable vector graphic can display vector images on a website. Supported by all modern browsers, it is ideal for responsive web design.
• PDF – This file format easily displays both bitmap and vector content. A good option for sending logo designs for opening, viewing and reviewing by the client.

In Summary

As mentioned above, if you zoom in enough on a bitmap image then you will see the individual pixels. This is far from ideal. You need to clearly display your logo or identity on a larger scale such as a banner or backdrop. The ability to adjust the scale without loss of quality is key to presenting a consistent and professional brand identity.

So when it comes to bitmap vs vector, selecting the correct image type is a vital step before any design process commences. Bitmap images are the ideal choice for displaying photographs and published graphics. For creating smooth and clear assets to represent your logo or identity then a vector graphic is the way forward.

You may only need a small logo for now but think of how big your logo, and your company, may grow.