Skip to contentSkip to footer

Reference image

In Polypane each pane can have its own reference image. This reference image is shown on top of the pane or right beside it, and scrolls in tandem with your page. 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 fade between the image and the site, or set the "show differences" option to highlight just the differences.

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.

Is your question not answered?
Ask via Twitter, Slack or our contact form

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 freeView pricing
Polypane screenshot