🍋
Menu
Image

HDR

High Dynamic Range

An imaging technique that captures and displays a wider range of brightness levels than standard imaging.

Technical Detail

In digital imaging, hdr plays a critical role in how images are stored, processed, and displayed. Modern image pipelines handle imaging through standardized APIs (Canvas, WebGL, ImageBitmap) that operate directly on GPU memory for performance. Understanding hdr is essential for optimizing web delivery, where image payload typically accounts for 40-60% of total page weight. Browser-based tools can manipulate imaging entirely client-side using the Canvas API without server round-trips.

Example

```javascript
// HDR: 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)
```

Related Tools

Related Terms