Skip to contentSkip to footer

Reference image

The reference image feature lets you overlay an image on top of a pane, or show it side by side. With this you can quickly compare a site to the design or to earlier screenshots to detect visual regressions.

Add a reference image by clicking the icon in a pane header.

Once you've selected an image, the pane will automatically resize to the width of the reference image.

From here, select if you want to show the image overlaid on the site, or side by side, and set an X and Y offset to position the image where you need it.

Overlaid Image

With the image overlaid you can see both the image and the website, letting you easily see where the differences are.

Use the slider to fade between the site and the image, or toggle "Reference image visible" to quickly hide and show the image.

There are three overlay styles:

  • Normal shows the image without any modifications
  • Difference sets the "difference" blend mode between the image and the site. Everything that's similar turns black, and differences are highlighted.
  • Invert Inverts the image. Everything that's similar turns grey. The differences from the image are shown inverted while the site retains its original colors.

Split View slider

The overlaid image has a slider on top of your pane so you can scrub between your site and the image. Useful for when you need to compare small details between the two.

Side-by-side image

With the image shown to the side of the pane you can disable the synced scrolling between them, and scroll each part individually.

If a reference image is active, the icon will show a blue dot.


Have a question about Polypane?

Contact us any time though chat, Slack or our contact form:

Contact Support

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane UI