How to Use the Image Comparison Tool

Overview

The Image Comparison Tool (ICT) enables scholars and researchers working on the Fitz Henry Lane catalogue raisonné website to be able to compare related images to one another. With this tool, images can be analyzed to discover changes between a final painting and the sketches or preliminary works-in-progress that led up to the final painting.

With the ICT, you can:

• View up to 4 selected images side by side;
• Zoom in to examine the details of images;
• Overlay one image on top of another image;
• Share the compared images with their respective zoom and positioning with other users, without either user needing to login to the website.

The ICT enables you to place multiple images into a “workspace,” and manipulate them by enlarging, zooming, repositioning within the workspace, adjusting the transparency, or removing one or more images.

Accessing the tool

The Image Comparison Tool is accessed from a record page in the Fitz Henry Lane website.

Click the Image Comparison Tool button, and the ICT will open in a new browser window.

The high-level structure of the tool includes:

• a toolbar at the top of the screen with image controls such as zoom;
• a workspace in the center of the screen for manipulating and comparing the images (with the images from the CR record they were viewing pre-loaded); and
• My Image Library at the bottom of the screen where the supplementary and related images are stored. Additional images can be added/removed from My Image Library as well. Related and Supplementary images for the main image they are viewing are pre-loaded into My Image Library.

Button on the record page

Tool Overview

The ICT is comprised of two comparison modes (Side-by-Side and Overlay) and a search mode.

Side-by-Side Mode

back to top

Side-by-side comparison mode

Side-by-side mode allows up to 4 images to be compared at one time.

To add images to a comparison, click on the top of My Image Library to open it (if closed), and click the Compare checkbox for the image(s) you want to add. As each image is added, the workspace will split to add an additional image frame.

Zoomed comparison

You can zoom in and reposition each image within their own frames in the workspace. There is a grey title bar above each image which contains the title (or caption, in the case of supplementary images) as well as the controls for that image. Use the zoom in and zoom out icons to enlarge the image. You can move the image around just by clicking and dragging it within its frame.

Lock checkbox

To “lock” the images together so that they can be zoomed in and moved together, click the Lock
Images checkbox in the Toolbar above the workspace. Uncheck the lock checkbox to manipulate the images independently.

Removing an image from a comparison

To remove an image from a comparison, click the (x) icon in the right corner of the grey title bar above the image.

Overlay Mode

back to top

Overlay mode

Overlay mode allows you to place one image on top of another image and adjust the opacity to directly compare elements in two paintings.

To switch into Overlay mode, click the “Go to Overlay Mode” button in the Toolbar at the top of the ICT. You can only compare two images at a time in Overlay mode, so if you have more than two images in the workspace in Side-by-Side mode, remove additional images until you only have two loaded.

In Overlay mode, instead of a frame for each image in the workspace, both images are loaded into the same workspace area.

Selecting the top image

You can click directly on an image in the background to make it the top image.

You can also use the “Switch Front Image” button in the Toolbar at the top of the workspace to toggle the layering of the images.

Moving and Zooming Images

To enlarge the image, click on the zoom in (or zoom out) icon.

To move the entire image window, click on the grey title bar and drag the window around the workspace.

Once you’ve zoomed in, you can click on the image and drag it around to reposition it within the window. You can expand the size of the window by clicking on the black border of the window and dragging it out (just like you can with any internet browser window).

Setting the opacity / transparency of the top image

Opacity control in the toolbar

The opacity of an image is how “see-thru” or transparent it is. One of the key features of this tool is that you can layer one image on top of another image, and then reduce the opacity of the top image to make it semi-transparent. This allows you to align the images into registration and compare the placement of specific elements in the paintings.

You can set the opacity of the top image in two places — when the images are unlocked, the opacity slider is in the grey title bar at the top of the image, to the left of the zoom tools.

When the images are locked, the opacity slider is in the toolbar above the workspace.

Sliding the circular “handle” on the slider to the left reduces the opacity. Sliding it to the right (the default position) increases the opacity.

My Image Library

back to top

My Image Library is the repository for all of your images. By default, we’ve populated the library with the supplementary and related images of the main image that you were viewing in the catalog.

You can remove, add and re-order images within My Image Library.

Hover menu for My Image Library

To remove an image, hover your cursor over the thumbnail of the image and click the red Remove button.

To re-order an image within the library, hover your cursor over the thumbnail, and click and drag anywhere on the menu. Drag and drop the image into its new position.

To add a new image to the library, refer to the next section on Search.

Adding supplementary images for a Related image already in My Image Library

Adding supplementary images from My Image Library

When you have a Related image in My Image Library for a main work, the supplementary images for that related image will not automatically be added to My Image Library. If you would like to add them, hover over the Related image. If there are supplementary images available to be added, a blue Add Supplementary Images button will be displayed in the hover menu.

Click this button to add these images.

Search

back to top

Search mode

From My Image Library, click on the Search button to enter the Search mode.

In the search box in the upper right corner of the ICT, enter your search term. A search term can be a title, caption or a keyword for the image(s) that you’re looking for. The list of potential matches to your search term will be refined as you type. Click on a match from the dropdown list or just hit Enter when you’re done typing, and your results will be displayed.

Search results are displayed with the Main work listed along with its supplementary images.

Adding Images

Add Button in search mode

To add an image so that you can use it in a comparison, you must add it to My Image Library.

Hover over an image thumbnail in the search results, and then click the ADD button to add that image to your image library.

In My Image Library, click the Compare checkbox for any images you want to compare, and then click the Start Comparing button. You can only select up to 4 images to compare.

Sharing a Comparison

back to top

Sharing a comparison layout

You can setup a comparison in either Side-by-Side mode or Overlay mode and share it with someone else.

When you have your image comparison ready, click the Share link button on the far right side of the toolbar. Your comparison layout will be saved and a unique URL link will be generated that you can copy / paste and send to someone else. When that link is clicked, the ICT will open and your comparison layout will be displayed just as you had created it.

If you share a link and then continue making changes to your comparison, those changes won’t be visible to the person accessing your link. You must create a new link every time you make changes to your comparison layout.