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.

It's an ideal way to compare a live website to the original design, or to compare to a previous version.

You can add a reference image by clicking the icon in a pane header.

When adding a reference image, the pane's width will be changed to be as wide as the image. Reference images can be shown on top of the website or beside it. When they're shown on top, a slider will let you fade between the site and the image, or you can opt to highlight the differences between the image and the site (everything that's the same will be shown in black). The side-by-side option allows you to disable the synced scrolling between the site and the image.

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