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

Start a Polypane trial

Improve your web dev workflow

Start free trialView pricing