# Explain labeled graphics and image comparisons

Use image markers to identify details, or compare two images with a slider.

Source: https://agavien.com/help/labeled-images-comparison
Language: en

## Before you start

- Prepare a clear base image for labels, or two related images for comparison.

- Include a text explanation for information that would otherwise depend entirely on seeing the image.

## Step by step

1. Choose Add block → Interactive → Labeled image to add an image with explanatory markers.

2. Upload the image, add markers, and position each marker over the relevant detail.

3. Edit the marker’s title and explanation, then check the placement in preview.

4. For a before-and-after comparison, choose Before / after in the Media category and add the two images.

5. Set the available labels and display options, and preview the comparison slider.

6. Test both types at phone width so markers and labels remain understandable.

## What to expect

Learners open markers to reveal details or move a slider to compare the images. These activities are exploratory rather than graded assessments.

## Tips & troubleshooting

- Use matching image proportions for a comparison where possible.

- After replacing or cropping a labeled image, review every marker position.

- Avoid using two images that look almost identical without explaining which difference matters.