Image Comparison widget

The Image Comparison widget lets you compare two images in the same space using an interactive before-and-after style slider.

Visitors can reveal more or less of either image by dragging the divider, or you can use a scroll-based reveal effect where the comparison changes as the visitor moves through the page.

This works particularly well for:

Before and after examples
Design transformations
Product comparisons
Website redesigns
Visual results
Alternative versions of the same scene
Showing a problem and solution

You can add separate labels for each side, control the initial divider position, and set focal points so the important parts of both images remain visible.

Mode

The Mode setting controls how visitors experience the comparison.

Available options:

Interactive (drag)
Reveal on scroll

Interactive (drag)

Displays a draggable divider between the two images.

Visitors can move the divider horizontally to reveal more or less of either image.

This is the most direct comparison mode and works particularly well when visitors should be able to explore the difference at their own pace.

Reveal on scroll

Reveals the comparison automatically as the visitor scrolls through the page.

This creates a more animated presentation without requiring the visitor to manually drag the divider.

💡 Tip

Use Interactive (drag) when the comparison itself is important and visitors may want to inspect details. Use Reveal on scroll when the comparison is more of a visual storytelling effect within the page.

Left image

The Left image is displayed on the left side of the comparison.

Click the image control to select or replace the image.

Focal point

Drag the focal point over the most important part of the image.

The focal point helps keep that area visible when the image needs to adapt to the widget's proportions.

For example, when comparing two portraits, place the focal point around the person's face in both images.

💡 Tip

For the clearest comparison, use two images with similar proportions, composition, and subject positioning whenever possible.

Left label

Use Left label to add a short piece of text identifying the left image.

For example:

Before
Original
Without Recrevio
Previous design
Juggling multiple tools

The label appears directly on the comparison image.

Keep it short and descriptive so visitors can understand the comparison immediately.

Right image

The Right image is displayed on the right side of the comparison.

Select or replace the image in the same way as the left image.

Focal point

Set the focal point for the right image independently.

Try to align the focal points of both images around the same subject or visual area when the two images are intended as a direct before-and-after comparison.

Right label

Use Right label to identify the right image.

For example:

After
Updated
With Recrevio
New design
All in one place with Recrevio

Using matching labels such as Before / After or Old / New makes the comparison especially easy to understand.

Start position

The Start position setting controls where the divider appears when the widget first loads.

The value is shown as a percentage.

For example:

50% places the divider in the center
A lower percentage reveals more of the right image initially
A higher percentage reveals more of the left image initially

A value around 50% is usually a good starting point because it gives both images equal visibility.

💡 Tip

If one side contains the main transformation or result you want to emphasize, you can adjust the starting position so that more of that image is initially visible.

Choosing images for comparison

The effectiveness of the widget depends heavily on the two images you select.

For direct before-and-after comparisons, try to use images with:

Similar dimensions
Similar camera angle
Similar subject position
Similar cropping
Matching focal points

The more closely the images align, the easier it is for visitors to identify the actual difference between them.

If the images represent two concepts rather than the exact same scene, alignment is less critical, but the comparison should still be visually clear.

Common use cases

The Image Comparison widget works particularly well for:

Before and after transformations
Website redesigns
Design changes
Photo editing comparisons
Product results
Renovations
Beauty or styling results
Visual demonstrations
Old versus new versions
Problem versus solution
Comparing different workflows or experiences

Best practices

Use images that make the comparison immediately understandable
Keep both images visually aligned when showing before-and-after results
Position focal points around the same subject
Use short, clear labels
Start around 50% unless there is a reason to emphasize one side
Choose Interactive (drag) when visitors should explore the difference themselves
Use Reveal on scroll for a more animated storytelling effect
Avoid images with dramatically different proportions
Check the result on both desktop and mobile
Make sure the most important details are not hidden by cropping

💡 Tip

The strongest Image Comparisons usually communicate the difference without requiring much explanation. If visitors cannot immediately tell what they are comparing, consider choosing more closely matched images or clearer labels.

Summary

The Image Comparison widget displays two images in the same interactive area
Choose between Interactive (drag) and Reveal on scroll
Add separate left and right images
Set an individual focal point for each image
Add labels to explain what each side represents
Use Start position to control the initial position of the divider
Use closely aligned images for the clearest before-and-after effect
Check the comparison on both desktop and mobile

Used well, the Image Comparison widget provides an intuitive and visually engaging way to demonstrate differences, transformations, and results.