Bitmap (Raster) vs. Vector Graphics

All digital images fall into two categories: Bitmap (also called Raster) and Vector. Understanding the difference is critical for web design, printing, and file storage.

Bitmap (Raster) Images

A bitmap is a grid of colored squares called pixels. It is like a mosaic.

• How it works: The file stores color information for every single pixel. "Row 1, Column 1 is Blue. Row 1, Column 2 is Red..."
• Common Formats: JPEG, PNG, GIF, BMP, WebP.
• Best Use: Photographs. Real-world scenes have complex color blending that is best represented by a grid of dots.

The Downside: Resolution Dependence

Because a bitmap has a fixed number of pixels, you cannot zoom in forever. If you enlarge a 100x100 pixel image to fill a 4K screen, it will look blocky or blurry ("pixelated"). The computer has to guess the missing data.

Vector Images

A vector is a set of mathematical instructions.

• How it works: Instead of storing pixels, the file says: "Draw a circle at coordinates 10,10 with a radius of 5 and fill it with Red."
• Common Formats: SVG, AI (Adobe Illustrator), EPS, PDF (mostly).
• Best Use: Logos, icons, fonts, and technical diagrams.

The Upside: Infinite Scaling

Because vectors are math, they are resolution independent. You can print a vector logo on a business card or a billboard, and it will be perfectly crisp on both. The computer just recalculates the math for the new size.

Comparison Summary

Educational Tip

If you are building a website, use SVG for your icons and logo. They will look sharp on mobile phones and high-resolution Retina displays without needing large file sizes. Use JPEG or WebP for photos.