🍋
Menu
Image

Raster Graphics

Raster Graphics (Bitmap Image)

A type of digital image composed of a rectangular grid of individually colored pixels, where the image's quality and detail are determined by the total number of pixels and color depth.

技術的詳細

Raster images store color values for each pixel in a grid. Common formats include JPEG (lossy, 8-bit), PNG (lossless, 8/16-bit, alpha), WebP (lossy/lossless, alpha), AVIF (AV1-based, superior compression), TIFF (versatile, used in print/science), and BMP (uncompressed). Color depth determines the number of possible colors per pixel: 8-bit (256 colors), 24-bit (16.7M colors), and 32-bit (24-bit + 8-bit alpha). Raster images cannot be scaled up without quality loss, unlike vector graphics which store mathematical shape descriptions.

```javascript
// Raster Graphics: processing with Canvas API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(sourceImage, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// Process pixels in imageData.data (RGBA array)
```

関連ツール

関連用語