Digital images can be stored and represented in two main forms: bitmap and vector. Each has unique characteristics that affect scalability, file size, and suitability for specific tasks.
What are bitmap and vector images?
Bitmap images
Bitmap images, also known as raster images, are made up of a grid of individual pixels, where each pixel holds a specific colour value. The entire image is stored as a sequence of these colour values arranged row by row across the image. These pixels are often tiny squares, and the image is built pixel-by-pixel to form a complete visual.
Bitmap images are resolution-dependent, which means that the image is created for a specific number of pixels (height and width), and its quality is tied to that fixed resolution. When scaled up, the image can become blurry or pixelated.
Common bitmap file formats include:
JPEG (.jpg): Widely used for photographs and web images.
PNG (.png): Supports transparency, used for web graphics and design.
GIF (.gif): Limited to 256 colours, often used for simple animations.
BMP (.bmp): An older format with minimal compression, often resulting in large file sizes.
Bitmap images are commonly used when representing complex images, especially those with many colours, gradients, and fine details—such as real-world photographs or digital paintings.
Vector images
Practice Questions
FAQ
Lossy compression methods like JPEG work by permanently removing certain data from the original image file to reduce its size. This is done by identifying parts of the image that are less likely to be noticed by the human eye, such as subtle colour differences or fine details in textures, and discarding that information. As a result, the image file becomes smaller but at the cost of visual fidelity. JPEG uses a process called Discrete Cosine Transform (DCT) to convert image blocks into frequency data, then discards high-frequency components that represent fine detail. While the compressed image may still look acceptable to most viewers, repeated saving or high levels of compression can lead to visible artefacts such as blurring, blockiness, or colour banding. These artefacts become more noticeable when the image is enlarged or edited. Unlike lossless compression formats, JPEG cannot perfectly reconstruct the original data, which is why quality is lost.
Anti-aliasing is a technique used to smooth the jagged edges that often appear in bitmap images, especially when displaying curved lines or diagonal edges. Since bitmap graphics consist of square pixels arranged in a grid, diagonal lines can appear stepped or jagged, particularly at low resolutions. Anti-aliasing works by blending the colours at the boundaries of the image or shape to create a gradual transition between the edge and the background. This creates the illusion of smoother lines and curves. The pixels at the edges are assigned intermediate colours that soften the harsh transition, reducing visual harshness. For example, instead of having a sharp black line next to a white background, anti-aliasing would introduce grey pixels along the edge. This is particularly important in fonts, UI elements, and graphics used at small sizes. While it improves visual quality, anti-aliasing can slightly increase file size or rendering time, especially in real-time applications like games.
Yes, bitmap images can be converted into vector images through a process called vectorisation or image tracing. This involves detecting shapes, edges, and colour regions in the bitmap and converting them into vector paths. Software tools like Adobe Illustrator and Inkscape offer auto-tracing features that attempt to recreate a bitmap image using curves and shapes. However, the effectiveness of this process depends heavily on the nature of the original image. Simple images with clear lines and distinct colour blocks, such as logos or clip art, convert fairly well into vector format. In contrast, complex images like photographs or detailed artwork often do not translate effectively because vectors cannot easily capture subtle gradients or intricate textures. The resulting vector file may lack realism or become overly complex with too many points and paths. Manual cleanup is often required. Therefore, while conversion is possible, it is not always practical or accurate for highly detailed bitmap images.
Resolution refers to the total number of pixels in an image, usually measured in width × height, while pixel density refers to how many pixels are displayed per inch (PPI or DPI) on a screen or printed surface. On modern high-resolution screens, such as Retina or 4K displays, pixel density is much higher than on older screens. This means more pixels are packed into the same physical area, leading to sharper and more detailed image rendering. However, if a bitmap image has a low resolution or low pixel density, it may appear blurry or pixelated on such displays because the same pixel data is spread over a larger number of display pixels. To ensure crisp visuals, bitmap images must be created or exported at a resolution that matches the display or intended print size. This is particularly important for UI assets, app icons, and web images, which must often be produced in multiple resolutions to suit various devices.
Transparency in bitmap images is managed through the use of an alpha channel, which is an additional channel that stores transparency information for each pixel. In formats that support it, like PNG or TIFF, each pixel contains four components: red, green, blue, and alpha (RGBA). The alpha channel holds a value between 0 and 255 (or 0.0 to 1.0) that indicates how opaque or transparent the pixel is. A value of 0 means fully transparent, while 255 means fully opaque. This allows for smooth edges, translucent effects, and complex overlays in bitmap graphics. Transparency is essential in web design, game development, and photo editing.
In vector graphics, transparency is handled differently but is also supported. Individual objects can have an opacity attribute and transparency effects such as gradients or layers. Formats like SVG support alpha transparency, enabling designers to create layered vector artwork with see-through sections. However, compatibility and rendering can vary across software and browsers.
