# HD Image

> Discover the HD Image Component allowing high-resolution image zooming akin to Google Maps functionality. Learn to insert, manage markers, and create actions for optimal image navigation and interaction.

https://docs.pandasuite.com/essentials/components/hd-image/

**The HD Image component is serving high-resolution images depending on display.** User can zoom in and out. As Google Maps, your image is automatically reworked to offer you the best image in very good quality at each zoom level.

[Video: HD Image component in use: zooming into the details of Delacroix's Liberty Leading the People, then back out to the whole painting]

## Insert Hd Image

Insert this component from the Components icon. In the properties, click on **Source** to insert an image.

> **Info**
>
> This component requires using a very high resolution (HD) image. With
> low-quality images, it is not possible to zoom.

## Creating Markers

Double-click on the image to navigate the HD image and create [markers](https://docs.pandasuite.com/essentials/interactions/markers/). Use the mouse and cursor to move through the image to the desired area and then click the **+** button. You can choose a default marker, which is the zone that appears when the screen loads. When you create markers, you can then use them as triggers (trigger an action when the user zooms to that level) and as an action (display that zoom level).

[Image: Inside the HD Image of a park map: the Markers panel with four zones and the Default zone field are framed]

## Create An Action To Zoom In

Create a marker at the desired zoom position. Select the trigger and add the action: **Interact with a component** > **HD Image** > **Change zone** > {marker}

[Image: Action window of the park map screen: Change zone on the HD image, with its four markers and Random listed to choose from]