Raster vs Vector Graphics
There are two fundamental types of digital images: raster (bitmap) and vector graphics. Understanding their differences is essential for choosing the right format for any task.
Raster Graphics
Raster images are composed of a grid of pixels, each with a specific color value. They are resolution-dependent, meaning they lose quality when scaled up. Common formats include JPEG, PNG, BMP, and GIF.
Pixel grid (simplified):
+---+---+---+---+
| R | G | B | W | Each cell = one pixel
+---+---+---+---+ R = Red, G = Green, B = Blue, W = White
| G | G | R | W |
+---+---+---+---+ Resolution: 4 x 2 = 8 pixels
| B | R | R | W |
+---+---+---+---+Advantages: Perfect for photographs, complex gradients, and detailed images.
Disadvantages: Pixelation when scaled, larger file sizes for high resolution.
Vector Graphics
Vector images are defined by mathematical equations describing points, lines, curves, and shapes. They are resolution-independent and scale infinitely without quality loss. Common formats include SVG, AI, and EPS.
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="blue" />
<rect x="50" y="50" width="100" height="100" fill="red" />
</svg>Advantages: Infinite scalability, small file sizes, ideal for logos and icons.
Disadvantages: Not suitable for photographs, limited gradient support.
Comparison
Feature | Raster | Vector
-----------------+------------------+------------------
Resolution | Fixed | Independent
File size | Depends on res | Depends on complexity
Scalability | Poor | Excellent
Best for | Photos, textures | Logos, diagrams
Edit at pixel | Yes | No (math-based)
Common formats | PNG, JPEG, BMP | SVG, AI, EPS