Image Comparison

Image comparison creates a before/after slider that lets readers drag to compare two images side by side.

Basic Usage

Before

After

Syntax:

:::image-compare
![Before label](before-image.jpg)
![After label](after-image.jpg)
:::

With Title

Design Comparison

Original design

Redesigned

:::image-compare[Title Text]
![Before](before.jpg)
![After](after.jpg)
:::

Use Cases

• Before/after design changes
• Image processing results (filters, compression)
• Code editor theme comparisons
• UI improvements and redesigns

Best Practices

• Use images of the same dimensions for a clean comparison
• Use descriptive alt text for both images ("Before" and "After" with context)
• Add a title to explain what's being compared