Bitmap Vs. Vector Based Images: What’s the Diff Bro?

All image files can be categorized into two kinds, Pixel / Bitmap-based and Vector-based files. The two differ in the way computers analyze their content.

Pixel-based graphics are commonly known as bitmap graphics or raster images. In order to understand pixel-based graphics, you have to understand the word pixel and its origin. The word pixel is basically a combination of two words “pix” and “el”. The first word “pix” came from the word picture and the other word “el” came from the word element. The pixel is the smallest element of a picture or the tiny dots of colours (red, green or blue). Bitmap or pixel-based images are made by the combination of these tiny dots on a lattice. The picture on a bitmap graphic is a blend of pixels.

Pixel-based graphics have a larger file size than the files of other formats because in pixel-based graphics all the pixels hold their information and have their own separate attributes which on blending, make a complete picture. This process of image development increases its size and makes the file larger.

Vector-based graphics have a wide scope in line art. Apart from pixel-based graphics, in vector-based graphics images are developed by mathematical functions. Vector-based images are somewhat similar to geometric diagrams and use points and lines. Individual objects have individual attributes and characteristics which is unlike pixel-based images in which each and every pixel has separate attributes and properties associated with them.

The image quality in vector-based graphics does not depend on the dpi of the output device. This type of artwork in graphic design is good for logo designs because the resulting image is clear and crisp. Vector-based graphics do not work well when there is a need for soft-toned graphics in a picture. A picture which requires a lot of tonal changes is difficult to achieve in vector art.

Vector-based graphics are easily scalable to any size. A vector-based image is made up of lines and mathematical statements which makes it easy to scale images up and down without losing quality. The vector-based images are smaller than bitmap images because the file contains only the information related to objects rather than the information of each pixel.

Software Differences
Now that we understand the difference between vector vs. bitmap graphics let’s talk about software.

It’s clear that despite our technological achievements, there is no such thing as a “software for all purposes”.

Bitmap / Raster-based Software

Photoshop, Affinity Photo, GIMP, Pixelmator, and PIXLR are all software (either App-based or Web-based) that deal with bitmaps and are excellent at photo editing, digital painting and image manipulation tasks.

Adobe Illustrator 2024 Intro


Adobe Illustrator is a vector graphics editor developed and marketed by Adobe Inc. It is primarily used for creating illustrations, logos, icons, diagrams, charts, and other vector-based artworks. Unlike raster graphics software, such as Adobe Photoshop, which uses pixels to create images, Illustrator uses mathematical equations to generate shapes, allowing for scalability without losing image quality. Illustrator is widely used in various industries, including graphic design, web design, advertising, multimedia, and print media. It provides a wide range of tools and features for drawing, typography, colour manipulation, and advanced image editing, making it a versatile tool for beginners and professional designers.

Click on the image to expand it to a larger size
Illustrator Components

Tool Bar (green box) – The Illustrator toolbar is a collection of tools and options located typically on the left side of the Illustrator interface. It contains various icons representing different functions and tools that users can utilize to create and edit vector graphics. The toolbar in Adobe Illustrator provides quick access to commonly used tools such as selection tools, drawing tools, type tools, shape tools, and various other functions for editing and manipulating objects. Users can click on these icons to select a tool and then use it to perform specific actions on the canvas.

Menu Bar / Drop-down menu (yellow-orange box) – The menu bar in Adobe Illustrator is a horizontal bar typically located at the top of the application window. It contains various menus, each containing a list of commands and options for performing different tasks within Illustrator. The menu bar provides access to various functions and features, organized into categories such as File, Edit, Object, Type, Select, Effect, View, Window, and Help. Users can navigate these menus to create new documents, open existing files, edit objects, apply effects, adjust preferences, and more. The menu bar serves as a central hub for accessing Illustrator’s extensive array of tools and capabilities, making it essential for users to navigate and utilize the software’s functionalities efficiently.

Artboard (purple box) – An Illustrator artboard is a customizable rectangular area within the Illustrator workspace where you can create, edit, and arrange your artwork. Each artboard represents a separate canvas or workspace where you can design independently. Artboards create multiple design variations within a single Illustrator file or for different sizes or formats, such as print layouts, web graphics, or mobile app screens.

You can have multiple artboards within a single Illustrator document, and each artboard can have its own dimensions, orientation (portrait or landscape), and settings. Artboards provide a convenient way to organize and manage your design elements, allowing you to work on different parts of your project simultaneously or to experiment with various compositions without affecting other parts of your artwork.

Panels (red box) – The panels on the right side of Adobe Illustrator represent various functions and features that users can access to assist in their design process. These panels provide additional tools, options, and information to help users create, edit, and manage their artwork effectively. Some common panels found on the right side of Illustrator include:

  1. Layers: This panel allows users to organize and manage the layers within their artwork, enabling them to control the visibility, stacking order, and properties of individual objects.
  2. Appearance: The Appearance panel displays the attributes and effects applied to selected objects, such as strokes, fills, effects, and opacity settings. Users can modify these attributes directly from the panel.
  3. Colour: The Color panel provides tools for selecting and applying colours to objects, including options for choosing from swatches, adjusting colour values, and creating custom colour schemes.
  4. Brushes: This panel contains a collection of brush presets that users can apply to paths and strokes to create various artistic effects, such as brush strokes, textures, and patterns.
  5. Symbols: The Symbols panel allows users to store and manage reusable artwork elements, such as logos, icons, and graphics, as symbol instances. This helps streamline the design process by enabling users to reuse and edit common elements throughout their artwork.
  6. Libraries: The Libraries panel provides access to Creative Cloud libraries, where users can store and share assets, such as graphics, colours, and character styles, across multiple Adobe applications and devices.
  7. Transform: This panel offers controls for transforming and manipulating selected objects, including options for scaling, rotating, reflecting, and skewing.
  8. Properties: The Properties panel displays contextual options and settings for selected objects, allowing users to adjust various attributes and properties directly from the panel without navigating through multiple menus.

These are just a few examples of the panels commonly found on the right side of Adobe Illustrator. Depending on the user’s workflow and preferences, they can customize the workspace by adding, removing, or rearranging panels to suit their needs.