Raster (BitMap) Image
About
Raster graphics (also called bitmap) is one of the two type of image.
The image is represented as dot matrix data structure.
A raster is technically characterized by the:
- width and height of the image in pixels
- and by the number of bits per pixel (a color depth, which determines the number of colors it can represent)
A bitmap is a single-bit raster.
The word raster comes from the Latin word rastrum, or rake. Old cathode ray tubes created images on screens by literally drawing one line at a time, raking each across the screen.
Image can also be expressed logically as vector to reduce the storage overhead.
Scaling Problem
Rasterized images are designed to work at a specific resolution.
A higher high-resolution displays needs to scale them up to appear the same size, losing information in the transformation.
Vector images never have this problem
Tools
- http://gimp.org/ - Bitmap Editor
Width
An image have:
- an intrinsic width that corresponds to the physical pixel width
- a logical width that takes the device ratio into account
The term Intrinsic is also known as natural. Ref - Object-Sizing Terminology CSS Images Module Level 3
Diff
https://huddle.github.io/Resemble.js/
Similarity
- SSIM: Structural Similarity Index is one method to measure the similarity between two images. Result of comparison between two images using SSIM, gives a value between 0 and 1. Closer to 1 implies more similarity.
- Feature matching, SURF, SIFT, FAST and so on. Find the number of match between the two images.
- Cross Correlation - a simple metrics which you can use for comparison of image areas. It's more robust than the simple euclidean distance but doesn't work on transformed images and you will again need a threshold.
- Histogram comparison - if you use normalized histograms, this method works well and is not affected by affine transforms. The problem is determining the correct threshold. It is also very sensitive to color changes (brightness, contrast etc).
- Detectors of salient points/areas - such as MSER (Maximally Stable Extremal Regions), SURF or SIFT. These are very robust algorithms and they might be too complicated for your simple task. Good thing is that you do not have to have an exact area with only one icon, these detectors are powerful enough to find the right match.
Properties / Feature
Raster Image - Feature (Image Properties)
Anti-aliasing
The bitmap image uses anti-aliasing, a method of using grayscale to attempt to smooth the drawing when the image is scaled up.
Optimization
- https://squoosh.app/ - an image optimization PWA - Make images smaller using best-in-class codecs, right in the browser.