> ## Documentation Index
> Fetch the complete documentation index at: https://avala.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Image Panel

> Camera feed visualization with compressed and uncompressed image support

The Image panel renders camera image streams from your recording. It supports raw and compressed image formats, multi-camera grid layouts, synchronized playback across all panels, and LiDAR point overlay when calibration data is available.

## Supported Formats

| Schema                        | Format              | Notes                   |
| ----------------------------- | ------------------- | ----------------------- |
| `sensor_msgs/Image`           | ROS raw image       | Uncompressed pixel data |
| `sensor_msgs/CompressedImage` | ROS compressed      | JPEG, PNG, WebP         |
| `foxglove.RawImage`           | Foxglove raw        | Uncompressed pixel data |
| `foxglove.CompressedImage`    | Foxglove compressed | JPEG, PNG, WebP         |

### Auto-Detection

A topic is assigned to the Image panel when:

* Its schema matches one of the formats above, **or**
* Its topic name contains `image` or `camera`

## Features

### Multi-Camera Grid

When your recording includes multiple camera topics, the viewer arranges Image panels in an optimized grid layout:

| Camera Count | Layout                                     |
| ------------ | ------------------------------------------ |
| 1            | Full width, single panel                   |
| 2            | Side-by-side, equal width                  |
| 3            | Two panels on top, one spanning the bottom |
| 4+           | 2x2 grid                                   |

Each camera panel operates independently for zoom and pan, while sharing the same playback timeline.

### Synchronized Playback

Image panels are synchronized with all other panels through a shared timeline. When you:

* **Seek** to a timestamp, every Image panel displays the frame closest to that time
* **Step** forward or backward, all panels advance together
* **Play** the recording, all panels stream at the original frame rate

Cameras with different publishing rates are handled automatically -- each panel displays the most recent frame at or before the current timeline position.

### LiDAR Overlay

When camera calibration data is present in the recording (intrinsics from camera info messages, extrinsics from TF transforms), LiDAR points can be projected onto the camera image as a colored overlay.

<Steps>
  <Step title="Calibration is detected">
    The viewer reads camera intrinsic parameters and resolves the transform chain between the LiDAR frame and each camera frame.
  </Step>

  <Step title="Points are projected">
    3D LiDAR points are projected onto the camera image plane using the pinhole or double-sphere camera model.
  </Step>

  <Step title="Overlay is rendered">
    Projected points are drawn on top of the camera image, colored by the active visualization mode (intensity, depth, label, etc.).
  </Step>
</Steps>

<Tip>
  The LiDAR overlay is one of the most effective ways to verify 3D annotation quality and camera-LiDAR calibration. Misaligned overlays indicate calibration errors.
</Tip>

### Zoom and Pan

Each Image panel supports independent zoom and pan:

* **Scroll** to zoom in and out
* **Click and drag** to pan the zoomed view
* **Double-click** to reset to the default fit-to-panel view

Zoom state is preserved when stepping through frames, so you can zoom into a region of interest and scrub through the recording without losing your view.

## Common Use Cases

<CardGroup cols={2}>
  <Card title="" icon="eye">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Visual inspection</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Review camera feeds alongside other sensor data to understand the full scene context.</p>
  </Card>

  <Card title="" icon="check">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Annotation verification</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Use LiDAR overlay to verify that 3D annotations align correctly with objects visible in camera images.</p>
  </Card>

  <Card title="" icon="grid-2">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Multi-camera review</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Compare views from multiple cameras simultaneously to check spatial consistency.</p>
  </Card>

  <Card title="" icon="crosshairs">
    <p style={{fontWeight: 600, fontSize: '18px', marginBottom: '4px', marginTop: '8px', color: 'inherit'}}>Calibration validation</p>
    <p style={{fontSize: '14px', marginTop: '0px', opacity: 0.6}}>Check LiDAR-to-camera projection alignment to verify extrinsic and intrinsic calibration accuracy.</p>
  </Card>
</CardGroup>

## Related

* [Camera Projection](/docs/visualization/rendering/camera-projection) -- Pinhole and double-sphere camera models used for LiDAR overlay
* [Point Cloud Panel](/docs/visualization/panels/point-cloud-panel) -- 3D point cloud rendering with camera projection mode
* [Multi-Sensor Viewer](/docs/visualization/multi-sensor-viewer) -- Overview of the synchronized multi-panel layout